css属性列表

属性名称</font>

字体属性(Font)</font>
font-family
font-style
font-variant
font-weight
font-size

颜色和背景属性</font>
Color
Background-color
Background-image
Background-repeat
Background-attachment
Background-position

文本属性</font>
Word-spacing
Letter-spacing
Text-decoration

Vertical-align

Text-transform

Text-align
Text-indent
Line-height

边距属性</font>
Margin-top
Margin-right
Margin-bottom
Margin-left

填充距属性</font>
Padding-top
Padding-right
Padding-bottom
Padding-left

边框属性</font>
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

分级属性</font>
Display
White-space
List-style-type
List-style-image
List-style-position
List-style

鼠标(Cursor)属性</font>

属性含义</font>

使用什么字体
字体是否斜体
是否用小体大写<br />
字体的粗细<br />
字体的大小<br />

定义前景色<br />
定义背景色<br />
定义背景图案
重复方式
设置滚动
初始位置

单词之间的间距<br />
字母之间的间距<br />
文字的装饰样式<br />

垂直方向的位置<br />

文本转换

对齐方式
首行的缩进方式<br />
文本的行高<br />

顶端边距
右侧边距
底端边距
左侧边距

顶端填充距<br />
右侧填充距<br />
底端填充距<br />
左侧填充距<br />

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

定义是否显示
怎样处理空白
加项目编号<br />
加图案<br />
第二行起始位置<br />
一次定义列表<br />

自动
定位“十&#8221;字<br />
默认指针
手形
移动
箭头朝右方<br />
箭头朝右上方
箭头朝左上方
箭头朝上方<br />
箭头朝右下方
箭头朝左下方
箭头朝下方<br />
箭头朝左方<br />
文本“I”形<br />
等待
帮助

属性值</font>

所有的字体
Normal、italic、oblique
Normal、small-caps
Normal、bold、bolder、lithter等<br />
Absolute-size、relative-size、length、percentage等<br />

颜色
颜色
路径
Repeat-x、repeat-y、no-repeat
Scroll、Fixed
Percentage、length、top、left、<br />
right、bottom等<br />

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等<br />
Border-top-width|color等<br />
同上
同上
同上
Length|percentage|auto
Length|auto
Left|right|none
Left|right|none|both

Block、inline、list-item、none
Normal、pre、nowrap
Disc、circle、square等<br />
|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)类型</strong>

样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如<font face=”Arial”>”font-size”属性只对可卷动的媒体类型有效(屏幕)。</span>

声明一个媒体属性可以用@import或<font face=”Arial”>@media引入:</span>

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

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

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

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

2、<font face=”Arial”>BOX模型(<font face=”Arial”>BOX Model)属性</strong>

什么是BOX?<font face=”Arial”>CSS把<font face=”Arial”>HTML中以……的部分称为<font face=”Arial”>BOX(容器),<font face=”Arial”>BOX有三类属性:padding、<font face=”Arial”>margin和<font face=”Arial”>border。</span>

Margin属性:

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

属性名称<font face=”Arial”>: ‘margin-top’、<font face=”Arial”>’margin-right’、<font face=”Arial”>’margin-bottom’、<font face=”Arial”>’margin-left’
属性值<font face=”Arial”>:
初始值<font face=”Arial”>: 0
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 相对于<font face=”Arial”>BOX的宽度</span>

例如:</span>

H1 { margin-top: 2em }
H2 { margin-right: 12.3% }

Margin还有一个快捷的书写方法,就是直接用margin属性,例如:</span>

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

等同于:

BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}

margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是<font face=”Arial”>”上右下左,当然<font face=”Arial”>margin后面可以不足四个值,例如:</span>

BODY { margin: 2em } /* 所有的margin都设为<font face=”Arial”>2em */
BODY { margin: 1em 2em } /*
上下margin为<font face=”Arial”>1em,右左<font face=”Arial”>margin为<font face=”Arial”>2em */
BODY { margin: 1em 2em 3em } /* 上<font face=”Arial”>margin为<font face=”Arial”>1em,右左<font face=”Arial”>margin为<font face=”Arial”>2em,下margin为<font face=”Arial”>3em*/

