CSS学习笔记
一、CSS概念
Cascading Style Sheets 层叠样式表
二、语法格式
1、选择器{属性：值；属性：值；...}
3、类别选择器 .header{width:1000px;height:100px} 引用方式 class="header"
4、ID选择器 #header{width:1000px;height:100px} 引用方式 id="header" （ID选择器：一般只使用一次）
5、集体声明 h1,p{font-size:14px}
6、嵌套声明 p a:hover{background:white;font-size:14px}
7、全局声明 *{margin:0；padding:0}
8、混合引用方式 id="header" class="header"
三、格式添加方法
1、行内样式
<p style="color:red;"></p>
2、内嵌样式
<head>
<style type="text/css">
p{color:red;}
</style>
</head>
3、独立样式表方式
<head>
<link rel="stylesheet" herf="css/index.css">
</head>
4、样式的优先级原则：靠近优先
四、线性单位
1、px 像素
2、em 一个字符的高度
3、% 百分比
五、 颜色单位
1、单词：red green blue white black pink
2、rgb(x,x,x) x取值0~255 或 rgb(x%,x%,x%) x取值0~100
3、rgba(x,x,x,a) a取值0~1 0表示完全透明 1表示完全不透明
4、十六进制 #xxxxxx xx取值00~ff
六、文本其它
1、字符间距 letter-spacing
2、行高 line-height
3、文本对齐方式 text-align 可选 center,right,left,justfy
4、文本装饰线 text-decoretion 可选 overline,line-through,underline,none
5、首行缩进 text-indent 如：text-indent:2em 表示首行缩进两位
七、字体
1、font，font-family,font-size,font-style,font-weight
2、font格式 font:斜体 粗体 字号/行高 字体
八、背景
1、background
2、background-color
3、background-image:url("index.jpg")
4、background-repeat: repeat,repeat-x,repeat-y,no-repeat
九、超链接
1、a:link
2、a:visited 已经访问
3、a:hover 鼠标悬停 （可以做简单动画）
4、a:active 鼠标激活（点击不放状态）
十、列表
1、ul无序 ol有序
2、list-style, list-style-image, list-style-position:inside (or outside), list-style-type
十一、表格
1、table, td, th, tr
2、边界合并 border-collapse:collapse
3、奇偶选择器 tr:nth-child(odd l even){...}
十二、盒子模型
1、构成：内容、高度height、宽度width、边界border、内边距padding、外边距margin
2、overflow属性：hidden、scroll、auto
3、border属性：border-width: px、thin、medium、thick， border-style：dashed、dotted、solid，border-color: ... 格式：border：宽度 形式 颜色
4、border的方向性：margin: 上 右 下 左；
margin：1px；= margin：1px 1px 1px 1px；
5、div做盒子自动换行
6、margin属性垂直方向合并 水平方向不合并
7、div 水平居中样式 margin：0 auto；
十三、定位机制-文档流
1、元素分类 block 单独一行 可设置 width、height、margin、padding 涉及元素 div、p、h1~h6、ol、ul、table、form
2、元素分类 inline 不单独一行 不可设置 width、height、margin、padding 涉及元素 a、span
3、元素分类 inline-block 不单独一行 可设置 width、height、margin、padding 涉及元素 img
4、元素通过display属性转换 display：block、inline、inline-block、none
十四、定位机制-浮动定位
1、float属性：left、right、none
2、clear属性：left、right、both
十五、定位机制-层定位
1、position属性：fixed、relative、absolute 系统默认 static
2、fixed参照物为浏览器
3、relative参照物为直接父元素 保留元素位置
4、absolute参照物为间接父元素（非static元素 最终追溯到浏览器）不保留元素位置
5、其他属性：left、right、top、bottom、z-index
