一点前提

第一章大概讲了css出现的历史，介绍了div和span，以及id和class的简单实用方法。

第二章

常见的选择器
  • 元素选择器:直接写上类名，就可以选择

h1{color:66ccff;}

  • 后代选择器:在一个选择器后加上空格，就可以选择前面元素的后代

h1 p{color:66ccff;}

  • 类选择器:寻找特定类

.first_thing{color:66ccff}

  • ID选择器:寻找id相关的元素

#thisid{color:66ccff}

  • 通用选择器:选择所有元素，起通配符作用

*{}

  • 伪类选择器:
    • 链接伪类
      • :link链接未被访问
      • :visited链接被访问
    • 动态伪类
      • :hover鼠标悬浮在元素上方
      • :active元素被激活时(例如，点击一个链接时，被点击的这个瞬间就是激活状态)
      • :focus有键盘输入焦点的元素
  • 子选择器:后代选择器选择所有后代，而子选择器只选择直接后代，及为子元素

#nav>li{color:66ccff;}

  • 相邻选择器:拥有同一个父元素，并且相邻

h1+p{color:66ccff;}

  • 属性选择器:根据特定属性来设定css样式
  • 伪元素:不在dom树中出现

::after,::before等（注意，::双冒号的写法是css3规定的，都按双::来写，为了区分伪元素和伪类）

层叠和特殊性

一个元素可能有多个css规则来描述他的特征，那么这个时候听谁的呢？
首先是层叠，将css重要度分为：

  1. 标有!important的用户样式
  2. 标有!important的作者样式
  3. 用户样式
  4. 作者样式
  5. 浏览器渲染样式

然后是特殊性：

  1. 行内样式
  2. id选择器
  3. 类，伪类，属性选择器等
  4. 类型和伪元素选择器

为了解决覆盖太多造成的混乱问题，建议给每个区块加上语义化的id，这样来减少覆盖样式的编写

继承

子元素继承父元素属性

规划组织维护样式表

引入样式表

请尽量在头部用link标签以链接形式引入样式表，这样做效率更高

在设计css文件时，用注释来对不同区块的样式进行分割，以便更好的阅读代码
下面是一个css文件的书写顺序

  • 一般性样式
    • 主题样式
    • reset样式
    • 链接
    • 标题
    • 其他元素
  • 辅助样式
    • 表单
    • 通知和错误
    • 一致的条目
  • 页面结构
    • 标题，页脚和导航
    • 布局
    • 其他页面结构元素
  • 页面组件
    • 各个页面
  • 覆盖

注释的作用：
@todo来表示某些东西要在以后进行修改
@bugfix表示遇到的问题
@workaround表示并不完善的权宜之计
（这些东西叫做gotcha）