Padding属性:

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

属性名称<font face=”Arial”>: ‘padding-top’、<font face=”Arial”>’padding-right’、<font face=”Arial”>’padding-bottom’、<font face=”Arial”>’padding-left’ 、<font face=”Arial”>’padding’
属性值<font face=”Arial”>: 初始值<font face=”Arial”>: 0
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 相对于<font face=”Arial”>BOX的宽度</span>

例如:</span>

BLOCKQUOTE { padding-top: 0.3em }

padding属性和margin类似此处略去。</span>

Border属性:

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

border-width属性:

border-width属性又分为:<strong>border-top-width、<font face=”Arial”>border-right-width、<font face=”Arial”>border-bottom-width、<font face=”Arial”>border-left-width和<font face=”Arial”>border-width属性,border-width用长度表示为“thin/medium/thick”或长度单位表示,下面是<font face=”Arial”>border-width属性的详细列表:</span>

属性名称<font face=”Arial”>: ‘border-top-width’、<font face=”Arial”>’border-right-width’、<font face=”Arial”>’border-bottom-width’、<font face=”Arial”>’border-left-width’、<font face=”Arial”>’border-width’
属性值<font face=”Arial”>:
初始值<font face=”Arial”>: medium
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

border-width为快捷方式,顺序为上右下左,值之间用空格隔开。<br />

border-color属性:

border-color属性用来显示<font face=”Arial”>BOX边框颜色,分为<strong>border-top-color、<font face=”Arial”>border-right-color、<font face=”Arial”>border-bottom-color、<font face=”Arial”>border-right-color和<font face=”Arial”>border-color属性,属性值为颜色,可以用十六进制表示,也可用rgb()表示,属性见下:
属性名称<font face=”Arial”>: ‘border-top-color’、<font face=”Arial”>’border-right-color’、<font face=”Arial”>’border-bottom-color’、<font face=”Arial”>’border-left-color’、<br />
‘border-color’

属性值<font face=”Arial”>: 初始值<font face=”Arial”>: 元素颜色的初始值<br />
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

border-color为快捷方式,顺序为上右下左,值之间用空格隔开。<br />

border-style属性:

border-style属性用来设置<font face=”Arial”>BOX对象边框的样式,它的属性值为CSS规定的关键字,平常看不到border是因为,初始值是none的缘故。属性见下:

属性名称<font face=”Arial”>: ‘border-top-style’、<font face=”Arial”>’border-right-style’、<font face=”Arial”>’border-bottom-style’、<font face=”Arial”>’border-left-style’、<font face=”Arial”>’border-style’
属性值<font face=”Arial”>:
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

border-color为快捷方式,顺序为上右下左,值之间用空格隔开。</span>

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

none:无边框。<br />
dotted:边框为点线。<br />
dashed:边框为长短线。<br />
solid:边框为实线。<br />
double:边框为双线。<br />
groove、<font face=”Arial”>ridge、<font face=”Arial”>inset和<font face=”Arial”>outset:显示不同效果的3D边框(根据<font face=”Arial”>color属性)。</span>

border属性:

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

hello!

还可以用border-top、<font face=”Arial”>border-right、<font face=”Arial”>border-bottom、<font face=”Arial”>border-left分别作为上右下左的快捷方式,属性值顺序同border属性。</span>

3、布局(<font face=”Arial”>Layout)属性:

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

position属性:

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

属性名称<font face=”Arial”>: ‘position’
属性值<font face=”Arial”>: absolute | relative | static
初始值<font face=”Arial”>: static
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止<br />
其属性值分别代表:
absolute:屏幕上的绝对位置。<br />
relative:屏幕上的相对位置。<br />
static:固有位置。</font>

direction属性:

direction属性决定<font face=”Arial”>BOX的排列方向,详见属性:

属性名称<font face=”Arial”>: ‘direction’
属性值<font face=”Arial”>: ltr| rtl
初始值<font face=”Arial”>: ltr
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</font>

float和<font face=”Arial”>clear属性:

