CSS 速查表

1. 基本语法
2. 选择器
3. 结构和层叠
4. 值和单位

1 基本语法

1.1 使用 css

在 html 中嵌入 css 样式

<style type="text/css">
  <!-- css here -->
</style>

使用 link 标记导入 css 文件

<link href="sheet1.css" rel="stylesheet" type="text/css" media="all"/>

1.2 `@import` 指令

@import 指令必须放在 css 的最前面，否则起不了作用

@import url(sheet2.css);
@import url(http://localhost/static/css/sheet2.css);

/* 应用部分媒体 */
@import url(sheet2.css) all;
@import url(sheet2.css) screen;

1.3 元素

1.3.1 替换和非替换元素

大多数元素属于非替换元素

<!-- 替换元素 -->
<img src="hello.png"/>

1.3.2 元素显示角色

不同的元素都有对应的显示角色，例如：strong, em, span 是行内元素，div, p 是块级元素

p {
  /* 块级元素 */
  display: block;
  /* 行内元素 */
  display: inline;
}

2 选择器

2.1 基本规则

基本规则由选择器（selector）和声明块（declaration block）构成

h1 {
  color: steelblue;
  background: #ff23ee;
}

2.2 选择器分组

h1, p {
  color: gray;
}

/* 通配符选择器 */
* {
  font: 18px Helvetica;
  background: #000;
}

2.3 类选择器和 ID 选择器

类选择器使用 . 符号来表示

<!-- 使用单个类 -->
<p class="warning">...</p>
<!-- 使用多个列 -->
<p class="urgent warning">...</p>

p.warning {
  font-weight: bold;
}

.warning { font-weight: bold; }
.urgent { font-style: italic; }
.warning .urgent { background: silver; }

ID 选择器使用 # 符号来表示

<h1 id="header"></h1>

#header {
  font-weight: bold;
}

2.4 属性选择器

2.4.1 常见选择器

/* 选择有 class 属性的 h1 */
h1[class] { }

/* 选择有 href 和 title 属性的 a 标签 */
a[href][title] {font-weight: bold; }

/* 根据属性值来选择 */
p[class="urgent"] { }

2.4.2 特殊匹配的选择器

/* foo 属性值是以空格分隔列表，匹配列表中包含 bar 的所有元素 in list */
elem[foo~="bar"] { }
/* 匹配 foo 属性值以 bar 开头的所有元素 starts with */
elem[foo^="bar"] { }
/* 匹配 foo 属性值以 bar 结尾的所有元素 ends with */
elem[foo$="bar"] { }
/* 匹配 foo 属性值包含 bar 字串的所有元素 substring of */
elem[foo*="bar"] { }

2.5 后代选择器和子元素选择器

根据 DOM 树中的继承关系可以通过空格来标记后代选择器

/* 选取 h1 下的所有 p 元素, h1 可以和 p 间隔多层 */
h1 p { }

/* 选取 h1 下的紧邻的所有 p 元素, h1 和 p 只能间隔一层 */
h1 > p { }

/* 选取与 ol 紧邻的 ul 的所有元素 */
ol+ul { }

2.6 伪类和伪元素

伪类的元素顺序很重要，一般参考 link -> visited -> focus -> hover -> active 的顺序

2.6.1 链接伪类

:link 包含 href 属性，并指向一个未访问地址的所有锚
:visited 指向已访问地址超链接的所有锚

a:link {
  color: blue;
}
a:visited {
  color: red;
}

2.6.2 动态伪类

:focus 当前用户焦点所在元素
:hover 当鼠标指针停留所在的元素
:active 当前被用户激活的元素

a:link { color: navy; }
a:visited { color: gray; }
a:hover { color: red; }
a:active { color: yellow; }

input:focus { background: silver; font-weight: bold; }

2.6.3 静态伪类

:first-child 第一个子元素
:last-child 最后一个子元素
:odd 奇数子元素
:even 偶数子元素
:nth-child(an+b) 从 1 开始排序，选择的结果为第（an+b）个元素的集合（n=0，1， 2，3…）

.third span:nth-child(2n+1) {
  background-color: lime;
}

2.6.4 之前和之后元素的样式

:before 当前元素之前的样式
:after 当前元素之后的样式

/* 在 h2 之前插入灰色的括号 */
h2:before {
  content: "}}";
  color: gray;
}

3 结构和层叠

css 通过计算特殊性（specificity）来觉得样式的胜出

不同的选择器有不同的贡献值
* 通配符选择器没有贡献值
ID 选择器有特殊规则
内联样式有最优先的的贡献值

3.1 `!important` 重要性

一般 important 规则总会胜出

h1 {
  color: red !important;
}

3.2 继承

在 html 文档中的后代元素会继承属性，但是需要注意的是

border 边框不能继承
margin 内外边距不能继承
background 背景不能继承

3.3 层叠

在 css 的层叠规则中，除了优先级高的样式以外，同样优先级的元素， 后定义的元素会覆盖之前定义的元素样式

4 值和单位

4.1 数字

整数和小时，例如： 5, -12.3, 22 等

4.2 百分数

实数后面添加一个百分号 %, 例如：83%

4.3 颜色

css2.1 中定义了 17 个颜色名

/* css2.1 color names */
aqua fuchsia lime olive red white
black gray maroon orange silver yellow
blue green navy purple teal

另外还可以使用以下方式定义颜色

p {
  color: rbg(0%, 0%, 0%);
  color: rgb(0,100,223);
  background: #000;
  background: #ffffff;
}

另外， web 安全色 指的是在 256 色计算机上总能避免抖动的颜色。web 安全色可以表示为 RGB 值 20% 和 51 （对应的十六进制值为 0x33）的整数倍

4.4 长度单位

绝对长度单位有如下定义方式

div {
  /* 英寸: in, 厘米: cm, 毫米: mm 等 */
  margin: 10in;
  /* 像素 */
  padding: 16px;
}

相对长度单位有如下定义方式

em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
ex 相对长度单位。相对于字符 "x" 的高度。此高度通常为字体尺寸的一半
% 相对长度单位。相对于浏览器窗口的大小

p {
  /* 根据字体的实际大小改变，如 1em = 14 像素，p标签就是 14px */
  font-size: 1em;
}

4.5 URL

URL 链接常用于 @import 语句中

url(protocol://server/path)