CSS工作原理

摘要：元素显示元素块级元素相互堆叠在一起沿页面向下排列，每个元素分别占一行。行内元素盒子会收缩包裹其内容，并且会尽可能包紧。命名惯例规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成属性和值。

文档流，就是HTML元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。

块级元素
相互堆叠在一起沿页面向下排列，每个元素分别占一行。块级元素盒子会扩展到与父元素同宽，所有块级元素的父元素都是body，而它的宽度默认与浏览器的窗口一样宽（当然有少量边距）。

行内元素
相互并列，只有在空间不足以并列的情况下才会折到下一行显示。行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。

可替换元素
可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素一般有内在尺寸，所以具有widht和height，可以设定。

比如：，没有指定img的width和height，就按照内在尺寸显示，也可以通过设置width和height来显示图片。

不可替换元素
大多数元素是不可替换元素，即其内容直接表现给浏览器。

行内样式
行内样式是写在html标签上的style，比如：

inline css styling

嵌入样式
嵌入的css样式是防在html文档的head元素中，比如：

链接样式
将样式表文件引到当前文档中，比如：

样式表中链接其他样式
@import url(css/style2.css)
@import指令必须出现在样式表中其他样式之前，否则@import引用的样式表不会被加载。

CSS规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性和值。属性指出要影响元素哪方面的样式，值就是属性的一个新状态。

p {color: red;}
p：选择符
{color: red;}：声明
color：属性
red：值

对这个基本结构，有三种方法进行扩展：

多个声明包含在一条规则里

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

多个选择符组合在一起

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

多条规则应用给一个选择符

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

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

article p {font-size: 14px;}
只有article后代的p元素才会应用后面的样式。

* *特殊的上下文选择符*
    * 子选择符 >  
    标签1 > 标签2，标签2必须是标签1的子元素。 section > h2 {font-weight: bold;}
    * 紧邻同胞选择符 +  
    标签1 + 标签2，标签2必须紧跟在其同胞标签1的后面。 h2 + p {font-size: 14px;}
    * 一般同胞选择符 ~  
    标签1 ~ 标签2，标签2必须跟（不一定紧跟）在其同胞标签1后面。 h2 ~ a {color: red;}
    * 通用选择符 *  
    匹配任何一个元素。 * {margin: 0; padding: 0;}

ID和类选择符
同一个页面中的每一个id属性都必须只能用一次。

同一个页面中相同的类可以有多个，类的目的是为了标识一组具有相同特征的元素。

#nav {
    width: 100%;
}
.logo {
    width: 80px;
    height: 80px;
}

属性选择符

属性名选择符
标签名[属性名]

选择任何带有属性名的标签名。img[title] {border: 1px solid green;}

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

选择任何带有值为属性值的属性名的标签名。img[title="flower"] {border: 1px solid red;}
在html5中属性值的引号可加可不加

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

UI伪类
UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时，为该元素应用CSS样式。

链接伪类

链接还未点击

visited 链接已经点击过
hover 鼠标悬停在链接上
active 链接正在被点击

a:link {color: red;}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: yellow;}

:focus伪类
表单中的文本字段获取焦点时

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

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

例如：用户点击链接转向ID为more的元素时，为该元素添加红色背景。

more information
This is the information

#more:target {background: red;}

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

:first-child 和 :last-child
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。

:nth-child
:nth-child(n)， n代表一个数值，一组同胞元素中第n个元素。

伪元素就是你的文档中若有实无的元素。

::first-letter
选中首字母

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

::first-line
可以选中文本段落（一般情况下是段落）的第一行

p::first-line {font-variant: small-caps;}

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

18

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

搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。

CSS中的元素会继承其祖先元素中一部分CSS属性的值。
字体和文本样式是可以继承的。

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

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

浏览器默认样式表

用户样式表

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

作者嵌入样式

作者行内样式

层叠规则：

层叠规则一：找到应用给每个元素和属性的所有声明。
层叠规则二：按照顺序和权重排序。
层叠规则三：按特指度排序。

标记规则：
优先级顺序：ID、类、元素（标签）名
比如：
div .nav             特指度：0 1 1
div ul.nav .item    特指度：0 2 2
#nav li.item         特指度：1 1 1
div#nav li.item     特指度：1 1 2
比较时从特指度高向特指度低方向比较

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

文本值
所有CSS的属性都有文本值。如：visibility属性有visible和hidden值。

数字值
数字值用于描述元素的各种长度。数字值主要分两类：绝对值和相对值。

颜色值

1. 颜色名，如red
2. 十六进制颜色（#RRGGBB或#RGB），如#ff803a
3. RGB颜色值（R， G， B），如rgb(255, 255, 255)
4. RGB百分比值（R%，G％，B％），如100%, 0%, 0%
5. HSL（色相，饱和度%，亮度%），如HSL(0, 0%, 0%)
6. Alpha通道，1表示完全不透明，0表示完全透明