HTML5权威指南笔记：16-理解CSS（内容简介）

1 选择器简明参考

选择器	说明	css版本
*	选取所有元素	2
<type>	选取指定类型的元素	1
.<class>	选取指定类的元素	1
#<id>	选取id属性为指定值的元素	1
[attr]	选取定义了attr属性，且属性值任意的元素	2
[attr=”val”]	选取定义了attr属性，且属性值为val的元素	2
[attr^=”val”]	选取定义了attr属性，且属性值以val字符串打头的元素	3
[attr$=”val”]	选取定义了attr属性，且属性值以val字符串结尾的元素	3
[attr*=”val”]	选取定义了attr属性，且属性值包含val字符串的元素	3
[attr~=”val”]	选取定义了attr属性，且属性值包含多个值，而其中一个为val的元素	2
[attr|=”val”]	选取定义了attr属性，且属性值是以连字符分割的一串值，而第一个为val的元素	2
＜选择器＞，＜选择器＞	选取同时匹配所有选择器的元素	1
＜选择器＞ ＜选择器＞	目标元素为匹配第一个选择器的元素的后代，且匹配第二个选择器	1
＜选择器＞＞＜选择器＞	目标元素为匹配第一个选择器的元素的直接后代，且匹配第二个选择器	2
＜选择器＞＋＜选择器＞	目标元素紧跟在匹配第一个选择器的元素之后，且匹配第二个选择器	2
＜选择器＞～ ＜选择器＞	目标元素跟在匹配第一个选择器的元素之后，且匹配第二个选择器	3
::first-line	选取块级元素文本的首行	1
::first-letter	选取块级元素文本的首字母	1
:before :after	在选取元素之前或之后插入内容	2
:root	选取文档中的根元素	3
:first-child	选取元素的第一个子元素	2
:last-child	选取元素的最后一个子元素	3
:only-child	选取元素的唯一一个子元素	3
:only-of-type	选取属于父元素的特定类型的唯一子元素	3
:nth-child(n)	选取父元素的第n个子元素
:nth-last-child(n)	选取父元素的倒数第n个子元素	3
:nth-of-type(n)	选取属于父元素的特定类型的第n个子元素	3
:nth-last-of-type{n)	选取属于父元素的特定类型的倒数第n个子元素	3
:enabled	选取已启用的元素	3
:disabled	选取被禁用的元素	3
:checked	选取所有选中的复选框和单选按钮	3
:default	选取默认元素	3
:valid :invalid	选取基于输入验证判定的有效或者无效的input元素	3
:in-range :out-of-range	选取被限定在指定范围之内或者之外的input元素	3
:required :optional	根据是否允许使用required属性选取input元素	3
:link	选取未访间的链接元素	1
:visited	选取用户已访问的链接元素	1
:hover	选取鼠标指针悬停在其上面的元素	2
:active	选取当前被用户激活的元素，这通常意味着用户即将点击该元素	2
:focus	选取获得焦点的元素	2
:not(<选择器＞）	否定选择（如选取所有不匹配＜选择器＞的元素）	3
:empty	选取不包含任何子元素或文本的元素	3
:lang(<语言＞ ）	选取lang属性为指定值的元素	2
:target	选取URL片段标识符指向的元素	3

2 属性简明参考

2.1 边框和背景属性

属性	说明	css版本
background	设置所有背景值的简写属性	1
background-attachment	设置元素的背景附着属性，决定背景图片是否随页面一起滚动	1
background-clip	设置元素背景颜色和图像的裁剪区域	3
background-color	设置背景颜色	1
background-image	设置元素背景图像	1
background-origin	设置背景图像绘制的起始位置	3
background-position	设置背景图像在元素盒子中的位置	1
background-repeat	设置背景图像的重复方式	1
background-size	设置背景图像的绘制尺寸	3
border	为所有边界设置所有边框宽度的简写属性	1
border-bottom	为所有下边框设肾宽度的简写属性	1
border-bottom-color	为所有下边框设置颜色	1
border-bottom-left-radius	将边框左下角设置为圆角	3
border-bottom-right-radius	将边框右下角设置为圆角	3
border-bottom-style	设置元素下边框的样式	1
border-bottom-width	设置元素下边框的宽度	1
border-color	设置四条边框的颜色	1
border-image	使用图像作为边框的简写属性	3
border-image-outset	指定图像向边框盒外部扩展的区域	3
border-image-repeat	指定边框图像的缩放和重复方式	3
border-image-slice	指定边框图像的切割方式	3
border-image-source	设置边框图像的来源路径	3
border-image-width	设置边框图像的宽度	3
border-left	设置元素左边框的简写属性	1
border-left-color	设置左边框的颜色	1
border-left-style	设置左边框的样式	1
border-left-width	设置左边框的宽度	1
border-radius	指定圆角边框的简写属性	3
border-right	设置元素右边框的简写属性	1
border-right-color	设置右边框的颜色	1
border-right-style	设置右边框的样式	1
border-right-width	设置右边框的宽度	1
border-style	设置所有边框样式的简写属性	1
border-top	设置上边框的简写属性	1
border-top-color	设置上边框的颜色	1
border-top-left-radius	将边框左上角设翌为圆角	3
border-top-right-radius	将边框右上角设置为圆角	3
border-top-style	设置上边框的样式	1
border-top-width	设置上边框的宽度	1
border-width	设置四个边框的宽度	1
box-shadow	设置元素的一个或者多个阴影效果	3
outline-color	设置元素边框外围轮廓线的颜色	2
outline-offset	设置轮廓距离元素边框边缘的偏移蜇	2
outline-style	设置轮廓的样式	2
outline-width	设置轮廓的宽度	2
outline	在一条声明中设置轮廓的简写属性	2

2.2 盒模型属性

属性	说明	css版本
box-sizing	设置要应用盒子尺寸相关属性的元素	3
clear	设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素	1
display	设置元素盒子的类型	1
float	将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界	1
height	设置元素盒子的高度	1
margin	设置元素盒子四个外边距宽度的简写属性	1
margin-bottom	设置盒子下外边距的宽度	1
margin-left	设置盒子左外边距的宽度	1
margin-right	设置盒子右外边距的宽度	1
margin-top	设置盒子上外边距的宽度	1
max-height	设置元素的最大高度	2
max-width	设置元素的最大宽度	2
min-height	设置元素的最小高度	2
min-width	设置元素的最小宽度	2
overflow	设置内容横向和竖向溢出盒子时处理方式的简写属性	2
overflow-x	设置内容横向溢出盒子时的处理方式	3
overflow-y	设置内容竖向溢出盒子时的处理方式	3
padding	设置元素盒子四个内边距宽度的简写属性	1
padding-bottom	设登盒子下内边距的宽度	1
padding-left	设置盒子左内边距的宽度	1
padding-right	设置盒子右内边距的宽度	1
padding-top	设置盒子上内边距的宽度	1
visibility	设置元素的可见性	2
width	设置元素的宽度	1

2.3 布局属性

属性	说明	css版本
bottom	设置元素下外边距边界与包含块下边界之间的偏移	2
column-count	指定多列布局的列数	3
column-fill	多列布局中列与列之间的内容如何分布	3
column-gap	指定多列布局中列与列之间的间隔	3
column-rule	多列布局中定义列与列之间的规则的简写属性	3
column-rule-color	设置多列布局中的颜色规则	3
column-rule-style	设置多列布局中的样式规则	3
column-rule-width	设置多列布局中的宽度规则	3
columns	在多列布局中设置列数和列宽度的简写属性	3
column-span	指定多列布局中元素能跨多少列	3
column-width	指定多列布局中列的宽度	3
display	指定元素在页面上的显示方式	1
flex-align flex-direction flex-order flex-pack	它们都是由弹性盒子布局定义的，目前还没有实现	3
left	设置元素左外边距边界与包含块左边界之间的偏移	2
position	设置元素的定位方法	2
right	设置元素右外边距边界与包含块右边界之间的偏移	2
top	设置元素上外边距边界与包含块上边界之间的偏移	2
z-index	设置定位元素的堆叠顺序	2

2.4 文本属性

属性	说明	css版本
font-face	指定网页使用的字体	3
direction	指定文本方向	2
font	在一条声明中设置文本字体、大小和颜色的简写属性	1
font-family	指定文本所用的字体系列，排在前面的优先使用	1
font-size	指定字体大小	1
font-style	指定采用正常字体、斜体还是倾斜字体	1
font-variant	指定字体是否以小型大写字母显示	1
font-weight	设置文本粗细	1
letter-spacing	设置字母间距	1
line-height	设置行高	1
text-align	设置文本对齐方式	1
text-decoration	规定添加到文本的修饰（如下划线）	1
text-indent	规定文本块中首行文本的缩进	1
text-justify	设置文本对齐方式	3
text-shadow	指定文本块的阴影效果	3
text-transform	控制文本块字母大小写	1
word-spacing	指定单词间距	1

2.5 过渡、动画和变换属性

属性	说明	css版本
@keyframes	为动画指定一个以上的关键帧	3
animation	设置动画的简写属性	3
animation-delay	指定动画开始前的延迟时间	3
animation-direction	指定动画重复播放时的播放方向	3
animation-duration	指定动画待续时间	3
animation-iteration-count	指定动画的循环次数	3
animation-name	指定用于动画的关键帧集合的名称	3
animation-play-state	指定动画状态（播放或暂停）	3
animation-timing-function	指定关键帧之间计算属性值的函数	3
transform	指定应用于元素的变换	3
transform-origin	指定元素变换的起点	3
transition	指定css屈性过渡效果的简写属性	3
transition-delay	指定触发过渡的延迟时间	3
transition-duration	指定过渡的待续时间	3
transition-property	指定带有过渡效果的属性	3
transition-timing-function	指定过渡期间计贷中间属性值的函数	3

2.6 其他属性

属性	说明	css版本
border-collapse	指定表格相邻单元格的边框的显示样式	2
border-spacing	指定相邻单元格的边框的距离	2
caption-side	指定表格标题的位置	2
color	设嚣元素的前景色	1
cursor	指定光标的形状	2
empty-cells	指定是否显示表格中的空单元格	2
list-style	设置列表样式的简写属性	1
list-style-image	指定列表项标记使用的图像	1
list-style-position	指定列表项标记相对于列表项内容的位置	1
list-style-type	指定列表项标记的类型	1
opacity	设置元素的透明度	3
table-layout	指定表格单元格、行和列的算法规则	2