CSS设计指南（工作原理）

《CSS设计指南（第3版）》的笔记整理。

【HTML基础】
非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于，闭合标
签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容
的引用。浏览器会在HTML 页面加载的时候，额外向服务器发送请求，以取得自闭
合标签引用的内容。
按照HTML5语法编写的最简单的HTML页面的模板可以写成这样：

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <title>An HTML Template</title>
    </head>
    <body>
      <!-- 这里是网页内容 -->
    </body>
</html>

块级元素盒子会扩展到与父元素同宽
在我们这个页面中，所有块级元素的父元素都是body，而它的宽度默认与浏览器窗
口一样宽（当然有少量边距）。因此，所有块级元素就与浏览器窗口一样宽了。说到
这，相信你就能理解为什么块级元素始终会占一行了。对了，就是因为它们始终会
保持与浏览器窗口同宽。这样一来，一个块级元素旁边也就没有空间容纳另一个块
级元素了。

行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧

HTML实体
HTML 实体常用于生成那些键盘上没有的印刷字符，比如TM、† 、©，等等。HTML 实体以一个和号（&）开头，一个分号（;）结尾，二者之间是表示实体的字符串。在前面的例子中，两个实体的名字分别是“left-double-quote”（左双引号“）和“right-double-quote”（右双引号”）的简写。
Peachpit 另一位作者Elizabeth Castro（她的书非常赞，在此强烈向大家推荐）在自己的一个网页中列出了常用的HTML 实体：。http://www.elizabethcastro.com/html/extras/entities.html
要注意的是，由于和号表示实体开头，所以在要显示和号的时候不能直接写和号，而要在HTML
标签包含的文本中使用& 实体，这样才能显示出&来。比如，写成Johnson & Johnson，
才会显示成：Johnson & Johnson。

【剖析CSS规则】
规则实际上就是一条完整的CSS 指令。规则声明了要修改的元素和要应用给该元素
的样式。
下面就是一条CSS 规则，它可以把段落的文本设置为红色。

p {color:red;}

为文档添加样式的三种方法
有三种方法可以把CSS 添加到网页中，分别是写在元素标签里（也叫行内样式）、写在<style>标签里（也叫嵌入样式）和写在单独的CSS 样式表中（也叫链接样式）。
1、行内样式
行内样式的作用范围非常有限。行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。
2、嵌入样式
嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖。
3、链接样式
链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到每个页面，相应的页面就可以使用其中的样式。随后，只要修改了样式表中的样式，改动就会在所有被选中的元素上体现出来，无论这个元素在哪个页面里。这样，既可以做到全站页面外观统一，又便于整站样式更新。

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

@import url(css/styles2.css)

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

【CSS规则命名惯例】
所有用于选择特定元素的选择符又分三种：

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

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

2、紧邻同胞选择符+
标签1 + 标签2
标签2 必须紧跟在其同胞标签1 的后面。

3、一般同胞选择符~
标签1 ~ 标签2
标签2 必须跟（不一定紧跟）在其同胞标签1 后面。

4、通用选择符*
通用选择符*（常被称为星号选择符）是一个通配符，它匹配任何元素，因此下面这
条规则

p * {color:red;}

这样只会把p包含的所有元素的文本变成红色。
这个选择符有一个非常有意思的用法，即用它构成非子选择符，比如：

section * a {font-size:1.3em;}

任何是section 孙子元素，而非子元素的a 标签都会被选中。至于a的父元素是什么，没有关系。就是说，选中的不是section的子元素a标签，而是孙子元素a标签。

类属性
1、标签带类选择符
如果你只想瞄准带有这个类的段落，可以把标签名和类选择符写在一块，比如：第三条CSS 规则只选择带specialtext 类的段落。

p {font-family:helvetica, sans-serif; font-size:1.2em;}
.specialtext {font-style:italic;}
p.specialtext {color:red;}

2、多类选择符
可以给元素添加多个类，比如：

<p class="specialtext featured">Here the span tag <span>may or may not</span>
be styled.</p>

要选择同时存在这两个类名的元素，可以这样写：

.specialtext.featured {font-size:120%;}

注意，CSS 选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类
名的那个元素。如果你加了空格，那就变成了“祖先/后代”关系的上下文选择符了。

用于页内导航的ID
ID 也可以用在页内导航链接中。下面就是一个链接，其目标是同一页的另一个位置。

<a href="#bio">Biography</a>

看到href 属性值开头的#了吗？它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有#，浏览器就会尝试加载bio 目录下的默认页面了）。
使用与CSS 选择符里相同的 #ID 名语法，可以把链接导航到同一页面中的目标ID。在这个页面的下方，应该有对应的目标元素。

<h3 id="bio">Biography</h3>
<p>I was born when I was very young…</p>

