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)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。