CSS速查表

选择器

 

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}

通用选择器

* {
declaration block
}

元素选择器

E {
declaration block
}

类选择器

.className {
declaration block
}

ID选择器

#ID {
declaration block
}

属性选择器

[ { attribute | attribute { = | |= | ~= } attribute value } ] {

declaration block

}

 

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素
[abc~="def"]	选择 abc 属性值中词列表包含 "def" 的所有元素
[abc|="def"]	选择 abc 属性值中等于"def"或以"def-"开头的所有元素

分组选择器

td, th {
    declarations
}

派生选择器

E F {
declaration block
}

子元素选择器

E>F {

declaration block

}

相邻兄弟选择器

E+F {

declaration block

}

伪类

a:link {
   declarations
}
a:visited {
   declarations
}
a:focus {
   declarations
}
a:hover {
   declarations
}
a:active {
   declarations
}

伪元素

:first-letter

:first-line

:before

:after

::selection

选择器的优先级

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

CSS 属性

盒子属性

尺寸

外边距

内边距

边框

轮廓(outline)

布局(定位)属性

display 属性规定元素应该生成的框的类型。

position 属性规定元素的定位类型。

float 属性定义元素在哪个方向浮动。

clear 属性规定元素的哪一侧不允许其他浮动元素。

visibility 属性规定元素是否可见。

top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。

bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。

left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

overflow 属性规定当内容溢出元素框时发生的事情。

clip 属性剪裁绝对定位元素。

列表属性

list-style-type 属性设置列表项标记的类型。

list-style-position 属性设置在何处放置列表项标记。

list-style-image 属性使用图像来替换列表项的标记。

list-style 简写属性在一个声明中设置所有的列表属性。

表格属性

tableLayout 属性用来显示表格单元格、行、列的算法规则。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

caption-side 属性设置表格标题的位置。

颜色和背景(Background)

background 在一个声明中设置所有的背景属性
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
background-color 设置元素的背景颜色
background-image 设置元素的背景图像
background-position 设置背景图像的开始位置
background-repeat 设置是否及如何重复背景图像

文本和字体

color 设置文本的颜色。
direction 规定文本的方向 / 书写方向。
letter-spacing 设置字符间距。
line-height 设置行高。
text-align 规定文本的水平对齐方式。
text-decoration 规定添加到文本的装饰效果。
text-indent 规定文本块首行的缩进。
text-shadow 规定添加到文本的阴影效果。
text-transform 控制文本的大小写。
unicode-bidi 设置文本方向。
white-space 规定如何处理元素中的空白
word-spacing 设置单词间距。

font 在一个声明中设置所有字体属性。
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-size-adjust 为元素规定 aspect 值。
font-stretch 收缩或拉伸当前的字体系列。
font-style 规定文本的字体样式。
font-variant 规定文本的字体样式。
font-weight 规定字体的粗细。

伪类

:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。

伪元素

:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。