CSS 入门指南：（1）工作原理

css 工作原理

每个html元素都有一组样式属性，可以通过css来设定。当html元素的同一个样式属性有多种样式值的时候，css就要靠层叠机智来决定最终应用哪种样式。

css规则

规则实际上是一条完整的css指令，规则声明了要修改的元素和要应用给改元素的样式。

为文档添加样式的三种方法：

1. 写在元素标签里（也叫行内样式，只能影响它所在的标签，会覆盖嵌入样式和链接样式）

2. 写在<style> 标签里（也就嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖）

3. 写在单独css样式表中（也叫链接样式，样式表是一个扩展名为.css 的文件，可以在任意多个HTML页面链接同一个样式表文件。链接样式的作用范围是整个网站）

除了这三种为页面添加样式的方法，还有一种在样式表中链接其他样式表的方法，使用@import 指令：例如

@import url(css/styles.css)

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

对这个基本的结构有三种方法可以进行扩展

第一种方法：多个声明包含在一条规则里。

p {color: red; font-size: 12px; font-weight: bold;}

第二种方法：多个选择器组合在一起。例如：如果想让<h1>、<h2>和<h3>的文本都变成蓝色粗体可以这么写：

h1 {color: blue; font-weight: bold;}
h2 {color: blue; font-weight: bold;}
h3 {color: blue; font-weight: bold;}

也可以这么写：

h1, h2, h3 {color: blue; font-weight: bold;}

分组选择符以逗号作为分隔符

第三种方法： 多条规则应用给一个选择符。
例如，写完上边的规则，还想把h3变成斜体，那么可以再为h3单独写一条规则：

h1, h2, h3 {color: blue; font-weight: bold;}
h3 {font-style: italic;}

选择特定元素的选择符

用于选择特定元素的操作符有三种

1. 上下文选择符。基于祖先或者同胞元素选择一个元素。

2. ID和类选择符。基于id和class属性的值选择元素。

3. 属性选择符。基于属性的有无和特征选择元素。

上下文选择符

比如我们想给article中的段落设置不同的字号，可以使用上下文选择符来解决。

上下文选择符的格式如下：

标签1 标签2 {声明}

其中标签2 是我们要选择的目标，而且只有在 标签1是其祖先元素的情况下才会被选中。

上下文选择符，叫后代组合式选择符，就是一组以空格分隔的标签名。用于选择作为特定祖先元素后代的标签。

article p {font-weight: bold;}

上边例子中，只有article后代的p元素才会应用后边的样式。

上下文选择符以空格作为分隔符

特殊的上下文选择符

• 子选择符 >

格式如下：

标签1 > 标签2

标签1 必须是 标签2 的父元素，不能是其它的祖先元素。

section > h2 {font-style: italic;}

• 紧邻同胞选择符+

格式如下：

标签1 + 标签2

标签2 必须紧跟在期同胞标签1后面。

h2 + p {font-variant: small-caps;}

标签 h2 和 p 为同一级标签，且标签p和 h2 相邻。(只应用到p标签）

• 一般同胞选择符 ~

格式如下：

标签1 ~ 标签2

标签2 必须跟在其 同胞标签1 后面（可以不相邻）。

h2 ~ a {color: red;}

标签a 和 标签h2 同一级，且a标签在h2 标签之后。（只应用与a标签）

• 通用选择符 *

通用选择符 * 是一个通配符，它匹配任何元素。

* {color: green;}

这条规则会将所有元素（文本和边框）都变成绿色。

p * {color: red;}

这条规则会把p包含的所有元素的文本都变成红色。

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

所有section标签的 非子标签（*是所有的子标签）的a标签字体设置为 1.3 em;

ID和类选择符

使用ID和类选择符，首先要在HTML标记中为元素添加id和class属性。

可以给id和class属性设定任意值，但不能以数字或特殊符号开头

类属性

给标签h1添加 specialtext 类。

<h1 class="specialtext">This is text</h1>

• 类选择符

格式为：

.类名

类选择符使用点(.)，紧跟类名。

• 标签带类选择符

格式为：

标签1.类名

比如：

p.specialtext {color: red;}

只对有 specialtext 类的p标签有效。

• 多类选择符

可以给元素添加多个类：

<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属性与类写法类似，用#表示。

<p id="specialtext">This is text</p>

上边p标签就设置了ID属性specialtext。

相应的ID选择符就这样写：

#specialtext {css样式}

选择元素方式其余和class 一致。

ID属性和类属性的区别

• ID可以用于页面导航链接中。
  例如：

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

用户点击这个链接会滚到ID值为bio的位置。如果href属性里只有一个#，那么点击链接会跳到顶部。

• ID值需要时独一无二的。

• 类的目的是为了标识一组具有相同特征的元素，以便我们为这些元素应用相同的css样式。

属性选择符

属性名选择符

格式如下：

标签名[属性名]

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

比如：

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

这个规则会选择带有title属性的HTML img元素，title是什么值都可以。

属性值选择符

格式如下：

标签名[属性名="属性值"]（在html5中，属性值得引号可不加)