同样要注意，作为目标的ID 值前面是没有#的，就是一个普通的ID 值。
用户单击前面的链接时，页面会向下滚动到ID 值为bio 的h3 元素的位置。如果链接的href属性里只有一个#，那么点击该链接会返回页面顶部。

<a href="#">Back to Top</a>

换句话说，要写一个“返回顶部”链接，根本不需要ID 为#的目标元素。
另外，如果你暂时不知道某个href 应该放什么URL，也可以用#作为占位符，但不能把该属性留空。因为href 属性值为空的链接的行为跟正常链接不一样。这样，团队中的其他人将来可以用中间层（比如PHP）变量替换#，以便动态接收来自数据库的URL。

属性选择符
1、属性名选择符
标签名[属性名]
选择任何带有属性名的标签名。
比如，下面的CSS

img[title] {border:2px solid blue;}

会导致像下面这个带有title 属性的HTML img 元素显示2 像素宽的蓝色边框，至于
title 属性有什么值，无关紧要，只要有这个属性在就行啦。
什么情况下会用到这个属性选择符呢？比如，可以在用户鼠标移动到这些图片上时，
此时浏览器会显示一个（利用title 属性中的文本生成的）提示条。一般来说，人
们经常给alt 和title 属性设定相同的值。alt 属性中的文本会在图片因故未能加载
时显示，或者由屏幕阅读器朗读出来。而title 属性会在用户鼠标移动到图片上时，
显示一个包含相应文本的提示。

2、属性值选择符
标签名[属性名="属性值"]

在HTML5 中，属性值的引号可加可不加，在此为了清楚起见，我们加了。

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

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

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

[UI伪类]
1、链接伪类
针对链接的伪类一共有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;}

由于这4 个伪类的特指度（本章后面再讨论特指度）相同，如果不按照这里列出
的顺序使用它们，浏览器可能不会显示预期结果。为了好记，我建议大家可以这
么想：“LoVe? HA!”大写字母就是每个伪类的头一个字母。
一个冒号（:）表示伪类，两个冒号（::）表示CSS3 新增的伪元素。尽管浏览器目
前都支持对CSS 1 和CSS 2 的伪元素使用一个冒号，但希望你能习惯于用双冒号代
替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉

2、:focus伪类
e:focus

在这个以及后续的例子中，e 表示任何元素，如p、h1、section，等等。

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

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

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

3、 :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;}

会在用户单击链接转向ID 为more_info 的元素时，为该元素添加浅灰色背景。

[结构化伪类]
1、:first-child 和:last-child
e:first-child
e:last-child
:first-child 代表一组同胞元素中的第一个元素，而:last-child 则代表最后一个。

2、:nth-child
e:nth-child(n)

e 表示元素名，n 表示一个数值（也可以使用odd 或even）

伪元素
顾名思义，伪元素就是你的文档中若有实无的元素。
1、::first-letter 伪元素
e::first-letter
比如，以下CSS 规则：段落首字符放大的效果。

p::first-letter {font-size:300%;}

如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上<span>标签，
然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。

2、::first-line 伪元素
e::first-line
可以选中文本段落（一般情况下是段落）的第一行

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

<p class="age">25</p>

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
//Age: 25 years.

注意，每个content 属性值中都包含了空格，以便输出结果中有适当的空距。
搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪
元素添加你想让搜索引擎索引的重要内容。

继承
CSS 中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。然而，也有很多CSS 属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距。
由于字体和文本样式是可以继承的，所以在使用相对字体单位（如百分比和em）时
要格外小心。如果某个标签的字体大小被设置为80%，而它的一个后代的字体大小
也被设置为80%，那么该后代中文本最终的字体大小将是64%（80%的80%）。这有时候可能并不是你想要的结果。

层叠
层叠，就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。
层叠是CSS 的核心机制，理解了它才能以最经济的方式写出最容易改动的CSS，让
文档外观在达到设计要求的同时，也给用户留下一些空间，让他们能根据需要更改
文档的显示效果（比如整体调整字号）。

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

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

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

2、层叠规则
层叠规则一：找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时，
都会据此查到每一条CSS 规则，标识出所有受到影响的HTML 元素。
层叠规则二：按照顺序和权重排序。浏览器依次检查5 个来源，并设定匹配的属性。
如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查
完页面中所有标签受影响属性的全部5 个来源为止。最终某个属性被设定成什么值，
就用什么值来显示。
层叠规则三：按特指度排序。特指度（specificity）其实表示一条规则有多明确。如果没有特指度的考量，那为了让恰当的样式起作用，恐怕我们就免不了要频繁变换样式表中规则的顺序了。

p {font-size:12px;}
p.largetext {font-size:16px;}
<p class="largetext">A bit of text</p>

