文档流
文档流，就是HTML元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。
元素
显示元素
块级元素
相互堆叠在一起沿页面向下排列，每个元素分别占一行。块级元素盒子会扩展到与父元素同宽，所有块级元素的父元素都是body，而它的宽度默认与浏览器的窗口一样宽（当然有少量边距）。行内元素
相互并列，只有在空间不足以并列的情况下才会折到下一行显示。行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。
可替换元素和不可替换元素
可替换元素
可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素一般有内在尺寸，所以具有widht和height，可以设定。
比如：，没有指定img的width和height，就按照内在尺寸显示，也可以通过设置width和height来显示图片。不可替换元素
大多数元素是不可替换元素，即其内容直接表现给浏览器。
文档添加样式的三种方法
- 行内样式
行内样式是写在html标签上的style，比如：
<div style="font-size: 12px; color: red;">inline css styling</div>
- 嵌入样式
嵌入的css样式是防在html文档的head元素中，比如：
<head>
<style type="text/css">
div {
font-size: 12px;
color: red;
}
</style>
</head>
- 链接样式
将样式表文件引到当前文档中，比如：
<link rel="stylesheet" type="text/css" href="style.css">
样式表中链接其他样式
@import url(css/style2.css)
@import指令必须出现在样式表中其他样式之前，否则@import引用的样式表不会被加载。
CSS命名惯例
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属性都必须只能用一次。
同一个页面中相同的类可以有多个，类的目的是为了标识一组具有相同特征的元素。
<div id="nav" class="logo "></div>
#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样式。- 链接伪类
link 链接还未点击
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的元素时，为该元素添加红色背景。
<a href="#more">more information</a> <p id="more">This is the information</p>#more:target {background: red;} - 链接伪类
-
结构化伪类
结构化伪类会在标记中存在某种结构上的关系时，为相应元素应用CSS样式。- :first-child 和 :last-child
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。 - :nth-child
:nth-child(n)， n代表一个数值，一组同胞元素中第n个元素。
- :first-child 和 :last-child
伪元素
伪元素就是你的文档中若有实无的元素。
- ::first-letter
选中首字母
p::first-letter {font-size: 300%;}
- ::first-line
可以选中文本段落（一般情况下是段落）的第一行
p::first-line {font-variant: small-caps;}
- ::before 和 ::after伪元素
可用于在特定元素前面和后面添加特殊内容。
<p class="age">18</p>
.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值。
数字值
数字值用于描述元素的各种长度。数字值主要分两类：绝对值和相对值。
| 绝对值 | 单位缩写 |
|---|---|
| 英寸 | in |
| 厘米 | cm |
| 毫米 | mm |
| 点 | pt |
| 皮卡 | pc |
| 像素 | px |
| 相对值 | 单位缩写 |
|---|---|
| Em | em |
| Ex | ex |
| 百分比 | % |
颜色值
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表示完全透明