在<font face=”Arial”>HTML中图片可以选择飘浮的位置,现在BOX对象通过CSS对于也可以选择飘浮的位置。改变<font face=”Arial”>BOX的<font face=”Arial”>float属性,BOX将飘浮在其他元素的左或右方:

属性名称<font face=”Arial”>: ‘float’
属性值<font face=”Arial”>: left| right|none
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

例如:</span>


Some sample text that has no other…

相反的,使用clear属性将禁止元素在<font face=”Arial”>BOX的左方或右方飘浮:</span>

属性名称<font face=”Arial”>: ‘clear’
属性值<font face=”Arial”>: left| right|both|none
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</font>

绝对位置属性:

绝对位置属性有四个属性:top、<font face=”Arial”>right、<font face=”Arial”>bottom和<font face=”Arial”>left,属性值为长度单位或百分数:</span>

属性名称<font face=”Arial”>: ‘top’、<font face=”Arial”>’right’、<font face=”Arial”>’bottom’、<font face=”Arial”>’left’
属性值<font face=”Arial”>: ||auto
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

利用以上属性,用户就可以精确定义元素的位置,如:</span>

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属性:

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

属性名称<font face=”Arial”>: ‘z-index’
属性值<font face=”Arial”>: auto|
初始值<font face=”Arial”>: auto
适合对象: 使用position属性的元素
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</font>

width属性:

规定BOX的<font face=”Arial”>width属性,可以使<font face=”Arial”>BOX的宽度不依靠它所包含的内容的多少:</span>

属性名称<font face=”Arial”>: ‘width’
属性值<font face=”Arial”>: | | auto
初始值<font face=”Arial”>: auto
适合对象: 块元素<br />
是否继承: no
百分比备注<font face=”Arial”>:根据父元素的width而定

在<font face=”Arial”>CSS中还提供了<font face=”Arial”>min-width和<font face=”Arial”>max-width属性,使得BOX的宽度在最小宽度和最大宽度之间。</span>

属性名称<font face=”Arial”>: ‘min-width’
属性值<font face=”Arial”>: | 初始值<font face=”Arial”>: 0
适合对象: all
是否继承: no
百分比备注<font face=”Arial”>:根据父元素的width而定

属性名称<font face=”Arial”>: ‘max-width’
属性值<font face=”Arial”>: | 初始值<font face=”Arial”>: 100%
适合对象: all
是否继承: no
百分比备注<font face=”Arial”>:根据父元素的width而定

height属性:

相同的<font face=”Arial”>BOX还有height属性来控制本身的高度:

属性名称<font face=”Arial”>: ‘height’
属性值<font face=”Arial”>: | | auto
初始值<font face=”Arial”>: auto
适合对象: 块元素<br />
是否继承: no
百分比备注<font face=”Arial”>:根据父元素的height而定

在<font face=”Arial”>CSS中还提供了<font face=”Arial”>min-height和<font face=”Arial”>max-height属性,使得BOX的高度在最小高度和最大高度之间。</span>

属性名称<font face=”Arial”>: ‘min-height’
属性值<font face=”Arial”>: | 初始值<font face=”Arial”>: 0
适合对象: all
是否继承: no
百分比备注<font face=”Arial”>:根据父元素的height而定

属性名称<font face=”Arial”>: ‘max-height’
属性值<font face=”Arial”>: | 初始值<font face=”Arial”>: 100%
适合对象: all
是否继承: no
百分比备注<font face=”Arial”>:根据父元素的height而定

overflow属性:

在规定元素的宽度和高度时,如果元素的面积不足以显示全部内容的话就要用到<font face=”Arial”>overflow属性:

属性名称<font face=”Arial”>: ‘overflow’
属性值<font face=”Arial”>: visible | hidden | scroll | auto
初始值<font face=”Arial”>: visible
适合对象: 元素的<font face=”Arial”>position属性<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

属性值含义如下:

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

clip属性:

CSS还提供了一种<font face=”Arial”>clip属性,可以把元素区域剪切成各种形状,但目前提供的只有方形一种:

