# 数值

# 长度和尺寸

# <length>

绝对单位：px, mm, cm, in, pt
- 1 in = 96 px
- 1 in = 2.54 cm
相对单位：em, rem

# 无单位值

margin padding 等默认值：0
无单位的行高：1.5，当然也可以有具体单位

# 动画

# <angle>

# rotate：rotate(0deg)

# <time>

# <timing-function>

# <string>

# 百分比

# 颜色

关键词： blue、black 等 165 个左右
十六进制： #FF0000
rgb： rgb(255, 0, 0)
rgba： rgba(255, 0, 0, 0.5)
hsl： hsl(0, 100%, 50%)
hsla： hsla(0, 100%, 50%, 0.5)
opacity： opacity: 0.5

# hsl

色调：0-360，色轮的角度；
饱和度：0-100%，0 灰色，100% 全彩；
明度：0-100%，0 无光全黑，100% 有光全白。

# alpha 通道

0-1 的范围，0 全透明，1 完全不透明

# 函数

# 盒子属性

width 和 height
- 设置 content-box，包括 min-width，max-width，min-height，max-height。
padding
border
margin
- 外边距塌陷

# 高级用法

overflow
background clip
outline

# 盒子类型

block
inline
inline-block

默认下，块级元素默认 block，行内元素默认 inline。

# 层叠

# 重要性

!important; 尽量少用

	p {
	color: red;
	}
	.better {
	color: blue !important;
	}

# 特殊性

1000： <style> 内或 style 属性上，否则为 0。
100：id 选择器
10：类选择器、属性选择器、伪类
1：元素选择器、伪元素

	h1 + p::first-letter {
	/* h1, p, ::first-letter 伪元素 */
	/* 1 + 1 + 1 = 3 */
	}
	li > a[href=*"en-US"] > .inline-warning {
	/* li, a, 属性选择器，类选择器 */
	/* 1 + 1 + 10 + 10 = 22 */
	}

# 源码次序性

重要性、特殊性一致，则该性质决定优先级，即：以后规则战胜先前规则。

style 属性比 <style> 标签内的优先
多个 <style> 标签，则最后的 <style> 优先，毕竟是加载到 dom 上的。

# 控制继承

inherit：与父元素的值一样；
initial：浏览器默认值，如果没浏览器默认值，则是 inherit；比如 a 的链接颜色蓝色是浏览器默认的；
unset：自然值，如果是自然继承则是 inherit，否则是 initial。

# 选择器

# 简单选择器

类型选择器（元素选择器）： p
- 该选择器不区分大小写。
类选择器： .first
ID 选择器： #page
- ID 必须唯一，否则各个浏览器处理的不一致，行为不可预测。
通用选择器： *
- 尽量少用，该选择器对性能有影响，网页显示比预期要慢。

# 属性选择器

属性和属性值：
- 属性： [attr]
- 属性值： [attr=val]
- 属性值以空格隔开： [attr~=val]
  比如： class="foo bar" ，则 [class~=bar]
子串值：
- 开头匹配 (val 或 val-xxx)： [attr|=val]
  比如： [lang|=en]
- 开头包含： [attr^=val]
- 结尾包含： [attr$=val]
- 包含 (% val%)： [attr*=val]

# 伪类和伪元素选择器

伪类，以 : 作为前缀
比如: :link, :active, :hover, :visited
:first-child, :last-child, :nth-child, :nth-last-child, :only-child 等
伪元素，以 :: 作为前缀
- ::after
p::after {
content: "<- extra text.";
color: red;
}
- ::before
- ::first-letter
- ::first-line ，块级元素，第一行
- ::selection ，鼠标选中高亮部分
- ::backdrop ，大多数浏览器未实现

# 组合选择器

A , B ：A 或 B，A/B
A B ：B 是 A 的后代
A > B ：B 是 A 的第一级后代
A + B ：A 和 B 是相邻且同级关系
A ~ B ：A 和 B 是同级关系，但不相邻

# Font styles

color：主要是文本，其它的一些内容也会被影响，比如，text-decoration 的 underline 和 overline。
font-family：
- serif 衬线字体
- sans-serif 无衬线字体
- monospace 等宽字体
- cursive 仿手写字体
- fantasy 装饰字体
font-size：
- px
- em
- rem
font-style:
- normal
- italic - 如果没有就使用 oblique，字体不一定设计斜体，所以会使用 oblique 替代；
- oblique - 使 normal 文字变斜
text-transform:
- none
- uppercase
- lowercase
- capitalize
- full-width：glyphs (象形文字)，如中文，等宽
text-decoration: 以下值可多选
- none
- underline
- overline
- line-through

并且结合了 text-decoration-[line, style, color]
style:

solid
double
dotted
dashed
wavy
-moz-none，使用 text-decoration-line: none

text-shadow: 4px 4px 5px red
- 水平位移，必须
- 垂直位移，默认 0
- 模糊半径，默认 0
- 颜色，默认 black
- 位移可负值，多组用逗号隔开

# Text layout styles

text-align: content box 中
- left
- right
- center
- justify, 两端对齐，各个浏览器处理不一样。
line-height:
- 1.5-2: 最佳
- px
letter-spacing, word-spacing