作为当今web界三大语言之一的CSS，虽然不难学，但真正彻底把原理和基本概念全部搞懂也不是件容易的事。很多时候我们不是不善于交流，而是对基础知识掌握不够牢固，不敢交流。避免这个尴尬局面就是真正掌握CSS，向精通方面发展。

在阅读了《CSS设计指南（第3版）》之后，我被书中简单明了，通俗易懂的教学方式所震撼，觉得有必要对自己学到的东西做一个记录，算是一个读书笔记吧！

第1章 HTML标签

第一章需要注意几个概念

1、HTML元素

HTML元素是块级元素，还是行内元素：几乎所有HTML元素的display属性值要么为block，要么为inline。块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。

2、DOM层次

DOM层次：section是h1和p的父元素，也是直接祖先元素。h1和p是section的子元素，也是直接后代元素。h1和p是同胞元素，它们有共同的父元素section。section、h1和p 是body的后代元素，或者下面的元素（嵌套在后者的内部）。section和body是h1和p的祖先元素，或者上面的元素（在某一层次上包含后者）。

第2章 CSS工作原理

第二章需要掌握的几点知识

1、样式加载

文档添加样式的三种方法：有三种方法可以把CSS添加到网页中，分别是写在元素标签里（也叫行内样式）、写在<style>标签里（也叫嵌入样式）和写在单独的CSS样式表中（也叫链接样式）。

除了以上三种为页面添加样式的方法，还有一种在样式表中链接其他样式表的方法，那就应用@import指令（是一种at规则）：

@import url(css/styles2.css)
/*要注意的是，@import指令必须出现在样式表中其他样式之前，否则@import引用的样式表不会被加载。*/

有一点很重要，那就是CSS样式是通过<style>标签嵌入到页面里的。当浏览器遇到开标签<style>时，就会由解释HTML代码切换为解释CSS代码。等遇到闭标签</style>时，它会再切换回解释HTML代码。

对于写在样式表里的样式，就不需要<style>标签了。如果你在样式表里加上这个标签，
样式表中的样式就不会被浏览器加载了。

2、选择符

所有用于选择特定元素的选择符又分三种。

  • 上下文选择符。基于祖先或同胞元素选择一个元素。
  • ID和类选择符。基于id和class属性的值（你自己设定）选择元素。
  • 属性选择符。基于属性的有无和特征选择元素。

普通的上下文选择符的格式是：标签1 标签2 {声明}。可以合并多个选择符到一条，加一个逗号分隔。声明里也可以是多条样式。

这里主要记录特殊的，虽然用的少，但会与不会，是体现能力的。

  • 子选择符> 
      标签1 > 标签2

    标签2必须是标签1的子元素，或者反过来说，标签1必须是标签2的父元素。与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。

  • 紧邻同胞选择符+ 
      标签1 + 标签2

    标签2必须紧跟在其同胞标签1的后面

  • 一般同胞选择符~ 
      标签1 ~ 标签2

    标签2必须跟（不一定紧跟）在其同胞标签1后面。

  • 通用选择符* 
      *（按Shift+8）

    通用选择符*（常被称为星号选择符）是一个通配符，它匹配任何元素。

我们跳过ID和类选择符，因为这是很常用的，是应该要懂的。

属性名选择符有两种：

标签名[属性名]

选择任何带有属性名的标签名。

标签名[属性名="属性值"] 
在HTML5中，属性值的引号可加可不加，在此为了清楚起见，我们加了。

选择任何带有值为属性值的属性名的标签名。

3、伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。

  • UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。
  • 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

a. 链接伪类

针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。

  • Link。此时，链接就在那儿等着用户点击。
  • Visited。用户此前点击过这个链接。
  • Hover。鼠标指针正悬停在链接上。
  • Active。链接正在被点击（鼠标在元素上按下，还没有释放）。

以下就是这些状态对应的4个伪类选择符（使用了a选择符和一些示例声明）：

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

选择符中与众不同的:（冒号）好像在向我们宣示：“我是一个伪类！”

一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1
和CSS 2的伪元素使用一个冒号，但希望你能习惯于用双冒号代替单冒号，因为这些单冒号的伪元
素最终可能都会被淘汰掉。

