css属性列表与属性值含义

css属性列表和属性值含义css属性列表

属性名称

字体属性（Font）

font-family

font-style

font-variant

font-weight

font-size

颜色和背景属性

Color

Background-color Background-image Background-repeat Background-attachment Background-position

文本属性

Word-spacing

Letter-spacing

Text-decoration Vertical-align

Text-transform

Text-align

Text-indent

Line-height

边距属性

Margin-top

Margin-right

Margin-bottom

Margin-left

Margin 属性含义

使用什么字体

字体是否斜体

是否用小体大

写

字体的粗细

字体的大小

定义前景色

定义背景色

定义背景图案

重复方式

设置滚动

初始位置

单词之间的间

距

字母之间的间

距

文字的装饰样

式

垂直方向的位

置

文本转换

对齐方式

首行的缩进方

式

文本的行高

分别设置上右

下左，一个值

属性值

所有的字体

Normal、italic、oblique

Normal、small-caps

Normal、bold、bolder、lithter等

Absolute-size、relative-size、length、

percentage等

颜色

颜色

路径

Repeat-x、repeat-y、no-repeat

Scroll、Fixed

Percentage、length、top、left、

right、bottom等

Normal

同上

None|underline|overline|line-

through|blink

Baseline|sub|super|top|text-top|middl

e|bottom|text-bottom|

Capitalize|uppercase|

lowercase|none

Left|right|center|justify

|

Normal|||

Length|percentage|auto

同上

同上

同上

设置全部

填充距属性Padding-top Padding-right Padding-bottom Padding-left Padding

边框属性

Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top

Border-right

Border-bottom Border-left

Width

Height

Float

Clear

分级属性

Display

White-space

List-style-type

List-style-image

List-style-position List-style

鼠标（Cursor）属性

顶端边距

右侧边距

底端边距

左侧边距

同Margin

顶端填充距

右侧填充距

底端填充距

左侧填充距

顶端边框宽度右侧边框宽度底端边框宽度左侧边框宽度一次定义宽度设置边框颜色设置边框样式一次定义顶端一次定义右侧一次定义底端一次定义左侧定义宽度属性定义高度属性文字环绕

哪一边环绕

定义是否显示怎样处理空白加项目编号

加图案

第二行起始位置

一次定义列表

自动

定位“十”字

默认指针Length|percentage

同上

同上

同上

同Margin

Thin|medium|thick|length

同上

同上

同上

同上

Color

None|dotted|dashed|dash|solid|doubl e|groove|ridge|inset|outset等Border-top-width|color等

同上

同上

同上

Length|percentage|auto

Length|auto

Left|right|none

Left|right|none|both

Block、inline、list-item、none Normal、pre、nowrap

Disc、circle、square等

|none

Inside、outside

| |

Auto

Crosshair

Default

Hand

Move

e-resize

Ne-resize

Nw-resize

n-resize

手形

移动

箭头朝右方箭头朝右上方箭头朝左上方箭头朝上方箭头朝右下方箭头朝左下方箭头朝下方箭头朝左方文本“I”形

等待

帮助Se-resize Sw-resize s-resize w-resize Text

Wait Help

CSS属性：

1、媒体（Media）类型

样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。

声明一个媒体属性可以用@import或@media引入：

@import url(loudvoice.css) speech;

@media print {

/* style sheet for print goes here */

}

也可以在文档标记中引入媒体：

可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用"，"分割符分开。@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。下面列出各种媒体类型：

SCREEN：指计算机屏幕。

PRINT：指用于打印机的不透明介质。

PROJECTION：指用于显示的项目。

BRAILLE：盲文系统，指有触觉效果的印刷品。

AURAL：指语音电子合成器。

TV：指电视类型的媒体。

HANDHELD：指手持式显示设备（小屏幕，单色）

ALL：适合于所有媒体。

2、BOX模型（BOX Model）属性

什么是BOX？CSS把HTML中以……的部分称为BOX（容器），BOX有三类属性：padding、margin和border。

Margin属性：

Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性，分别表示BOX里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，造成BOX与BOX之间的重叠显示，关于margin的属性详见下表：

属性名称: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'

属性值:

初始值: 0

适合对象: 所有元素

是否继承: no

百分比备注: 相对于BOX的宽度

例如：

H1 { margin-top: 2em }

H2 { margin-right: 12.3% }

Margin还有一个快捷的书写方法，就是直接用margin属性，例如：

