一、概述
1、格式：
<style>
chooser｛
属性名：属性值；
........
｝
</style>二、css 属性
1、文字属性
（1）font-style：italic（斜体）normal（正常）；
（2）font-weight：bold/bolder/lighter（粗细），还可以用数字（100-900）；
（3）font-size：20px，一定要带单位 px；
（4）font-family："楷体"；写中文要用引号；
- 备用字体 font-family："楷体"，"微软雅黑"；
- 中英文分别设置字体 font-family："Arial"，"楷体"（英文字体在前，中文字体在后，这里的中文字体指能够处理中文的字体）
（5）文字属性的简写： font：style weight size family
- style 和 weight 可以交换位置，size 和 family 可以交换位置，但是 size 和 family 一定要在最后；
- style 和 weight 可以省略不写，但是 size 和 family 不能省略；
2、文本属性
（1）文本装饰：text-decoration：underline | overline | line-through | none；
（2）水平对齐：text-align：center；
（3）文本缩进：text-indent：2em；
3、颜色控制属性（color）
（1）英文：表达有限，用于调试；
（2）RGB（red ，green ，blue）：取值0到255；三值一样为灰色；
（3）RGBA：前面和 rgb 一样，最后一个是透明度，取值0到1；
（4）十六进制：原理就是 rgb；两位16进制对一位 rgb；
（5）十六进制简写：#ffee00 == #fe0 ； 必须是这个形式才能简写；
三、css 选择器
1、标签选择器
-
所有标签选中
2、id 选择器
-
id 唯一；
-
字母、下划线和数字组成，数字不开头；
3、类选择器
-
class="类名 类名"（多类）
- 多类应用：分类组合
4、后代选择器
- 格式：tag tag｛｝；
- 上面的 tag 可以是标签、id 和 class 选择器；
- 可以无限往下发展；
- 后代包含子和孙；
5、子元素选择器
- 格式：tag>tag｛｝
- 不能有空格
6、交集选择器（*）
- 格式：tagtag｛｝
- 二者无任何符号
7、并集选择器
- 格式：tag，tag｛｝
8、兄弟选择器
- 相邻兄弟：+ 连接；只能选中同级相邻后面的一个且中间不能隔开
- 通用兄弟：~ 连接；同级指定标签的后面，无论是否隔开
9、序选择器
（1）作用：用来选择同级别和同类型的第几个
（2）常用10个序选择器
- 同级别：不区分类型
| :first-child | p:first-child | 同级别的第一个p元素，第一个不是p则无法选中 |
| :last-child | p:last-child | 同级别最后一个p元素，最后一个不是p则无法选中 |
| :nth-child(n) | p:nth-child(2) | 同级别正数第二个元素，且这个元素要是p才能选中 |
| :nth-last-child(n) | p:nth-last-child(2) | 倒数第二个元素，且这个元素要是p |
| :only-child | p:only-child | 同级别有且只有一个元素且该元素必须是p |
- 同级别同类型
| :first-of-type | p:first-of-type | 同级别第一个p元素 |
| :last-of-type | p:last-of-type | 同级别最后一个p元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 正数第二个p元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 倒数第二个p元素 |
| :only-of-type | p:only-of-type | 只有一个p，但可以有其他的元素 |
- 说明：其中的 n 可以为 odd（奇数）、even（偶数）和 xn+y
10、属性选择器
（1）p[id]
（2）p[id=one]
（3）p[attr^=value]：属性值以什么开头
（4）p[attr$=value]：以什么结尾
（5）p[attr*=value]：包含什么
11、通配符选择器（*）
（1）格式：*｛｝通配所有元素；
（2）说明：标签多的时候性能差；
四、CSS三大特性
1、继承性
（1）说明：给父元素设置一些属性，子元素和后代元素夜可以使用；
（2）注意：
- 不是所有的属性都可以继承，只有以color、font、text和line开头的属性才可以继承；
- 继承性中的特殊性：a 标签的下划线和颜色以及 h 标签的大小是无法通过继承来改变的；
2、层叠性
（1）说明：不同的选择器选中了同一个元素，并且设置了相同的属性，则该属性会发生覆盖；
3、优先级
（1）说明：就是如何层叠；
（2）优先级的确定：
- 是否直接选中（间接选中指继承）：直接优先于间接，都是间接听离得近的；
- 是否相同选择器：直接选中的相同选择器谁在后面听谁的；
- 不同选择器：直接选中的不同选择器优先级：id》类》标签》通配符》继承》浏览器默认；
（3）！important
- 提升直接选中的优先级，间接选中的没有作用；
- 加在需要提升的属性的后面，只对该属性提升；
（4）权重问题
- 多选择器混用，确定优先级；
- 确定权重的规则：先看 id 个数，再看 class 个数，然后是 tag 个数，三个都一样谁在后听谁的；
五、CSS显示模式
1、div 和 span
（1）div 是容器级别的标签（可以嵌套其他的标签），span 是文本级标签（只能嵌套文本、图片和超链接）；
2、css 元素显示模式
（1）标签的分类：html---容器级 和 文本级；css---块级 和 行内元素；
（2）显示模式：
- 块级元素：独占一行；默认和父级元素一样宽；可以设置宽高；
- 行内元素：不独占一行；默认和内容一样宽；不可以设置宽高；
- 行内块级元素：既不独占一行，又可以设置宽高；img；
（3）总结：容器级的都是块级，文本级的除了 p 以外都是行内元素
（4）显示模式转换：
- 三种显示模式可以相互转换；
- 通过设置 display 属性转换；
- display 的3种取值：block（块级）、inline（行内）、inline-block（行内块级）
3、练习：百度首页（注意字符实体）
六、CSS背景和精灵图
1、背景
（1）颜色：background-color：red；
（2）图片：background-color：url（images/1.jpg）；图片小会自动进行平铺
（3）平铺：background-repeat：repeat | no-repeat | repeat-x | repeat-y
- 应用：网页背景的平铺可以减小图片的大小，提升访问的速度；
（4）背景定位
- background-position：水平 垂直（写数值的时候要带单位，数值可以为负）
- 应用：图片核心内容的居中显示，设置背景，而不是设置 img
（5）背景关联和缩写
- 背景的缩写：background：颜色 图片 平铺 关联 定位；其中任何一个可以省略；
- 背景关联方式：background-attachment：scroll（随滚动条滚动）| fixed（固定不动）
（6）背景图片和插入图片的区别
- 背景不会占用容器的空间；
- 背景有定位的属性，更方便位置的调整；
- 插入的语义强于背景，想被搜索引擎搜索到用插入；
- 图片的合成用 div 和背景图片；
（7）CSS精灵图
- 定义：一种图像的合成技术，减少请求的次数；
- 使用：设置宽高，再设置定位，利用fireworks；
七、盒子模型
1、边框属性
（1）四种写法
- 统一设置：border：宽度 样式 颜色
- 分别设置：border-top | bottom | left | right：宽度 样式 颜色
- 按要素设置：border-width | style | color：上右下左（顺时针）；省略的时候上下一致，左右一致；
- 非连写：border-top-style（少用）
（2）说明：只有样式不能省略
2、内边距和外边距
（1）内边距（padding）：border 到 内容的间距
- 连写：padding：上右下左；可以省略，省略后上下一致，左右一致；
- 不连写：padding-top | left：
- 说明：设置内边距后，容器会被拉伸；内边距的部分也有背景；
（2）外边距（margin）：标签与标签之间的间距
- 写法：margin | margin-top：注意事项与 padding 一样；
- 注意：外边距没有背景；
- 外边距的合并：水平方向是叠加，垂直方向是合并，合并的时候谁大听谁的；
3、盒子模型
（1）盒子模型的概述：手机盒子
- 所有的 html 都可以设置宽高、边框、外边距和内边距；
（2）盒子宽度和高度
- 内容的宽度和高度：设置的 width 和 height；
- 元素的宽度和高度：width + 内边距*2 + border宽*2；
- 元素空间的宽度和高度：width + 内边距*2 + border宽*2 + 外边距*2；
（3）盒子的box-sizing 属性
- 作用：通过设置这个属性可以保证元素再增加 border 和 padding 属性之后，元素的宽和高不变
- 属性值：content-box（默认） | border-box（宽高恒定）
（4）两个盒子的嵌套
- 小盒子在大盒子的居中可以通过设置 margin 和 padding 来实现；
- 居中首选 padding ，其次 margin；
- margin-top 产生问题解决：给大盒子设置 border；
- margin：0 auto（可以设置水平居中，垂直居中不行）；
- text-align （让盒子里的文字和图片居中）和 margin：0 auto（让盒子自己水平居中）；
（5）清空默认边距
- 作用：方便盒子的定位和宽高的设置；
- 常用的方法：*｛margin：0；padding：0；｝
- 开发用的方法：百度 css reset
（6）行高和字号
- 文字默认在一行的行高中垂直居中；
- 一行文字的垂直居中：设置行高（line-height）和盒子的高度相等即可；
- 多行文字居中：只能设置padding；
- 盒子中的文字：padding 以左边的为准，右边的有换行造成的误差；padding-top 的设置要注意行高带来的影响；
（7）练习：文字界面