Cascading Style Sheets, CSS 层叠样式表，定义了如何显示 HTML 中的元素，为了方便管理，通常会将样式表单独保存在 CSS 文件中，利用 CSS 可以很方便控制网页的样式和布局，会大大提升网页开发效率。
这里简单整理相关的概念。
简介
以一个很简单的示例开始。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello CSS</title>
<style>
body {
background-color:#d0e4fe;
}
h1 {
color:orange;
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
基本语法
CSS 规则由选择器以及声明组成，声明可以有多条，通过 ; 分割；每条声明由一个属性和一个值组成。
另外，可以通过 /* 和 */ 进行注释。
嵌套/混合
可以通过嵌套关系配置某些类生效，常见的有如下几种：
//----- 逗号分割，任意一种都有效
.foo,.bar { // <div class="foo"></div>
} // <div class="bar"></div>
//----- 同时拥有两个类才能生效
.foo.bar {} // <div class="foo bar"></div>
//----- 类foo内部所有的bar类都有效，不管嵌套层级
.foo .bar { // <div class="foo">
// <div class="bar"></div>
// <div><div class="bar"></div></div>
} // </div>
//----- 类foo内部第一层bar类有效
.foo > .bar { // <div class="foo">
// <div class="bar"></div> // 有效
// <div><div class="bar"></div></div>
} // </div>
不过不支持如下的方式，此时需要通过类似 less 这种的工具。
.foo {
h1 {
color: red;
}
}
盒子模型
在使用 CSS 进行网页布局时，盒子模型是一定不会离开的东西，它装的就是 HTML 元素的内容。
一个盒子由外到内可以分成了 margin 外边距、border 边框、padding 内边距、content 内容四部分，除了内容之外其它三个都是 CSS 的属性，可以通过这三个属性进行控制。
每个元素可以通过 top bottom left right 设置四个边界，如下是常见设置。
margin: 10px; /* 四条边距相同 */
margin: 10px 20px; /* 上下边距 左右边距 */
margin: 10px 20px 10px; /* 上边距 左右边距 下边距 */
margin: 10px 20px 10px 20px; /* 上边距 右边距 下边距 左边距 */
边界的属性，例如宽度、样式、颜色等也可以分别进行设置。另外，背景颜色的边界可以通过 background-clip 参数进行设置，参数如下：
border-box默认参数，背景包含了边界，尤其是宽度明显时。padding-box只包含到了内边距。content-box只覆盖到内容。
样式种类
插入样式表方法有三种：A) 外部样式表；B) 内部样式表；C) 内联样式。
外部样式表
在需要多个页面时使用，可以通过改变一个文件来改变整个站点，需要在每个页面使用 <link> 标签链接到样式表文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
在浏览器渲染页面时，会从文件 style.css 中读到样式声明，例如如下的示例。
p {margin-left:20px;}
body {background-image:url("/images/backgroud.gif");}
注意，在属性值和单位之间不要留空格，例如 margin-left: 20 px 是有问题的。
内部样式表
对单个页面需要特殊样式时，就可以使用内部样式表，也就是在头部使用 <style> 标签进行声明。
<head>
<style>
p {margin-left:20px;}
body {background-image:url("images/backgroud.gif");}
</style>
</head>
内联样式
在具体的元素上添加，不过会损失灵活性，所以，不建议使用。
<p style="margin-left:20px;color:red">Hello World</p>
优先级
如果样式被多次定义，那么属性会从多个样式中继承过来；当存在重复时，会按照内联样式、内部样式、外部样式、浏览器默认样式的优先级覆盖。
h3 { /* 外部样式 */
color:red;
font-size:8pt;
}
h3 { /* 内部样式 */
font-size:20pt;
}
那么最终得到的样式为。
color:red;
font-size:20pt;
也就是说，颜色继承于外部样式表，而字体大小会被内部样式表中的规则覆盖。
注意，在上述的继承顺序中，需要保证外部样式在内部样式之前引入，否则，外部样式的优先级要高于内部样式。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style type="text/css">
h3{color:green;} <!-- 会覆盖外部样式 -->
</style>
</head>
其它
这里常用的一些标签。
transition
通过 CSS3 提供，用于样式平滑过度到另一种样式的动画效果，而非立即跳转，其格式类似如下，也可以将其中的属性拆分，这样可以单独进行配置，例如 transition-property transition-duration 等等。
.element {
transition: property duration time-function delay;
}
其作用如下：
property参与过渡动画的属性名，可以单个或者多个，通过逗号,分割，或者指定all所有。duration过渡动画持续的时间，单位可以是sms，例如0.3s300ms等。time-function过渡过程中速度变化模式，支持ease开始/结束慢中间快、linear匀速、ease-in开始慢逐渐加快、ease-out开始快逐渐慢、cubic-bezier(n,n,n,n)自定义贝塞尔曲线。delay动画开始前需要延迟的时间，同样支持sms单位。
伪类
checked
单选和多选按钮都有选中和未选中两种状态，除了可以通过 JS 配置格式外，还可以通过 CSS3 中的 :checked 配合其它标签实现自定义样式。
<!DOCTYPE html>
<html>
<head>
<style>
.toggle-item {
width: 100px;
height: 100px;
background-color: blue;
}
#toggle-trigger:checked ~ .toggle-item {
display: none;
}
#toggle-trigger:not(checked) ~ .toggle-item {
display: block;
}
</style>
</head>
<body>
<div class="toggle">
<input id="toggle-trigger" type="checkbox" />
<div class="toggle-item"></div>
</div>
</body>
</html>
这样就可以通过选框切换显示。
nth-of-type
通过 :nth-of-type() 伪类可以针对一组兄弟节点的标签进行设置，用 n 来筛选出在一组兄弟节点的位置。
<!DOCTYPE html>
<html>
<head>
<style>
li:nth-of-type(2n+1) {
color: red;
}
li:nth-of-type(2n) {
color: blue;
}
li:nth-of-type(1) {
font-weight: bold;
}
</style>
</head>
<body>
<ol>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ol>
</body>
</html>
其它
用于向某些选择器添加特殊的效果，最常用的就是超链接。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
变量
这是 CSS 的新功能，绝大部分浏览器都已经支持，通过变量可以使原生 CSS 极其好用。
body {
--main-color: #c9d6de; /* 定义 */
}
a {
color: var(--main-color, #f0f5f9); /* 使用，可以指定默认值 */
font: var(--main-font, "Roboto", "Helvetica"); /* 第二个参数不处理空格和逗号 */
padding: var(--main-padding, 10px 15px 10px 15px);
--primary-color: var(--primary-color); /* 也可以声明时使用 */
}
通过 -- 定义变量 (之所以使用该符号，主要是 $ 被 SASS 使用，@ 被 Less 使用)，与 color、font-size 等属性类似，只是没有具体含义，所以，也被成为自定义属性。
注意，变量名大小写敏感，而且只能作为属性值，不能用作属性名。
变量类型
可以是字符串、数值、单位值等，注意如下的使用方式。
/* 字符串可以直接拼接 */
--bar: 'hello';
--foo: var(--bar)' world';
/* 如果是数值，而使用需要单位，那么需要通过 calc 计算 */
--gap: 20; /* 也可以直接写成 20px ，注意不是字符串 */
margin-top: calc(var(--gap) * 1px);
其优先级与 CSS 相同。
Flex 布局
外层被称为容器 Container，所有的子元素自动成为容器成员，默认存在水平和垂直两个主轴，包括了开始和结束。
详细可以参考 CSS Flexbox Layout Guide 中的介绍。
其它
@media
通常用在编写响应式应用的时候，在 css2 中已经支持 @media 属性，但实现功能比较少，通常仅用做打印时定制化。
@media screen {
body{ font-size:12pt; }
}
@media print {
@import "print.css"
body{ font-size:8pt; }
}
而在 CSS3 中，增加了 media queries 功能，这样就可以根据具体的设备进行适配。
/* 宽度小于 500px 时显示绿色 */
@media screen and (max-width:500px) {
body{ background:green; }
}
/* 宽度大于 800px 时显示红色 */
@media screen and (min-width:800px) {
body{ background:red; }
}
详细可以查看 Using Media Queries 中的介绍。
@keyframes
通过 @keyframes 可以用来创建动画，其原理就是从一套 CSS 样式转换为另外一套，通过百分比来规定改变发生的时间，不过不同浏览器使用的类选择器是不同的。
@keyframes mymove {
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-moz-keyframes mymove { /* Firefox */
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove { /* Safari 和 Chrome */
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-o-keyframes mymove { /* Opera */
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
参考
- You Need to Know CSS 很多不错的 CSS 示例。