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         填充距属性     Padding-top     Padding-right     Padding-bottom     Padding-left         边框属性     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）属性 属性含义             使用什么字体     字体是否斜体     是否用小体大写     字体的粗细     字体的大小                 定义前景色     定义背景色     定义背景图案     重复方式     设置滚动     初始位置                 单词之间的间距     字母之间的间距     文字的装饰样式         垂直方向的位置         文本转换         对齐方式     首行的缩进方式     文本的行高                 顶端边距     右侧边距     底端边距     左侧边距             顶端填充距     右侧填充距     底端填充距     左侧填充距             顶端边框宽度     右侧边框宽度     底端边框宽度     左侧边框宽度     一次定义宽度     设置边框颜色     设置边框样式     一次定义顶端     一次定义右侧     一次定义底端     一次定义左侧     定义宽度属性     定义高度属性     文字环绕     哪一边环绕             定义是否显示     怎样处理空白     加项目编号     加图案     第二行起始位置     一次定义列表             自动     定位“十”字     默认指针     手形     移动     箭头朝右方     箭头朝右上方     箭头朝左上方     箭头朝上方     箭头朝右下方     箭头朝左下方     箭头朝下方     箭头朝左方     文本“I”形     等待     帮助 属性值             所有的字体     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 <length>     同上     None|underline|overline|line-     through|blink     Baseline|sub|super|top|text-top|middle|bottom|text-bottom|     Capitalize|uppercase|     lowercase|none     Left|right|center|justify     <length>|<percentage>     Normal|<number>|<length>|     <percentage>             Length|percentage|auto     同上     同上     同上             Length|percentage     同上     同上     同上             Thin|medium|thick|length     同上     同上     同上     同上     Color     None|dotted|dash|solid等     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等     <url>|none     Inside、outside     <keyword>|<position> |<url>             Auto     Crosshair     Default     Hand     Move     e-resize     Ne-resize     Nw-resize     n-resize     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 */
}

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

<LINK rel="stylesheet"type="text/css" media="print" href="foo.css">

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

SCREEN：指计算机屏幕。
PRINT：指用于打印机的不透明介质。
PROJECTION：指用于显示的项目。
BRAILLE：盲文系统，指有触觉效果的印刷品。
AURAL：指语音电子合成器。
TV：指电视类型的媒体。
HANDHELD：指手持式显示设备（小屏幕，单色）
ALL：适合于所有媒体。

2、BOX模型（BOX Model）属性

什么是BOX？CSS把HTML中以<somesign>……</somesign>的部分称为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'
属性值: <margin-width>
初始值: 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'
属性值: <padding-width>
初始值: 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'
属性值: <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'

属性值:<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'
属性值: <border-style>
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

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

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

none：无边框。
dotted：边框为点线。
dashed：边框为长短线。
solid：边框为实线。
double：边框为双线。
groove、ridge、inset和outset：显示不同效果的3D边框（根据color属性）。

border属性：

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

<h1 style="border:.5em outsetred">hello!</h1>

还可以用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
百分比备注: 被禁止

例如：

<STYLE type="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>

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

属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

绝对位置属性：

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

属性名称: 'top'、'right'、'bottom'、'left'
属性值: <length>|<percentage>|auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止

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

<P style="position: relative;margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: 0px; color:red;">--</SPAN>
word.</P>

z-index属性：

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

属性名称: 'z-index'
属性值: auto|<integer>
初始值: auto
适合对象: 使用position属性的元素
是否继承: no
百分比备注: 被禁止

width属性：

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

属性名称: 'width'
属性值: <length> | <percentage> |auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的width而定

在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之间。

属性名称: 'min-width'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定

属性名称: 'max-width'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定

height属性：

相同的BOX还有height属性来控制本身的高度：

属性名称: 'height'
属性值: <length> | <percentage> |auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的height而定

在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度之间。

属性名称:'min-height'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定

属性名称:'max-height'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定

overflow属性：

在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到overflow属性：

属性名称: 'overflow'
属性值: visible | hidden | scroll | auto
初始值: visible
适合对象: 元素的position属性
是否继承: no
百分比备注: 被禁止

属性值含义如下：

visible：扩大面积以显示所有内容。
hidden：隐藏超出范围的内容。
scroll：在元素的右边显示一个滚动条。
auto：当内容超出元素面积时，显示滚动条。

clip属性：

CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形一种：

属性名称: 'clip'
属性值: <shape> | auto
初始值: auto
适合元素: 元素的position属性被设为absolute
是否继承: no
百分比备注: 被禁止

<shape>值为rect(topright bottom left)。

line-height和vertical-align属性：

line-height属性可以规定元素内部的行间距，使用长度单位或百分数：

属性名称:'line-height'
属性值: normal | <number> | <length>| <percentage>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注:根据元素的字体大小而定

例如下面的例子，虽然表达方式不同，但结果一样：

DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }

vertical-align属性决定元素在垂直位置的显示：

属性名称:'vertical-align'
属性值: baseline | sub | super | top | text-top |middle | bottom | text-bottom | <percentage> | <length>
初始值: baseline
适合对象: inline elements
适合继承: no
百分比备注: 根据元素的line-height属性而定

属性值含义如下：
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
Top：和本行位置最高元素对齐。
Bottom：和本行位置最低元素对齐。

Visibility属性:

该属性用于控制元素的显示或隐藏：

属性名称:'visibility'
属性值: inherit | visible | hidden
初始值: inherit
适合对象: 所有元素
是否继承: 如果该值为inherit，则继承父元素属性
百分比备注:被禁止