CSS, Cascading Style Sheets 层叠样式表，用于协助 HTML 排版布局。
使用
使用 CSS 的方法有三种：
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
当样式较为复杂或复用性较强时，外部样式表是很好的选择，你可以在一个文件中定义整个站点的样式，每个 HTML 文件使用 link 标签链接到样式表，如：
<link rel="stylesheet" type="text/css" href="mystyle.css">
通常，这条语句存在于 head 标签中。
内部样式表
当一些样式只会被应用在单个文件时，可以考虑使用内部样式表。如：
<head>
<style>
p {
text-indent: 2rem;
}
body {
background-image: url("images/back40.gif");
}
</style>
</head>
内部样式定义在 head 中的 style 标签内。
内联样式
当一些样式只被某个元素需要时，可以考虑使用内联样式。如：
<p class="red" style="color: red;">This is a subtitle.</p>
<p class="orange bold" style="background-color: orange; font-weight: bold;">This is a small title with multiple class.</p>
<p class="red orange bold large" style="color: red; background-color: orange; font-weight: bold; font-size: x-large;">Class selector can apply on more than one element.</p>
通常情况下，我们应当避免内联样式。
语法
CSS 主要由两部分构成：选择器 与 声明。
图片来源：RUNNOOB
选择器
选择器表明了声明规则应该应用于何处，如：
h1 {
font-size: large;
}
这条语句表明了 large 字体应当应用于所有 h1 标签。
.header {
color: red;
}
这条语句表明了所有带有 header 类的元素都应是红色字体。
稍后我们会讲到这些选择器的区别。
ID 选择器
在 HTML 中，我们使用 id 属性 (attr) 来表示 ID；
而在 CSS 中，我们使用 # 来表示 ID。如：
#title-1 {
font-size: 2rem;
}
这条 CSS 语句所声明的规则会应用在 ID 为 title-1 的 HTML 元素上，如：
<h1 id="title-1">Maybe there is a title</h1>
预览：
Maybe there is a title
Class 选择器
在 HTML 中，我们使用 class 属性 (attr) 来表示类；
而在 CSS 中，我们使用 . 来表示 Class。如：
.red {
color: red;
}
.orange {
background-color: orange;
}
.bold {
font-wight: bold;
}
.large {
font-size: x-large;
}
这条语句所声明的规则会应用在 Class 为 title 的 HTML 元素上，如：
<p class="red">This is a subtitle.</p>
<p class="orange bold">This is a small title with multiple class.</p>
<p class="red orange bold large">Class selector can apply on more than one element.</p>
<p>Unless it doesn't have this attribute.</p>
预览：
This is a subtitle.
This is a small title with multiple class.
Class selector can apply on more than one element.
Unless it doesn't have this attribute.
Attr 选择器
有时，我们需要将样式应用在含有某个属性 (attr) 的元素上，如：
<p>Either this one.</p>
<p data-attr="true">This one with 'data-attr' attribute and its value is 'true'.</p>
<p data-attr="false">Nor this one.</p>
这时，我们可以使用 attr 选择器：
[data-attr=true] {
color: red;
}
也可以通过 attr() 方法动态获取属性值来应用，可以参考 Mozilla Developer 中的解释。内容不属于常用，不再赘述。
组合选择器
后代选择器
后代选择器用于选择某元素的后代元素，如选择所有包含在 div 元素中的 p 元素：
div p {
color: red;
}
子元素选择器
子元素选择器只能选择某元素的直接子元素，如：
div > p {
color: red;
}
<div>
<p>This is inside element.</p>
<div>
<p>But this is not.</p>
</div>
</div>
<p>But this is not.</p>
预览：
This is inside element.
But this is not.
But this is not.
相邻兄弟选择器
相邻兄弟选择器可选择紧随其后且父级相同的元素，如：
div + p {
color: red;
}
<div>
<p>Not me.</p>
</div>
<p>I'm red.</p>
预览：
Not me.
I'm red.
后续兄弟选择器
后续兄弟选择器类似于相邻选择器，但是会选取所有与指定元素同级且之后的元素，如：
div ~ p {
color: red;
}
<div>
<p>Not me.</p>
</div>
<p>I'm red.</p>
<p>I'm red, too.</p>
<p>Also me.</p>
预览：
Not me.
I'm red.
I'm red, too.
Also me.
伪类选择器
伪类选择器使用 : 来声明，如：
div:hover {
background-color: red;
}
这条语句表明了当鼠标悬浮在 div 元素上时，div 的背景颜色变为红色。
:first-child
选择第一个符合选择器规则的元素，如：
p:first-child {
color: red;
}
<p>I'm red.</p>
<p>Not me.</p>
预览：
I'm red.
Not me.
:hover
当鼠标悬浮在该元素上时处于该状态。
::before & ::after
配合 content 属性 (prop) 来为元素之前或之后添加内容，如：
p::before {
content: "BEFORE";
font-size: x-large;
}
p::after {
content: "AFTER";
background-color: red;
}
布局
display: none
隐藏元素，不在 DOM 中渲染。
display: inline
将其显示为内联元素（不换行，一行展示）。
display: block
将其展示为块元素（换行，一个元素一行）。
display: flex
Flex 弹性布局，重点，可参考 阮一峰老师的教程 。
定位
Position 定位属性指定了元素的定位类型，有如下五个值：
- static
- relative
- fixed
- absolute
- sticky
position: static
默认值，遵循正常的文档流，不会受到 top, bottom, left 或 right 影响。
position: fixed
相对于浏览器窗口固定，不随窗口滚动而移动。
常用于提示框、弹出层等非文档内容。
position: relative
相对其默认位置的定位，可以搭配 top 等属性。
position: absolute
相对于其直接父级定位，与文档流无关，所以不会占据空间，也可以与其他元素重叠。
position: sticky
这是一个特殊的定位方式，有两种体现形式：
默认情况下，它的表现与 position: relative 相同；
当页面滚动超出目标区域时，它的表现与 position: fixed 相同。
z-index: (number)
当元素处于可重叠的定位状态时（如 absolute，fixed 等），该属性表明了这些重叠元素的堆叠顺序，数值越大越靠上。
margin: (size)
该属性表明了元素的外边距，接受任意的距离数值。
padding: (size)
该属性表明了元素的内边距，接受任意的距离数值。
注意与提示
- 不要在属性值与单位间留有空格，如：
font-size: 10 px，这是非法定义。 - 尽量在声明语句结尾加上
;结束。
