CSS入门指南-1：css工作原理
这是CSS设计指南的读书笔记，用于加深学习效果。
最近想做一个小程序，前端是必修课，那就从css开始吧。
css 工作原理
每个html元素都有一组样式属性，可以通过css来设定。当html元素的同一个样式属性有多种样式值的时候，css就要靠层叠机智来决定最终应用哪种样式。
HUGOMORE42
css规则
规则实际上是一条完整的css指令，规则声明了要修改的元素和要应用给改元素的样式。
为文档添加样式的三种方法：
- 写在元素标签里（也叫行内样式，只能影响它所在的标签，会覆盖嵌入样式和链接样式）
- 写在<style> 标签里（也就嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式，但会被行内样式覆盖）
- 写在单独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;}选择特定元素的选择符
用于选择特定元素的操作符有三种
- 上下文选择符。基于祖先或者同胞元素选择一个元素。
- ID和类选择符。基于id和class属性的值选择元素。
- 属性选择符。基于属性的有无和特征选择元素。
上下文选择符
比如我们想给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"。
伪类
伪类分两种：
- UI伪类会在HTML元素处于某个状态时，为该元素应用CSS样式。
- 结构化伪类会在标记中存在某种结构上的关系时，为相应元素应用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;}那么文档的所有元素都将继承这个样式。
层叠
层叠，是样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值得多个来源，确定最终使用哪个值。
样式来源
以下是浏览器层叠各个来源样式的顺序：
- 浏览器默认的样式表
- 用户的样式表
- 作者链接样式表（按照它们链接到页面的先后顺序）
- 作者嵌入样式
- 作者行内样式
浏览器会按上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每个标签属性值得设定。整个检查更新过程结束后，再将每个标签已最终设定的样式显示出来。
比如，如果作者链接样式表将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记分规则如下：
- 选择符中有一个ID，在I的位置上加1；
- 选择符中有一个类，在C的位置上加1；
- 选择符中有一个元素，在E的位置上加1；
- 得到一个三位数。
好了，我们来看一个例子：
选择符 | 特指度 |
|---|---|
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 |
简化版层叠规则
- 包含ID的选择符胜过包含类的选择符，包含类的胜过包含标签的选择符。
- 如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接样式表中，具有相同特指度的样式，后声明的优先。
- 规则一胜过规则二。
- 设定的样式胜过继承的样式。
这一篇我们主要介绍了CSS规则，以及如何用它来为HTML应用样式。
最后，感谢女朋友支持。