属性名称<font face=”Arial”>: ‘clip’
属性值<font face=”Arial”>: | auto
初始值<font face=”Arial”>: auto
适合元素: 元素的<font face=”Arial”>position属性被设为absolute
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

值为rect(top right bottom left)。<br />

line-height和<font face=”Arial”>vertical-align属性:

line-height属性可以规定元素内部的行间距,使用长度单位或百分数:</span>

属性名称<font face=”Arial”>: ‘line-height’
属性值<font face=”Arial”>: normal | | | 初始值<font face=”Arial”>: normal
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>:根据元素的字体大小而定

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

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属性决定元素在垂直位置的显示:

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

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

Visibility属性<font face=”Arial”>:

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

属性名称<font face=”Arial”>: ‘visibility’
属性值<font face=”Arial”>: inherit | visible | hidden
初始值<font face=”Arial”>: inherit
适合对象: 所有元素<br />
是否继承: 如果该值为inherit,则继承父元素属性<br />
百分比备注<font face=”Arial”>: 被禁止</span>

4、颜色和背景(<font face=”Arial”>Color and Background)属性:

这里介绍有关CSS中前景色和背景颜色、图片的设定方法。</span>

color属性:

color属性用于设定元素的前景色:

属性名称<font face=”Arial”>: ‘color’
属性值<font face=”Arial”>: 初始值<font face=”Arial”>: 根据用户的初始值而定
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

color属性的值可以是十六进制数值、<font face=”Arial”>rgb()函数或<font face=”Arial”>CSS承认的颜色名称。如:</span>

