CSS2常用属性

可链接CSS属性查看表

CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。（关联）固定与滚动 fixed、scroll
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。(定位)
background-repeat	设置背景图像是否及如何重复。（是否平铺）no-repeat、-x、-y

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。ltr，显示从左到右、 rtl，显示从右到左联系【Unicode-bidi】
line-height	设置行高。
letter-spacing	设置字符间距。(区别于word-spacing)
text-align	对齐元素中的文本。(区别center元素)
text-decoration	向文本添加修饰。None、underline下、overline上、line-through中、blink闪【文本修饰】
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。None、uppercase大、lowercase小、capitalize首字母大写【字符转换】
unicode-bidi	设置文本方向。联系【direction】embed 或 bidi-override 时才会应用 direction 属性
white-space	设置元素中空白的处理方式。Normal、pre、nowrap、pre-wrap、pre-line 【注】
word-spacing	设置字间距。（区别letter-spacing）

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。【要按默认顺序】
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。Normal标准、italic斜体、oblique倾斜
font-variant	以小型大写字体或者正常字体显示文本。Noraml标准、small-caps小型大写字母
font-weight	设置字体的粗细。Normal、bold粗、bolder更粗、lighter更细、length数值型

CSS 列表属性(list)

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。【任何顺序】
list-style-image	将图象设置为列表项标志。URL（”图像的路径”）、none默认无图形被显示
list-style-position	设置列表中列表项标志的位置。Inside、outside【此为默认】
list-style-type	设置列表项标志的类型。
marker-offset

CSS Table 属性(本例介绍的不是如何使用表来建立布局，而是要介绍 CSS 中表本身如何布局。)

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。Separate[h1] 分离不合并、collapse[h2] 合并
border-spacing	设置分隔单元格边框的距离。【仅用于 "separated borders" 模型】
caption-side	设置表格标题的位置。Hide默认、show显示绘制边框【仅用于 "separated borders" 模型】
empty-cells	设置是否显示表格中的空单元格。Hide默认、show显示绘制边框【仅用于 "separated borders" 模型】
table-layout	设置显示单元、行和列的算法。Automatic[h3] （自动表格）、fixed[h4] （固定表格-布局算法比较快）

CSS 边框属性（CSS 轮廓）

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。只有在规定了 !DOCTYPE 时，InternetExplorer 才支持

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。顺序如下[h5] -可以缺少设置某值	2
outline-color	设置轮廓的颜色。【注：始终在 outline-color 属性之前声明 outline-style 属性】	2
outline-style	设置轮廓的样式。【注：样式不能是 none，否则轮廓不会出现】	2
outline-width	设置轮廓的宽度。【注：始终在 outline-width 属性之前声明 outline-style 属性】	2

简介：轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS 内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

简介：元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性

CSS 边框属性[h6]

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

简介：元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS 外边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

简介：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

CSS 定位属性。

CSS 定位属性允许你对元素进行定位。CSS 有三种基本的定位机制：普通流、浮动和绝对定位

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

position可能的值

值	描述
absolute[h7]	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed[h8]	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative[h9]	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static[h10]	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

事项注意：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

CSS float（浮动）属性
可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

注：CSS浮动含义

CSS clear属性

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

注：清除浮动框的围绕

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

可能的值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。（行内元素）
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

注：“块框”、 “行内框”

CSS 尺寸属性

CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS 分类属性 (Classification)

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

伪类 [h11]

浏览器支持：IE Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C” 列的数字显示出伪类属性由哪个 CSS 标准定义（CSS1 还是 CSS2）。

伪类	作用	IE	F	N	W3C
:active	将样式添加到被激活的元素	4	1	8	1
:focus	将样式添加到被选中的元素	-	-	-	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式	4	1	7	1
:link	将特殊的样式添加到未被访问过的链接	3	1	4	1
:visited	将特殊的样式添加到被访问过的链接	3	1	4	1
:first-child	将特殊的样式添加到元素的第一个子元素		1	7	2
:lang	允许创作者来定义指定的元素中使用的语言		1	8	2

伪元素[h12]

浏览器支持：IE: Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C”列的数字显示出属性背景由哪个CSS标准定义（CSS1还是CSS2）。

伪元素	作用	IE	F	N	W3C
:first-letter	将特殊的样式添加到文本的首字母	5	1	8	1
:first-line	将特殊的样式添加到文本的首行	5	1	8	1
:before	在某元素之前插入某些内容		1.5	8	2
:after	在某元素之后插入某些内容		1.5	8	2

不同的媒介类型[h13]

注释：媒介类型名称对大小写不敏感。

浏览器支持：IE: Internet Explorer, F: Firefox, N: Netscape。

W3C：“W3C” 列的数字显示出属性背景由哪个 CSS 标准定义（CSS1 还是 CSS2）。

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

[h1]Separate [h1]默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

[h2]collapse [h2]如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

[h3]Automatic [h3]默认。列宽度由单元格内容设定。

[h4]fixed [h4]列宽由表格宽度和列宽度设定。

[h5]outline-color

· outline-style

· outline-width

[h6]由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

[h7]absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

[h8]fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

[h9]relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留

[h10]static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

[h11]CSS 伪类用于向某些选择器添加特殊的效果

[h12]CSS 伪元素用于将特殊的效果添加到某些选择器。

[h13]媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

CSS2常用属性

悦读