2018-06-07复习css

引入css

<link href="xxx.css" rel="stylesheet" type="text/css">
rel:告诉浏览器引入的是一个样式表文件
type:文件的类型
href:路径

路径：
1.绝对路径：

• 本地存放文件的地址 D:\miaov\4-12\index.css
• 网络地址 https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491994791514&di=798f627c77983625c2a311a600f51edc&imgtype=0&src=http%3A%2F%2Fimg.tuku.cn%2Ffile_big%2F201507%2F6568e0bd07c6474a9fa400942ad1fa19.jpg
  2.相对路径：
• 相对于当前文件 的路径
  例：
  index.css 当前文件下的index.css文件
  css/index.css 当前文件下的css文件夹里面的index.css文件

边框 border

• 颜色color ：transparent 透明
• 样式 style：solid 实线、dashed虚线、dotted点线
• 大小width：
  • border-width：40px ；相当于设置上右下左4条边框都是40px
  • border-width ：10px 40px ；相当于设置 上下边框是10px 左右边框是40px
    -border-width: 10px 40px 100px；上边框 10px 左右边框都是40px 下边框是100px
    注意 针对同一个元素的相同样式设置，后者覆盖前者

背景 background

• position定位：position(x,y)
  X轴
  1.（关键字） left 图片的左侧和元素的左侧对齐
  2.（关键字） center 图片的中间和元素的中间对齐
  3.（关键字） right 图片的右侧和元素的右侧对齐
  1.（具体的数值）正值 图片往右移动对应的距离
  2.（具体的数值）负值 图片往左移动对应的距离

Y轴
1.（关键字）top 图片的顶部和元素的顶部对齐
2.（关键字）center 图片的中间和元素的中间对齐
3.（关键字）bottom 图片的底部和元素的底部对齐
1.（具体的数值）正值 把图片从上往下移动对应的距离
2.（具体的数值）负值 把图片从下往上移动对应的距离
百分比
图片的百分比位置和元素的百分比位置对齐

• attachment 背景图片固定
  1.scroll 滚动
  2.fixed 固定（位置不随着页面的滚动而变化）
  注意：使用fixed之后背景图片位置的position计算方式就不是根据元素的左上角进行计算了，而是根据可视区的位置

字体font

样式：

• font-style:italic 斜体
• font-weight:bold 加粗
• line-height:行高 值是具体的数字
  *带单位 行高就是具体的像素值
  *不带单位 行高是字体大小的倍数
  *文字上下的所空出的距离 = （行高-字体大小）/2，如果这个值变成了一个小数，那么上面小下面大
  样式集合
  固定顺序：font:weight style size/line-height family
  font:bold italic 20px/40px '微软雅黑' font-size,font-family是必写项

文本

text-align 文字对齐
text-decoration 文本修饰
*underline 下划线
*line-through 删除线
*overline 上划线

间距（可以是负值）

letter-spacing 字母间距/字间距
word-spacing 单词间距/词间距
white-space:

white-space: pre; //保留文本输入格式
white-space:pre-wrap; //保留空白符序列，但是正常地进行换行
white-space:pre-line; //合并空白符序列，但是保留换行符
white-space: nowrap; //制不换行，文本在元素中一行显示，不换行

词内断行 word-break: break-all;

padding

1.padding区域可以显示元素背景

margin 外边距

1.margin叠压：两个相邻元素的margin是叠压在一起的，距离以大的为准

2.margin传递：元素的上下margin会传递给父级，（父元素的第一个子元素的上margin、父元素的最后一个子元素的下margin，会传递给父级（作用在父级身上））

• margin-left: auto; (元素在父级中居右显示)
• margin-right: auto;(元素在父级中居左显示)
• margin: 0 auto; (元素在父级中水平居中显示)

a标签

• 不会继承父级的字体颜色，必须在自己身上设置
• 换行会产生空格（解决：1.不换行 2.设置父级的字体大小为0）
• href值为#id名称 跳转至id元素所在位置
• target 在何处打开链接

<a href="17-红色背景页.html" target="_blank" >点击跳转打开新窗口</a>
<a href="17-红色背景页.html" target="_self" >点击跳转当前窗口打开</a>

• base 定义页面上所有的链接的默认打开方式 和 默认地址

<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />

• a标签下划线的颜色和字体颜色一致

  
  

常用布局标签

dl 定义列表
dt 定义列表的列表项
dd 对dt展开说明

• header 页面头部或者板块头部
• footer 页面底部或者板块底部
• section 区域板块
• nav 导航
• article 一篇文章，或者帖子
• aside 附属信息，一般用在article的属性信息,或者作为整个页面附属，如侧边栏
• cite 引用
• mark 标记 （清除：background-color:none;）
• time 时间

图片 img

图片默认样式清除：vertical-align: top;
-top 以顶部对齐
-middle 以中部对齐
-bottom 以底部对齐
清除底边距离：border: none;
（低版本ie 下边框）

表格 table

• caption表格标题 （可以没有）
• thead 表头
• tbody 表格主体
• tfoot 表格底部（可以没有）
• tr 行/th 单元格 (加粗、居中)/td 单元格
  表格默认样式
  td和th有padding（padding 0），一般在td和th上设置背景颜色
  直接设置在表格上的内容：
• cellspacing 单元格间距 (直接加在html里面）cellspacing='10px';
• cellpadding 单元格填充cellpadding='10px';
• rowspan 合并行rowspan="2";//合并两行
• colspan 合并列colspan="2";//合并两列
  加在样式表中间的内容
• border-spacing 单元格间距
• border-collapse 边框合并

border-collapse:collapse;//合并
border-collapse:separate;//分离（默认）

在td、th元素上设置的内容

• 单元格设置宽度，一列宽度都会进行变化
• 单元格设置高度，一行高度都会进行变化
• 单元格的内容垂直对齐方式 通过修改单元格的vertical-align(top/middle/bottom)

表单form

• action 数据的提交地址,数据提交成功之后的跳转地址
• name 数据名称 (添加name来提交数据)
• type 类型
  text 文本输入框
  password 密码输入框
  radio单选框
  checkbox 多选框(复选框)
  submit 提交按钮
  reset 重置按钮
  file 选择文件
  hidden 隐藏控件
• select 下拉菜单
  option 下拉菜单的选项
• textarea 文本域
  rows 行
  cols 列
• label标签的使用
  for属性 要辅助的按钮的id名

表单的属性
readonly 只读属性 可以被提交
disabled 禁用或者说不可用的 不会被提交
checked 单选框或者复选框的默认选中
selected 设置下拉菜单的默认选中项