b. :focus伪类

 e:focus

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则

input:focus {border:1px solid blue;}

会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

c. :target伪类

e:target

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。

对于下面这个链接

<a href="#more_info">More Information</a>

位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：

<h2 id="more_info">This is the information you are looking for.</h2>

那么，如下CSS规则

#more_info:target {background:#eee;}

d. 结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。

  1. :first-child
  2. :last-child
  3. :nth-child
e:first-child
e:last-child
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。
e:nth-child(n)
e表示元素名，n表示一个数值（也可以使用odd或even）。

4、伪元素

顾名思义，伪元素就是你的文档中若有实无的元素。

a. ::first-letter伪元素

e::first-letter
可以选中文本段落（一般情况下是段落）的首字符

b. ::first-line伪元素

e::first-line
可以选中文本段落（一般情况下是段落）的第一行
注意，::first-line伪元素的长度会随浏览器窗口大小的变化而改变。

c.::before和::after伪元素

e::before
e::after
可用于在特定元素前面或后面添加特殊内容。

d. ::Selection

e::selection
用来改变浏览网页选中文的默认效果

5、继承

CSS中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。然而，也有很多CSS属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距，这些下一章我们才会讲到。

6、层叠

a. 样式来源

以下就是浏览器层叠各个来源样式的顺序：

  • 浏览器默认样式表
  • 用户样式表
  • 作者链接样式表（按照它们链接到页面的先后顺序）
  • 作者嵌入样式
  • 作者行内样式

浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。

b. 层叠规则

层叠规则一：找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时，都会据此查到每一条CSS规则，标识出所有受到影响的HTML元素。

层叠规则二：按照顺序和权重排序。浏览器依次检查5个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值，就用什么值来显示。

层叠规则三：按特指度排序。除了有点拗口之外，特指度（specificity）其实表示一条规则有多明确。如果没有特指度的考量，那为了让恰当的样式起作用，恐怕我们就免不了要频繁变换样式表中规则的顺序了。

下面我们具体讲一讲怎么计算选择符的特指度。首先，有一个简单的记分规则，即对每个选择符都要按
下面的“ICE”公式计算三个值：
I - C - E
ICE并非真正的三位数，只不过大多情况下把结果看成一个三位数没有问题，三位数最大的胜出。
但是，千万得知道0-1-12与0-2-0相比，仍然是0-2-0的特指度更高。

三个字母间的短横线是分隔符，并非减号。针对这个公式的计分办法如下：
选择符中有一个ID，就在I的位置上加1；
选择符中有一个类，就在C的位置上加1；
选择符中有一个元素（标签）名，就在E的位置上加1；
得到一个三位数。

好了，下面通过几个例子来理解特指度。
P                                    0-0-1特指度=1
p.largetext                          0-1-1特指度=11
p#largetext                          1-0-1特指度=101
body p#largetext                     1-0-2特指度=102
body p#largetext ul.mylist           1-1-3特指度=113
body p#largetext ul.mylist li        1-1-4特指度=114
在此，每个选择符都比前一个选择符的特指度更高。

层叠规则四：顺序决定权重。如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出。

如果两条规则都影响某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出。

如果觉得上面的很麻烦，只要记住三条规则就够了。这三条规则适合所有情况。

  • 规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
  • 规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。
  • 规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。

7、规则声明

我们也知道一个声明包含两部分：属性和值。属性指出要影响元素的哪个方面（颜色、高度，等等），而值表示把属性设定为什么（绿色、12px，等等）。CSS属性值主要分以下三类。

  • 文本值。例如，font-weight:bold声明中的bold就一个文本值。文本值也叫做关键字。
  • 数字值。数字值后面都有一个单位，例如英寸或点。在声明font-size:12px中，12是数字值，而px是单位（像素）。如果数字值为0，那么就不用带单位了。
  • 颜色值。颜色值可以用几种不同的格式来写，包括RGB（Red, Green, Blue，红绿蓝）、HSL（Hue, Saturation, Luminance，色相，饱和度，亮度）和十六进制值（例如color:#336699）。