EM { color: red }
EM { color: #ff0000 }

背景属性:

background-color属性用于设定背景色,初始值为透明:</strong>

属性名称<font face=”Arial”>: ‘background-color’
属性值<font face=”Arial”>: | transparent
初始值<font face=”Arial”>: transparent
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</font>

backgroud-image属性用于设定背景的图片:</strong>

属性名称<font face=”Arial”>: ‘background-image’
属性值<font face=”Arial”>: | none
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

其中url可以为绝对地址,也可以是相对地址,例如:

BODY { background-image: url(marble.gif) }
P { background-image: none }

以上两个属性利用普通的HTML属性也可以实现,下面的属性是CSS对原有<font face=”Arial”>HTML的扩展。<br />
background-repeat属性用来描述背景图片的重复排列方式:</span>

属性名称<font face=”Arial”>: ‘background-repeat’
属性值<font face=”Arial”>: repeat | repeat-x | repeat-y | no-repeat
初始值<font face=”Arial”>: repeat
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 被禁止</span>

其中属性值的含义为:
repeat:沿X轴和Y轴两个方向重复显示图片。<br />
repeat-x:沿X轴方向重复图片。<br />
repeat-y:沿Y轴方向重复图片。<br />
none:不重复图片。</span>

例如:</span>

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/*
表示沿<font face=”Arial”>Y
轴重复图片<font face=”Arial”>”pendant.gif”,其余部分以红色为背景色*/

background-attachment属性表示在滚动整个文档时,背景图片的显示方式。它的属性值有两种:<font face=”Arial”>fixed和<font face=”Arial”>scroll,<font face=”Arial”>fixed相当于<font face=”Arial”>IE4里的水印效果,也就是说在拖动文档时,背景相对是静止的,<font face=”Arial”>scroll则和文档一起滚动。<br />

background-position属性用来指定背景图片显示的位置:</strong>

属性名称<font face=”Arial”>: ‘background-position’
属性值<font face=”Arial”>: [ | ]{1,2} | [top | center | bottom] || [left | center | right]
初始值<font face=”Arial”>: 0% 0%
适合对象: 容器元素
是否继承: no
百分比备注</font>: refer to the size of the element itself

其中属性值含义为:<br />
“top left”和<font face=”Arial”>”left top”表示“0% 0%”。<br />
“top”、<font face=”Arial”>”top center”和<font face=”Arial”>”center top”表示“50% 0%”。<br />
“right top”和<font face=”Arial”>”top right”都表示<font face=”Arial”>”100% 0%”。<br />
“left”、<font face=”Arial”>”left center”和<font face=”Arial”>”center left”表示“0% 50%”。<br />
“center”和<font face=”Arial”>”center center”表示“50% 50%”。<br />
“right”、<font face=”Arial”>”right center”和<font face=”Arial”>”center right”都表示<font face=”Arial”>”100% 50%”。<br />
“bottom left”和<font face=”Arial”>”left bottom”表示“0% 100%”。<br />
“bottom”、<font face=”Arial”>”bottom center”和<font face=”Arial”>”center bottom”都表示<font face=”Arial”>”50% 100%”
“bottom right”和<font face=”Arial”>”right bottom”表示“100% 100%”。<br />
例如:</span>

BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */

background属性是以上背景属性的快捷方式,属性和顺序如下:</span>

属性名称<font face=”Arial”>: ‘background’
属性值<font face=”Arial”>:
<'background-color'> || <'background-image'> ||
<'background-repeat'> || <'background-attachment'> ||
<'background-position'>
适合对象: 所有元素<br />
是否继承: no
百分比备注<font face=”Arial”>: 只在background-position中容许使用</span>

5、字体(Font)属性:

这里定义了关于字体的各种属性。</span>

font-family属性定义字体的名称,可以是一个字体的名称,也可以是一类字体的名称,字体的名称一定要和计算机系统里的完全一样:

属性名称<font face=”Arial”>: ‘font-family’
属性值<font face=”Arial”>: [[ | ],]* [ | ]
初始值<font face=”Arial”>: 根据用户定义而定
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

有些计算机系统里如果没有样式单要求的字体,可以再设一个次字体以备万一。例如:

BODY { font-family: Baskerville, “Heisi Mincho W3”, Symbol, serif }

family-name是指确定的某字体,如Heisi Mincho W3,<font face=”Arial”>generic-family指某一类字体,如<font face=”Arial”>serif。</span>

font-style属性描述字体的倾斜程度:</span>

属性名称<font face=”Arial”>: ‘font-style’
属性值<font face=”Arial”>: normal | italic | oblique
初始值<font face=”Arial”>: normal
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</font>

font-variant属性:

属性名称<font face=”Arial”>: ‘font-variant’
属性值<font face=”Arial”>: normal | small-caps
初始值<font face=”Arial”>: normal
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

一个使用了small-caps属性的元素中的小写字母看起来要比正常的大写字母小一些。<br />

font-weight属性用来描述字重。</strong>

属性名称<font face=”Arial”>: ‘font-weight’
属性值<font face=”Arial”>: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值<font face=”Arial”>: normal
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

100到<font face=”Arial”>900代表9种不同的字重,<font face=”Arial”>400代表normal,<font face=”Arial”>700代表bold,<font face=”Arial”>900是最重的字体,<font face=”Arial”>bolder或<font face=”Arial”>lighter表示字体的字重比父元素高或低一级,比如父元素字重为400,则bolder代表字重500,如果父元素本身字重为<font face=”Arial”>900,那么<font face=”Arial”>bolder后,字重还是900,同样的lighter也一样。有些字体并没有100到<font face=”Arial”>900那么全的字重,也许是从<font face=”Arial”>300到<font face=”Arial”>700,那么字重的最小和最大值也为<font face=”Arial”>300到<font face=”Arial”>700。例如:

P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */

font-size属性描述字体的大小:</span>

属性名称<font face=”Arial”>: ‘font-size’
属性值<font face=”Arial”>: | | | 初始值<font face=”Arial”>: medium
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: relative to parent element’s font size

该属性可以使用绝对大小,也可以使用相对大小,其中绝对大小可以使用,如下关键字表示:</span>

xx-small | x-small | small | medium | large | x-large | xx-large 分别代表最小、较小、小、中等、大、较大和最大。相对大小可以使用:larger 或<font face=”Arial”>smaller描述。例如:

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Font属性是以上属性的快捷方式,属性如下:

属性名称<font face=”Arial”>: ‘font’
属性值<font face=”Arial”>:
[ [ <'font-style'> || <'font-variant'> ||
<'font-weight'> ]? <'font-size'> [ / <'line-height'>
]? <'font-family'> ]
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 只在font-size使用

例如:</span>

P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% “new century schoolbook”, serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

6、文本(Text)属性:

这里的属性将影响WEB文档中的文本显示情况。</span>

text-indent属性描述文本的缩进程度:</span>

属性名称<font face=”Arial”>: ‘text-indent’
属性值<font face=”Arial”>: |
初始值<font face=”Arial”>: 0
适合对象: 容器元素
是否继承: yes
百分比备注<font face=”Arial”>: 根据父元素的宽度而定

下面的例子表明段落的缩进值为3em:</span>

P { text-indent: 3em }

Alignment属性表明文本的对齐方式:</span>

属性名称<font face=”Arial”>: ‘alignment’
属性值<font face=”Arial”>: left | right | center | justify
初始值<font face=”Arial”>: 依照用户定义
适合对象: block-level elements
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</font>

text-decoration属性描述对文本的修饰方法:

属性名称<font face=”Arial”>: ‘text-decoration’
属性值<font face=”Arial”>: none | [ underline || overline || line-through || blink ]
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: no (see clarification below)
百分比备注<font face=”Arial”>: 被禁止</span>

属性值含义分别为:<br />
underline:下划线。<br />
overline:上划线。<br />
line-through:删除线。<br />
blink:闪烁(如同Navigator中的blink标记的功能)

text-shadow属性可以为文本加入阴影的特效:

属性名称<font face=”Arial”>: ‘text-shadow’
属性值<font face=”Arial”>: none | [, ]*
初始值<font face=”Arial”>: none
适合对象: all
是否继承: No
百分比备注<font face=”Arial”>: 只在描述透明度时有效

例如:</span>

P { text-shadow: black }

上例将在文本的右下方显示黑色阴影,另外阴影将增大BOX的面积。<br />

letter-spacing属性表明文本的字间距:属性名称<font face=”Arial”>: ‘letter-spacing’

属性值<font face=”Arial”>: normal | | auto
初始值<font face=”Arial”>: normal
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

例如:</span>

BLOCKQUOTE { letter-spacing: 0.1em }

word-spacing属性表明文本中单词间距:</span>

属性名称<font face=”Arial”>: ‘word-spacing’
属性值<font face=”Arial”>: normal |
初始值<font face=”Arial”>: normal
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

例如:</span>

H1 { word-spacing: 1em }

text-transform属性可以将BOX内的文本按指定的大写或小写形式显示:

属性名称<font face=”Arial”>: ‘text-transform’
属性值<font face=”Arial”>: capitalize | uppercase | lowercase | none
初始值<font face=”Arial”>: none
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face=”Arial”>: 被禁止</span>

属性值含义为:<br />
capitalize:把BOX中的每句句首字母变成大写。<br />
uppercase:把BOX中所有的字母变成大写。<br />
lowercase:把BOX中所有的字母变成小写。<br />

White-space属性描述如何显示文本中的空格</strong>,在HTML中,空格是被省略的,也就是说你在一个段落标记的开头无论输入多少个空格都是无效的,要输入空格有两个方法,一是直接输入空格的代码” “,或者使用<font face=”Arial”>

标记,<font face="Arial">CSS中也制定了类似于pre的属性:

属性名称<font face="Arial">: 'white-space'
属性值<font face="Arial">: normal | pre | nowrap
初始值<font face="Arial">: normal
适合对象: 容器元素
是否继承: yes
百分比备注<font face="Arial">: 被禁止</span>

例如:</span>

UL { list-style: upper-roman inside } /* 对任何<font face="Arial">UL有效*/
UL ~ UL { list-style: circle outside } /*
对任何<font face="Arial">UL内部的<font face="Arial">UL标记有效*


7、列表属性:

这里的属性用来描述列表(list)的一系列属性。</span>

list-style-type属性描述用于列表每一项前使用的符号:

属性名称<font face="Arial">: 'list-style-type'
属性值<font face="Arial">: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值<font face="Arial">: disc
适合对象: 列表元素
是否继承: yes
百分比备注<font face="Arial">: 被禁止</span>

属性值含义为:<br />
disc:圆饼形。<br />
circle:空心圆形。<br />
square:方形。<br />
decimal:十进制数值。<br />
lower-roman:小写罗马数字。<br />
upper-roman:大写罗马数字。<br />
lower-alpha:小写希腊字母。<br />
upper-alpha:大写希腊字母。</span>

例如:</span>

  1. This is the first item.
  2. This is the second item.
  3. This is the third item.

还可以利用<font face="Arial">list-style-image把列表前面的符号换为图形:</span>

属性名称<font face="Arial">: 'list-style-image'
属性值<font face="Arial">: | none
初始值<font face="Arial">: none
适合对象: 列表元素
是否继承: yes
百分比备注<font face="Arial">: 被禁止</span>

可以是绝对地址,也可以是相对地址。<br />

list-style-position属性用于描述列表的位置显示:</strong>

属性名称<font face="Arial">: 'list-style-position'
属性值<font face="Arial">: inside | outside
初始值<font face="Arial">: outside
适合对象: 列表元素
是否继承: yes
百分比备注<font face="Arial">: 被禁止</span>

属性值<font face="Arial">outside和<font face="Arial">inside分别表示在<font face="Arial">BOX外部显示或内部显示</strong>,例如:

  • first list item comes first
  • second list item comes second

  • first list item comes first
  • second list item comes second

list-style属性为以上属性的快捷方式:</span>

属性名称<font face="Arial">: 'list-style'
属性值<font face="Arial">: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
初始值<font face="Arial">: no
适合对象: 列表元素
是否继承: yes
百分比备注<font face="Arial">: 被禁止</span>

例如:</span>

UL { list-style: upper-roman inside } /* 对任何<font face="Arial">UL有效*/
UL ~ UL { list-style: circle outside } /*
对任何<font face="Arial">UL内部的<font face="Arial">UL标记有效*/

PRE { white-space: pre }
P { white-space: normal

8、表格属性:

由于表格中的大部分属性已经在以上的各类属性中探讨过了,所以这里只有两个属性介绍:

row-span属性描述表格跨越的行的数目:</span>

属性名称<font face="Arial">: 'row-span'
属性值<font face="Arial">:
初始值<font face="Arial">: 1
适合对象: 表格元素
是否继承: no
百分比备注<font face="Arial">: 被禁止</font>

column-span属性描述表格跨越的列的数目:</strong>

属性名称<font face="Arial">: 'column-span'
属性值<font face="Arial">:
初始值<font face="Arial">: 1
适合对象: 表格元素
是否继承: no
百分比备注<font face="Arial">: 被禁止</span>

9、用户界面属性:

cursor属性,用户可以指定在某个元素上要使用的光标形状:</span>

属性名称<font face="Arial">: 'cursor'
属性值<font face="Arial">:
auto | crosshair | default | pointer | move | e-resize | ne-resize |
nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize|
text | wait | help |
初始值<font face="Arial">: auto
适合对象: 所有元素<br />
是否继承: yes
百分比备注<font face="Arial">: 被禁止</span>

属性值分别代表鼠标指针在windows操作里的各种形状,另外还可以指定指针图标的<font face="Arial">url地址,不过<font face="Arial">CSS还暂时不支持ani动画光标。</span>

结束语:

到此,所有关于<font face="Arial">CSS现有的属性都介绍完了(还有一些关于听觉方面的样式单,就不再作介绍),本文也该结束了,虽然现在支持样式单的浏览器种类还不多,但也占到了大半,样式单迟早会成为浏览器的统一标准,原因有两个:一、样式单是<font face="Arial">W3C唯一接受的样式标准,而且没有任何迹象表明W3C会把Javascript样式单作为样式单标准;二则是CSS有效的解决了把事件引入元素的问题,配合脚本程序,是动态<font face="Arial">HTML不可缺少的一部分,尝试着用样式单建立Web页,你会发现它真的很方便。希望我的这些努力能为你熟练掌握样式单尽一点力。</span>

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注