CSS文档


选择器


# 类选择器	

# ID选择器
	
# 伪类列表
:link
:visited
:active
:hover
:focus
:first-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

# 常见的基于关系的选择器
选择器	选择的元素
A E	元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推)
A > E	元素A的任一子元素E(也就是直系后代)
E:first-child	任一是其父母结点的第一个子节点的元素E
B + E	元素B的任一下一个兄弟元素E
B ~ E	B元素后面的拥有共同父元素的兄弟元素E

文本


# 字体
font-family : 微软雅黑, "Songti SC";
在这个字体列表的最后加上系统字体中的一个,如:serif,sans-serif,cursive,fantasy或monospace。

# 字号
font-size : 12px; | 80% |  0.8em | inherit ;

# 行高
line-height : 2.5 |  3em | 150% | 32px | normal;

# 斜体
font-style : italic(斜体) | oblique(倾斜体) | normal(正常)

# 加粗
font-weight : bold(加粗/700) | normal(正常/400) | lighter(继承父,更细) | bolder(继承父,更粗) | 100~900

# 装饰
text-decoration : none(无) | underline (下划线) | overline(顶部线) | line-through(穿过线) | inherit(继承)

# 英文变小
font-variant : normal(标准) | small-caps(小型大写字母) | inherit(继承)
			

颜色


使用代表红,绿,蓝三个颜色的16进制数字来表示; 16进制数字的范围0-9,a-f。其中a-f代表的数值就是10-15;
# 红 绿 蓝
黑 : #000
红 : #f00
绿 : #0f0
蓝 : #00f
白 : #fff
要得到浏览器能够呈现的所有的颜色,你就得使用两个16进制来表示(也就是6位):
# 红红 绿绿 蓝蓝
黑 : #000000
红 : #ff0000
绿 : #00ff00
蓝 : #0000ff
白 : #ffffff

# 通过RGB值 , 0-255 来得到颜色
rgb(128, 0, 0);
rgba(255,255,255, 0.4); // r,g,b,透明
			

列表

list-style : <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
	
list-style-type : none(无) | 
	disc(实心圆,默认) | circle(空心圆) | square(实心方块) | 
	decimal(数字) | decimal-leading-zero(0开头的数字, 01, 02, 03) |
	lower-roman(小写罗马数字i, ii, iii, iv, v) | upper-roman(大写罗马数字I, II, III, IV, V, )
	lower-latin(小写拉丁字母a, b, c, d, e) | upper-latin(大写拉丁字母A, B, C, D, E) | ...
	
list-style-position: inside(文本以内) | outside(文本以外) | inherit

list-style-image: url('x.png')(图像的路径) | none(无, 默认) | inherit
			

表格


单元格(cell), 行(row), 表头(header), 表尾(footer), 表体(body), 列(column)

# 单元格间距
border-spacing : 1px; 

# 单元格边框 合并|分开 
border-collapse : separate(默认) | collapse(合并)

# 显示空单元格
empty-cells : show(显示) | hide(隐藏)