例如：

img[title="red flower"] {border: 2px solid blue;}

这个规则会选择带有title属性的HTML img元素，且title值为"red flower"。

伪类

伪类分两种：

1. UI伪类会在HTML元素处于某个状态时，为该元素应用CSS样式。

2. 结构化伪类会在标记中存在某种结构上的关系时，为相应元素应用CSS样式。

伪类使用:(冒号)作为选择符。
两个冒号(::)表示新增的伪元素。

UI伪类

UI伪类会基于特定的HTML元素的状态应用样式。

链接伪类

针对链接的伪类有4个：

• Link。 此时，链接为被点击

• Visited。用户点击过链接之后

• Hover。鼠标悬停在链接上

• Active。链接正在被点击

使用方式举例：

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

hover伪类可以应用在任何元素。

p:hover {background-color: gray;}

:focus 伪类

可以应用于任何元素。

点击时会或得焦点。

:target 伪类

可以应用于任何元素。
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target 选中。

比如：

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

应用上伪类后，ID为more_info的元素就是目标。点击a标签时，会应用css样式。

css规则如下：

#more_info:target {background: #eee;}

结构化伪类

:first-child和:last-child

• :first-child 代表一组同胞元素的第一个元素

• :last-child 代表一组同胞元素的最后一个元素

:nth-child

规则如下：

e:nth-child(n)

e表示元素名，n表示一个数值。

比如：

li:nth-child(3)

会选中一组列表的每个第三项。

伪元素

伪元素是文档中若有实无的元素。
常用的伪类如下：

::first-letter

选择首字母，使用规则：

e::first-letter

比如

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

会让首字母变大。

::first-line

选择段落的第一行。

e::first-line

::before和::after

使用规则如下：

e::before
e::after

可用于在特定的元素前面或者后面添加特殊内容。

以上CSS选择符已经介绍完了，接下来讨论在一个大的样式表中，规则选择的问题。

CSS提供了三种机制来决定那条规则会胜出：

• 继承

• 层叠

• 特指

继承

CSS属性的值会向下传递。
比如我们添加一条这样的规则：

body: {font-family: arial;}

那么文档的所有元素都将继承这个样式。

层叠

层叠，是样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值得多个来源，确定最终使用哪个值。

样式来源

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

1. 浏览器默认的样式表

2. 用户的样式表

3. 作者链接样式表（按照它们链接到页面的先后顺序）

4. 作者嵌入样式

5. 作者行内样式

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

比如，如果作者链接样式表将p的字体设定为Helvetica，而页面中有一条嵌入规则以相同的选择符吧字体设定为Verdana，那么段落文本最终会以Verdana字体显示。因为浏览器是在读取链接样式表之后读取嵌入样式。

层叠规则

层叠规则一：找到应用给每个元素和属性的所有声明。

层叠规则二：按照顺序和权重排序。浏览器一次检查5个来源，并设定匹配的属性，如果匹配的属性在下一个来源有定义，则更新改属性值。

声明也可以加权重。比如：

p {color: green !important; font-size: 12pt;}

空格!important分号(;) 用于加重声明的权重。

这条规则加重了将文本设置为绿色的权重。所以就算层叠的下一来源给段落设定了其他颜色，最终的颜色仍然还是绿色。

层叠规则三：按特指度排序。特指度是表示一条规则有多明确。

比如某个样式表中包含如下规则：

p {font-size: 12px;}
p.largetext {font-size: 16px;}

<p class="largetext">A bit of text</p>

那么上边的p标签将显示16px 文本，因为第二条规则的选择符既包含标签名，又包含类名（特指度高）。

如果是下边的样式：

p {font-size: 12px;}
.largetext {font-size: 16px;}

<p class="largetext">A bit of text</p>

还是会显示16px像素，因为类的特指度高。

层叠规则四 顺序决定权重。如果两条规则都影响某一元素的属性，特指度也相同，后出现的胜出。

计算特指度

计算特指度有一个记分规则，被称为“ICE”公式：

I-C-E

I(ID)C(Class)E(Element)并非真正的三个数，但是 0-1-12比0-2-0 小。

ICE记分规则如下：

1. 选择符中有一个ID，在I的位置上加1；

2. 选择符中有一个类，在C的位置上加1；

3. 选择符中有一个元素，在E的位置上加1；

4. 得到一个三位数。

好了，我们来看一个例子：

选择符	特指度
p	0-0-1
p.largetext	0-1-1
p#largetext	1-0-1
body p#largetext	1-0-2
body p#largetext ul.mylist	1-1-3
body p#largetext ul.mylist li	1-1-4

简化版层叠规则

1. 包含ID的选择符胜过包含类的选择符，包含类的胜过包含标签的选择符。

2. 如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接样式表中，具有相同特指度的样式，后声明的优先。

3. 规则一胜过规则二。

4. 设定的样式胜过继承的样式。

这一篇我们主要介绍了CSS规则，以及如何用它来为HTML应用样式。
期待下一篇吧，不知道在什么时候。

>欢迎关注	>请我喝芬达