BODY { margin: 1em 2em 3em 2em}

等同于：

BODY {

margin-top:1em;

margin-right:2em;

margin-bottom:3em;

margin-left:2em;

}

margin属性后面可以有四个值，中间用空格隔开（记住不是逗号），顺序是"上右下左"，当然margin后面可以不足四个值，例如：

BODY { margin: 2em } /* 所有的margin都设为2em */

BODY { margin: 1em 2em } /* 上下margin为1em，右左margin为2em */

BODY { margin: 1em 2em 3em } /* 上margin为1em，右左margin为2em，下margin为3em*/

Padding属性：

Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，关于padding的属性详见下表：

属性名称: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、'padding'

属性值:

初始值: 0

适合对象: 所有元素

是否继承: no

百分比备注: 相对于BOX的宽度

例如：

BLOCKQUOTE { padding-top: 0.3em }

padding属性和margin类似此处略去。

Border属性：

平时我们在查看HTML文档时，看到一段文字，并不会把它当作一个BOX，实际上BOX是有边框的，只是平时不显示出来罢了，而border属性就是用来描述BOX边框的。Border属性分为border-width、border-color 和border-style，而这些属性下面又有分支。

border-width属性：

border-width属性又分为：border-top-width、border-right-width、border-bottom-width、

border-left-width和border-width

属性，border-width用长度表示为"thin/medium/thick"或长度单位表示，下面是border-width属性的详细列表：

属性名称: 'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'、'border-width'

属性值:

初始值: medium

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

border-width为快捷方式，顺序为上右下左，值之间用空格隔开。

border-color属性：

border-color属性用来显示BOX边框颜色，分为border-top-color、border-right-color、

border-bottom-color、border-right-color和border-color属性，属性值为颜色，可以用十六进制表示，也可用rgb()表示，属性见下：

属性名称: 'border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color'、'border-color'

属性值:

初始值: 元素颜色的初始值

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

border-color为快捷方式，顺序为上右下左，值之间用空格隔开。

border-style属性：

border-style属性用来设置BOX对象边框的样式，它的属性值为CSS规定的关键字，平常看不到border

是因为，初始值是none的缘故。属性见下：

属性名称: 'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style'

属性值:

初始值: none

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

border-color为快捷方式，顺序为上右下左，值之间用空格隔开。

属性值的名称和代表意义如下：

none：无边框。

dotted：边框为点线。

dashed：边框为长短线。

solid：边框为实线。

double：边框为双线。

groove、ridge、inset和outset：显示不同效果的3D边框（根据color属性）。

border属性：

border属性为Border的快捷方式，属性值间用空格隔开，顺序是"边框宽度边框样式边框颜色"，例如：

hello!

还可以用border-top、border-right、border-bottom、border-left分别作为上右下左的快捷方式，属性值顺序同border属性。

3、布局（Layout）属性：

在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。Netscape 曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C承认，W3C在CSS提出了类似于Layer 标记的功能。

position属性：

position属性用来决定元素的位置类型，详见属性：

属性名称: 'position'

属性值: absolute | relative | static

初始值: static

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

其属性值分别代表：

absolute：屏幕上的绝对位置。

relative：屏幕上的相对位置。

static：固有位置。

direction属性：

direction属性决定BOX的排列方向，详见属性：

属性名称: 'direction'

属性值: ltr| rtl

初始值: ltr

适合对象: 所有元素

是否继承: yes

百分比备注: 被禁止

float和clear属性：

在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。改变BOX的float 属性，BOX将飘浮在其他元素的左或右方：

属性名称: 'float'

属性值: left| right|none

初始值: none

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

例如：

Some sample text that has no other...

相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：

属性名称: 'clear'

属性值: left| right|both|none

初始值: none

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

绝对位置属性：

绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：

属性名称: 'top'、'right'、'bottom'、'left'

属性值: ||auto

初始值: none

适合对象: 所有元素

是否继承: no

百分比备注: 被禁止

利用以上属性，用户就可以精确定义元素的位置，如：

I used two red hyphens to serve as a change bar. They

will "float" to the left of the line containing THIS

--

word.

z-index属性：

在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意在z-index中使用负数。

属性名称: 'z-index'

属性值: auto|

初始值: auto

适合对象: 使用position属性的元素

是否继承: no

百分比备注: 被禁止

width属性：

规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少：

属性名称: 'width'

属性值: | | auto