css属性列表.docx

css属性列表.docx

《css属性列表.docx》由会员分享，可在线阅读，更多相关《css属性列表.docx（14页珍藏版）》请在冰豆网上搜索。

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

同上

None|underline|overline|line-

through|blink

Baseline|sub|super|top|text-top|middle|bottom|text-bottom|

Capitalize|uppercase|

lowercase|none

Left|right|center|justify

|

Normal|||

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等

|none

Inside、outside

||

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引入：

@importurl（loudvoice.css）speech;

@mediaprint{

/*stylesheetforprintgoeshere*/

}

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

可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。

@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用"，"分割符分开。

@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。

下面列出各种媒体类型：

SCREEN：

指计算机屏幕。

PRINT：

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

PROJECTION：

指用于显示的项目。

BRAILLE：

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

AURAL：

指语音电子合成器。

TV：

指电视类型的媒体。

HANDHELD：

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

ALL：

适合于所有媒体。

2、BOX模型（BOXModel）属性

什么是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:

1em2em3em2em}

等同于：

BODY{

margin-top:

1em;

margin-right:

2em;

margin-bottom:

3em;

margin-left:

2em;

}

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

BODY{margin:

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

BODY{margin:

1em2em}/*上下margin为1em，右左margin为2em*/

BODY{margin:

1em2em3em}/*上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的快捷方式，属性值间用空格隔开，顺序是"边框宽度边框样式边框颜色"，例如：

.5emoutsetred">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

百分比备注:

被禁止

例如：

IMG{float:

left}

BODY,P,IMG{margin:

2em}

Somesampletextthathasnoother...

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

属性名称:

'clear'

属性值:

left|right|both|none

初始值:

none

适合对象:

所有元素

是否继承:

no

百分比备注:

被禁止

绝对位置属性：

绝对位置属性有四个属性：

top、right、bottom和left，属性值为长度单位或百分数：

属性名称:

'top'、'right'、'bottom'、'left'

属性值:

||auto

初始值:

none

适合对象:

所有元素

是否继承:

no

百分比备注:

被禁止

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

relative;margin-right:

10px;left:

10px;">

Iusedtworedhyphenstoserveasachangebar.They

will"float"totheleftofthelinecontainingTHIS

absolute;top:

auto;left:

0px;color:

red;">--

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

初始值:

auto

适合对象:

块元素

是否继承:

no

百分比备注:

根据父元素的width而定

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

属性名称:

'min-width'

属性值:

|

初始值:

0

适合对象:

all

是否继承:

no

百分比备注:

根据父元素的width而定

属性名称:

'max-width'

属性值:

|

初始值:

100%

适合对象:

all

是否继承:

no

百分比备注:

根据父元素的width而定

height属性：

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

属性名称:

'height'

属性值:

||auto

初始值:

auto

适合对象:

块元素

是否继承:

no

百分比备注:

根据父元素的height而定

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

属性名称:

'min-height'

属性值:

|

初始值:

0

适合对象:

all

是否继承:

no

百分比备注:

根据父元素的height而定

属性名称:

'max-height'

属性值:

|

初始值:

100%

适合对象:

all

是否继承:

no

百分比备注:

根据父元素的height而定

overflow属性：

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

属性名称:

'overflow'

属性值:

visible|hidden|scroll|auto

初始值:

visible

适合对象:

元素的position属性

是否继承:

no

百分比备注:

被禁止

属性值含义如下：

visible：

扩大面积以显示所有内容。

hidden：

隐藏超出范围的内容。

scroll：

在元素的右边显示一个滚动条。

auto：

当内容超出元素面积时，显示滚动条。

clip属性：

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

属性名称:

'clip'

属性值:

|auto

初始值:

auto

适合元素:

元素的position属性被设为absolute

是否继承:

no

百分比备注:

被禁止

值为rect（toprightbottomleft）。

line-height和vertical-align属性：

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

属性名称:

'line-height'

属性值:

normal|||

初始值:

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||

初始值:

baseline

适合对象:

inlineelements

适合继承:

no

百分比备注:

根据元素的line-height属性而定

属性值含义如下：

baseline：

与元素的基线对齐。

middle：

与元素中部对齐。

sub：

字下沉。

super：

字上升。

text-top：

文本顶部对齐。

text-bottom：

文本底部对齐。

Top：

和本行位置最高元素对齐。

Bottom：

和本行位置最低元素对齐。

Visibility属性:

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

属性名称:

'visibility'

属性值:

inherit|visible|hidden

初始值:

inherit

适合对象:

所有元素

是否继承:

如果该值为inherit，则继承父元素属性

百分比备注:

被禁止