一、 CSS是什么
CSS 指层叠样式表 (Cascading Style Sheets)、 样式定义如何显示 HTML 元素、 样式通常存储在样式表中、 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题、 外部样式表可以极大提高工作效率、 外部样式表通常存储在 CSS 文件中、 多个样式定义可层叠为一个、二、CSS负责结构、表现、行为中的表现，简单的CSS 文档可以改变所有页面的布局和外观
三、CSS创建
如何插入样式表： 插入样式表的方法有三种: a. 外部样式表(External style sheet) 页面使用 标签链接到样式表。 标签在（文档的）头部。 <link rel=“stylesheet” type=“text/css” href=“文件的路径”/> 将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式。 b. 内部样式表(Internal style sheet) 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style> 标签在文档头部定义内部样式表。 使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护。 <style type=“text/css”></style> c. 内联样式(Inline style) 将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。 <p style=“color:red;”></p>四、CSS语法
选择器通过选择器可以选中页面中的一组元素，然后为其设置样式
元素选择器 根据标签名，选中页面中的指定元素 语法：标签名{ } 例子：
id选择器 根据元素的id属性值选中一个唯一的元素 语法：#id {} 例子：
类选择器 根据元素的class属性值，选中一组元素 语法：.class{} 例子：
通配选择器 选中页面中的所有元素 语法：*{} 通配选择器的性能比较差，尽量避免使用
并集选择器 可以同时选中符合多个选择器的元素 语法：选择器1,选择器2,选择器N{} 例子：
交集选择器 可以选中满足多个条件的元素 语法：选择器1选择器2选择器N{} 例子：
后代元素选择器 选中指定元素的指定后代元素 语法：祖先元素 后代元素{} 例子：
子元素选择器 选中指定元素的指定子元素 语法：父元素 > 子元素 {} 例子：
声明块 声明块中实际上就是一个一个CSS声明 声明： a.每一个CSS声明都是一个样式，实际上就是一个名值对的结构 b.名和值之间使用:链接,:左边是样式的名字:右边是样式的值,每一个声明以;结尾 例子：
五、元素之间的关系
a. 父元素 直接包含子元素的的元素叫做父元素 b. 子元素 直接被父元素包含的元素叫做子元素 c.祖先元素 直接或间接包含后代元素的元素叫做祖先元素，父元素也是祖先元素 d.后代元素 直接或间接被祖先元素包含的元素叫后代元素，子元素也是后代元素 e.兄弟元素 拥有相同父元素的元素叫做兄弟元素
六. 块元素和内联元素
块元素:块元素会独占页面中的一行 一般使用块元素对页面进行布局 常见的块元素：div、 p、 h1~h6… 内联元素:只占用自身的大小，不会独占一行 内联元素也叫行内元素（inline） 一般内联元素都是用来为文本来设置效果 常见的内联:span 、a 、 img… 包裹规则:一般都是使用块元素去包裹内联元素，而不会使用内联去包裹块元素 a元素可以包含任意元素，除了a本身 p元素不能包含任何块元素
七. 伪类和伪元素
伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置 伪类： :link 表示一个普通的链接（未访问过的链接） :visited 表示访问过的链接 :hover 鼠标移入的链接，也可以为其他元素设置hover :active 正在被点击的链接，也可以为其他元素设置active :focus 表示元素获取焦点的状态，一般用于文本框 伪元素： ::selection表示内容被选中的状态，在火狐中使用::-moz-selection来代替 :first-letter表示第一个字符 :first-line 表示文字的第一行 :before 选中元素的最前边,一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容 :after 选中元素的最后边,一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容。
八、属性选择器
根据元素的属性选择指定元素[属性名] 选取含有指定属性的元素[属性名=“属性值”] 选取属性值等于指定值的元素[属性名^=“属性值”] 选取属性值以指定内容开头的元素[属性名$=“属性值”] 选取属性值以指定内容结尾的元素[属性名*=“属性值”] 选取属性值中包含指定内容的元素九、兄弟选择器
兄弟元素选择器 选取后一个兄弟元素：前一个 + 后一个 选取后边所有的兄弟元素：前一个 ~ 后边所有十、子元素的伪类
十一、否定伪类
从一组元素中将符合要求的元素剔除出去语法：:not(选择器)例子 ：.main:not(div)十二、样式的继承
为祖先元素设置样式，会同时应用到它的后代元素上，这一特性称为样式的继承。通过样式的继承可以将一些样式统一设置个祖先元素，这样所有的后代都会应用到相同的样式。但是并不是所有的样式都会继承，比如：背景相关的，边框相关的，定位相关的。具体参考文档十三、选择器的优先级
当使用选择器为元素设置样式时，如果样式发生了冲突，采用哪个样式由选择器的优先级来决定。优先级： 当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式优先级计算时，总大小不能超过他的最大的数量级可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。继承的样式没有优先级十四、选择器的性能
浏览器在解析一组选择器时，是从后边往前一个一个的解析的如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。*通配选择器，性能也比较差，要避免使用通配选择器十五、单位
长度单位 px：像素，像素就是构成一个图片的最小的单位，我们的屏幕就是由一个一个像素点构成 一个像素指的就是一个像素点 在不同的显示器中，一个像素的大小是不同的，越清晰的屏幕像素越小 %：可以将一个元素的样式值设置为一个百分比的值，这样浏览器将会根据父元素的值去计算出相应的值 当父元素的值改变时，子元素的值会按照一定比例一起改变，经常用于自适应的页面 em：em会相对于当前元素的字体大小来计算 1em = 1font-size em经常用于设置文字相关的一些样式，因为当文字大小发生改变时，em会随之改变颜色单位 可以直接使用英文单词来表示颜色 RGB值：所谓RGB值就是通过红 绿 蓝三元色的不同组合来搭配出各种不同的颜色 语法：rgb(红色,绿色,蓝色)，这三个值需要一个0-255之间的值 也可以使用百分数来设置RGB值，需要0%-100%之间的值，100%相当于255 十六进制RGB值：也是一种RGB值的表示方式，不同的是它使用的是16进制数字来表示而不是10进制 语法：#红色绿色蓝色，这里的颜色需要一个00-ff之间的值 例子：#ff0000 如果颜色的是两位两位重复的，可以进行简写，比如 #aabbcc 可以写成 #abc文本样式十六、背景
CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果: background-color background-image background-repeat background-attachment background-positionCSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如：“rgb(255,0,0)” 颜色名称 - 如：“red” 例子： background-image 属性描述了元素的背景图像： 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 例子： 背景图像 - 水平或垂直平铺 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调。 平铺效果可以自定义 背景图像- 设置定位与不平铺： 如果你不想让图像平铺，你可以使用 background-repeat 属性 例子：
为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。 可以利用 background-position 属性改变图像在背景中的位置： 例子： 背景- 简写属性： 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中. 背景颜色的简写属性为 “background”: 例子： 当使用简写属性时，属性值的顺序为：: background-color background-image background-repeat background-attachment background-position 按照页面的实际需要使用.
opacity 可选值：0~1 0表示完全透明 1表示完全不透明
IE8及以下的浏览器不支持该样式，可以使用滤镜来代替
filter:alpha(opacity=值)这里值需要一个0-100之间的值0相当于完全透明100完全不透明