1. 1 CSS语法
   1. 行内式
   2. 嵌入式
      1. <head> <style> 标签名{ 属性名: 值 } </style> </head>
      2. 应用于首页
   3. 链接式
      1. <link type="text/css" rel="stylesheet" href="mystyle.css">
         1. 将一个.css文件引入到html文件中
   4. 导入式
2. 2 CSS选择器
   1. 基础选择器
      1. 通用选择器
         1. *
      2. 标签选择器
         1. E
      3. id选择器
         1. #ID
      4. class选择器
         1. .Class
         2. 一个类用于多个元素; 一个元素可用于多个类
   2. 组合选择器
      1. 多元选择器
         1. E1, E2
      2. 后代选择器
         1. E1 E2
      3. 子代选择器
         1. E1 > E2
      4. 毗邻选择器
         1. E1+ E2
   3. 属性选择器
      1. E[att]
      2. E[att="val"]
      3. E[att~="val"]
      4. E[att^="val"]
      5. E[att$="val"]
      6. E[att*="val"]
      7. 属性可自定义
3. 3 CSS常用属性
   1. 文本属性
      1. color
      2. font
         1. -size
         2. -family
         3. -style:
            1. italic
            2. normal
         4. -weight:
            1. bold
            2. normal
         5. font: 是否加粗 字号/行高 字体
            1. e.g. font: normal 12px/36px 'Microsoft Yahei'
      3. line
         1. -height
      4. text
         1. -decoration
            1. 常用于a标签去下划线
         2. -indent
            1. 首行缩进
         3. -align:
            1. center
            2. 文字居中
   2. 列表属性
      1. list-style:
         1. none
         2. 子主题 2
         3. 子主题 3
         4. 子主题 4
   3. 背景属性
      1. background
         1. -color
         2. -image: url(...)
         3. -repeat:
            1. repeat-x
            2. repeat-y
            3. no-repeat
         4. -postion
            1. 水平方向
            2. 垂直方向
   4. display属性
      1. inline-block
   5. 盒子模型
      1. 子主题 1
      2. 子主题 2
      3. 子主题 3
4. *4 伪类
   1. anchor伪类
      1. a:link{...}
         1. (没有接触过的链接), 用于定义链接的常规状态
      2. a:hover{...}
         1. (鼠标悬停在链接上的状态), 用于产生视觉效果
      3. a:visited{...}
         1. (访问过的链接), 用于阅读文章, 能清楚的判断已经访问过的链接
      4. a:active{...}
         1. (在链接上按下鼠标时的状态), 用于表现鼠标按下时的链接状态
   2. before, after伪类
      1. e.g.
         1. 在<p>元素之前插入内容
            1. p:before{content:"hello"}
         2. 在<p>元素之后插入内容
            1. p:after{content:"hello"}
   3. 用来给选择器添加一些特殊效果
5. 自由主题