一、概述
CSS是层叠样式表（Cascading Style Sheets）的缩写。从名称可以看出，CSS是用来定义如何显示HTML元素，并且多个样式是可以叠加的。之所以在HTML中使用样式，是为了解决内容与表现分离的问题。样式通常存储在样式表中，而外部样式表通常存储在CSS文件中。
二、语法
CSS规则由两个主要部分构成：选择器，以及一条或多条声明。选择器通常是需要改变样式的HTML元素。声明由一个属性和一个值组成，多个声明之间用分号分隔。属性是希望设置的样式属性，每个属性有一个值，属性和值用冒号分隔。多个选择器可以共用同一个声明，选择器之间用逗号分隔。
selector {property : value}
三、选择器
选择器大体上可以分三种：标签选择器、id选择器、类选择器。
1、标签选择器
为指定元素设置特定的样式，可以为多个元素进行设置。在CSS中，标签选择器直接以元素标签来定义。
tag_selector {property : value}
2、id选择器
为带有指定id属性的HTML元素设置特定的样式，具有唯一性。id属性不要以数字开头，否则会导致某些浏览器不能识别。在CSS中，id选择器以#来定义。
#id_selector {property : value}
3、类选择器
为带有指定class属性的HTML元素设置特定的样式，class属性可以在多个元素中使用。在CSS中，类选择器以.来定义。
.class_selector {property : value}
4、选择器的优先级
原则上，选择器指向越准确，它的优先级越高。从选择器的种类区分来看，显然类选择器要优先于标签选择器，而id选择器要优先于类选择器。此外，有一种写法是直接在标签内部定义样式，这种方式的优先级最高，但不推荐，因为这样就违背了内容和表现分离的思想。
5、选择器的组合
有的时候，需要使用组合选择符来表示两个选择器之间的关系。主要分为四种组合方式：后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器。
-
后代选择器
使用
空格分隔，选择作为某元素后代的所有元素。 -
子元素选择器
使用
>分隔，选择作为某元素子元素的元素。 -
相邻兄弟选择器
使用
+分隔，选择紧接着某元素后的元素，并且二者拥有相同的父元素。 -
普通相邻兄弟选择器
使用
~分隔，选择所有指定元素的相邻兄弟元素。
更多关于选择器的内容，可以参考：css选择器知识汇总
四、样式表的使用
当HTML文档读取到一个样式表时，浏览器会自动进行解析，并对文档进行格式化。
根据样式表定义的位置，HTML文档读取样式表有三种方式：外部样式表、内部样式表以及内联样式。
1、外部样式表
当样式需要应用到许多页面时，可以选择使用外部样式表。通过改变一个样式文件，就可以改变整个站点的外观，是一件极有效率的事情。
用法：每个页面使用<link>标签链接到外部样式表，<link>标签在文档的头部定义。
<link rel="stylesheet" type="text/css" href="style.css">
2、内部样式表
当某个页面需要特殊的样式时，可以选择使用内部样式表。这样，样式只对当前页面产生效果，而不会影响到其他页面。
用法：使用<style>标签在文档的头部定义内部样式表。
3、内联样式
当样式只需要在某个元素应用一次时，可以选择使用内联样式。这样，样式只对该元素产生效果。
用法：在相关的标签内使用style属性，属性值包含要设置的样式的各种属性。
4、多重样式
当一个HTML元素被多个样式定义时，所有的样式会按照优先级的顺序叠加成一个虚拟的样式表，最终，会根据这个虚拟样式表来显示页面。
五、样式属性
1、背景
背景属性用于定义HTML元素的背景。
- background-color，设置元素的背景颜色
- background-image，设置元素的背景图片
- background-repeat，设置背景图片是否重复以及如何重复
- background-attachment，设置背景图片是否固定或者随着页面滚动
- background-position，设置背景图片的起始位置
为了简化，可以将这些属性合并成一个属性，简写为background，属性值的顺序按照上面的定义顺序排列。
2、文本
通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。
- color，设置文本颜色
- direction，设置文本方向
- text-align，设置文本的水平对齐方式
- text-transform，设置文本的大写和小写字母
- text-shadow，设置文本阴影
3、字体
字体属性定义字体、加粗、大小、文字样式等。
- font-family，设置文本的字体系列
- font-size，设置文本的字体大小
- font-style，设置文本的字体样式
- font-weight，设置文本字体的粗细
4、列表
列表属性用来设置列表项标记，包括有序、无序、图像。
- list-style-type，设置列表项标记的类型
- list-style-postion，设置列表项标记的位置
- list-style-image，设置图像为列表项标记
可以使用缩写属性list-style，属性值的顺序按照上面的定义顺序排列。
5、盒子模型
盒子模型规定了元素框处理元素内容、内边距、边框和外边距的方式。其中，元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距的边缘是边框，边框以外是外边距。内边距、边框和外边距都是可选的，默认值是0。
Tips：当指定一个CSS元素的宽度和高度时，实际上设置的是内容区域的宽度和高度，不包括内外边距和边框。
5.1 内边距
padding属性定义了元素边框与元素内容之间的空白区域。可以接受长度值或百分比值，但不允许使用负值。百分比值是相对于其父元素的width计算的，如果父元素的width改变，它也会随之改变。
- padding-top，设置上填充
- padding-right，设置右填充
- padding-bottom，设置下填充
- padding-left，设置左填充
可以使用缩写属性padding，属性值的顺序按照上面的定义顺序排列。
5.2 边框
border属性允许指定元素边框的样式和颜色。
- border-width，设置边框宽度
- border-style，设置边框样式
- border-color，设置边框颜色
可以使用缩写属性border，属性值的顺序按照上面的定义顺序排列。
5.3 外边距
margin属性定义了元素周围的空白区域。可以接受长度值、百分比值或自动，还可以使用负值。
- margin-top，设置上边距
- margin-right，设置右边距
- margin-bottom，设置下边距
- margin-left，设置左边距
可以使用缩写属性margin，属性值的顺序按照上面的定义顺序排列。
6、定位
元素可以通过顶部、底部、左部和右部属性进行定位，在使用这些属性之前需要设定position属性。而position属性由于定位方法的不同，它们的工作方式也有所不同。
-
static定位
HTML元素默认是静态定位，即没有定位。元素正常显示，不会受到top、bottom、left和right属性的影响。
-
fixed定位
元素的位置相对于浏览器窗口是固定的，即使窗口滚动它也不会随之移动。固定定位使得元素的位置与文档流无关，不占据空间，并且会和其他元素重叠。
-
relative定位
元素的位置是相对其正常位置的，即从正常位置进行偏移。元素发生偏移后，原来所占的空间仍然保留，并且移动元素可能会导致其覆盖其他区域。
-
absolute定位
元素的位置相对于最近已定位的父元素，如果没有已定位的父元素，那么它的位置就会相对于文档<html>。绝对定位使得元素的位置与文档流无关，不占据空间，并且会和其他元素重叠。
7、浮动
float属性会使元素水平移动，其周围的元素也会重新排列。虽然起初float属性是用于图像排列，但是它在布局时往往会收到出其不意的效果。
一个浮动元素会一直水平移动，直到它的外边缘碰到包含框或其他浮动框的边框为止。浮动元素之后的元素会围绕该浮动元素，而浮动元素之前的元素则保持不变。
元素浮动之后，周围的元素会重新排列。为了避免这种情况，可以使用clear属性，指定元素两侧不能出现浮动元素。
六、伪类和伪元素
伪类和伪元素都是用来添加一些选择器的特殊效果。
1、语法
选择器的语法：
selector:pseudo-class/pseudo-element {property:value;}
类选择器的语法：
selector.class:pseudo-class/pseudo-element {property:value;}
2、 first-line和first-letter
- first-line用于向文本的首行设置特殊样式
- first-letter用于向文本的首个字母设置特殊样式
只能用于块级元素。
3、 before和after
- before用于在元素的内容前面插入新内容
- after用于在元素的内容后面插入新内容
4、 链接
- link表示所有未访问的链接
- visited表示所有访问过的链接
- active表示正在活动的链接
- hover表示鼠标放在链接上的状态
5、表单元素
- checked表示所有选中的表单元素
- disabled表示所有禁用的表单元素
- enabled表示所有启用的表单元素
相关阅读：
阮一峰：CSS Modules 用法教程