将显示16 像素高的文本，因为第二条规则的选择符既包含标签名，也包含类名，所
以意义更明确（特指度更高），结果第二条规则会覆盖第一条规则中的同名属性。

计算特指度
下面我们具体讲一讲怎么计算选择符的特指度。首先，有一个简单的记分规则，即
对每个选择符都要按“ICE”公式计算三个值：I - C - E。

ICE 并非真正的三位数，只不过大多情况下把结果看成一个三位数没有问题，三位数最大的胜出。但是，千万得知道0-1-12 与0-2-0 相比，仍然是0-2-0 的特指度更高。

三个字母间的短横线是分隔符，并非减号。针对这个公式的计分办法如下：
(1). 选择符中有一个ID，就在I 的位置上加1；
(2). 选择符中有一个类，就在C 的位置上加1；
(3). 选择符中有一个元素（标签）名，就在E 的位置上加1；
(4). 得到一个三位数。
好了，下面通过几个例子来理解特指度。

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 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。
规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会胜出。
规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。

规则声明
CSS 属性值主要分以下三类：文本值，数字值，颜色值。

1、文本值
所有CSS 属性都有文本值。

2、数字值
数字值用于描述元素的各种长度（在CSS 里，“长度”的含义比较广，还包括高度、
宽度、粗细，等等）。数字值主要分两类：绝对值和相对值。
绝对值描述的是一个真实的长度（比如，6 英寸），而相对值则是相对于其他基准的描述（比如“是某某的两倍长”）。

绝对值	单位	缩写示例
英寸	in	height:6in
厘米	cm	height:40cm
毫米	mm	height:500mm
点	pt	height:60pt
皮卡	pc	height:90pc
像素	px	height:72px

相对值	单位	缩写示例
Em	em	height:1.2em
Ex	ex	height:6ex
百分比	%	height:120%

em 和ex 都是字体大小的单位，但在CSS 中，它们作为长度单位适用于任何元素。
先说说em ，它表示一种字体中字母M的宽度，因此它的具体大小取决于你使用的字
体。而ex 呢，等于给定字体中字母x 的高度（小写字母x 代表一种字体的字母中间部分的高度，不包括字母上、下突出的部分——如d 和p 上下都出头儿）。百分比非常适合设定被包含元素的宽度，此时的百分比就是相对于宽度而言的。

3、颜色值
（1）RGB 颜色值（R, G , B）
每种颜色都可以用一个0 到255（包含）之间的值指定。格式如下：
rgb(r, g, b)
比如，rgb(0,255,0)表示纯绿色。

（2）RGB 百分比值（R%, G%, B%）
这是用百分比来表示每种颜色值的一种方法，格式如下：
r%, g%, b%
可以接受的值是0%到100%。虽然以这种方法只能表示区区一百万（100 × 100 ×
100）种颜色，但对我们绝大数人来说，也已经足够了。同样，使用百分比表示的颜色值，比使用十六进制更容易猜到你想要的颜色。
举个例子，100%, 0%, 0%是纯红色，0%, 100%, 0%是纯绿色，而46%, 76%, 80%接近
前面用十六进制值作例子分析的深蓝绿色。

（3）HSL (色相, 饱和度%, 亮度%)
HSL 格式如下：
HSL(0,0%,0%)
HSL 比我们见过的各种RGB 方式更直观，因为使用它更容易写出和看懂颜色。
HSL 颜色中的第一个值表示色相，也就是一个实际的颜色，比如红色和绿色。所有
颜色围绕色相环（也叫色轮）一周，而色相值以圆周上的度数表示。
红色是0 或360，青色是与之相对的180。以下是彩虹七色在色轮中大致的色相值。

红：0
橙：35
黄：60
绿：125
蓝：230
靛：280
紫：305

至于饱和度和亮度，相对就容易理解多了。饱和度设定有多少颜色，灰色的饱和度
低，而强烈的色彩饱和度高。亮度设定颜色的明暗，0%就是黑色，100%就是白色，而中间的值是实际能看到的色相。
如果把上面七彩虹的色相值都记住，或者就放在手边，那么你会发现想写出什么颜
色都不在话下。RGB 和十六进制颜色值，都要求你事先在大脑里先混合颜色，而HSL则只有一个表示颜色的值。从把饱和度和亮度都设定为50%，就可以轻松调制出你想要的任何颜色来。

（4）Alpha 通道
RGB 和HSL 都支持Alpha 通道，用于设置颜色的不透明度（换句话说，就
是能够透过多少背景）。相应的格式分别叫RGBA 和HSLA。其中，两种格式中的A
（alpha）值可以是1（完全不透明）也可以是0（完全透明），或者介于1 和0 之间的小数值。