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五個(gè)屬性,分別表示BOX里內(nèi)容離邊框的距離,它的屬性值是數(shù)值單位,可以是長(zhǎng)度、百分比或auto,margin甚至可以設(shè)為負(fù)值,造成BOX與BOX之間的重疊顯示,關(guān)于margin的屬性詳見下表:
屬性名稱: 'margin-top'、'margin-right'、'margin-bottom'、'margin-left'
屬性值: <margin-width>
初始值: 0
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 相對(duì)于BOX的寬度
例如:
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin還有一個(gè)快捷的書寫方法,就是直接用margin屬性,例如:
BODY { margin: 1em 2em 3em 2em}
等同于:
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}
margin屬性后面可以有四個(gè)值,中間用空格隔開(記住不是逗號(hào)),順序是"上右下左",當(dāng)然margin后面可以不足四個(gè)值,例如:
BODY { margin: 2em } /* 所有的margin都設(shè)為2em */
BODY { margin: 1em 2em } /* 上下margin為1em,右左margin為2em */
BODY { margin: 1em 2em 3em } /* 上margin為1em,右左margin為2em,下margin為3em*/
Padding屬性:
Padding屬性用來(lái)描述BOX的邊框和內(nèi)容之間插入多少空間,和margin屬性類似,它也分為上右下左和一個(gè)快捷方式padding,關(guān)于padding的屬性詳見下表:
屬性名稱: 'padding-top'、'padding-right'、'padding-bottom'、'padding-left' 、'padding'
屬性值: <padding-width>
初始值: 0
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 相對(duì)于BOX的寬度
例如:
BLOCKQUOTE { padding-top: 0.3em }
padding屬性和margin類似此處略去。
Border屬性:
平時(shí)我們?cè)诓榭?font face=Arial>HTML文檔時(shí),看到一段文字,并不會(huì)把它當(dāng)作一個(gè)BOX,實(shí)際上BOX是有邊框的,只是平時(shí)不顯示出來(lái)罷了,而border屬性就是用來(lái)描述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用長(zhǎng)度表示為"thin/medium/thick"或長(zhǎng)度單位表示,下面是border-width屬性的詳細(xì)列表:
屬性名稱: 'border-top-width'、'border-right-width'、'border-bottom-width'、'border-left-width'、'border-width'
屬性值: <border-width>
初始值: medium
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
border-width為快捷方式,順序?yàn)樯嫌蚁伦?,值之間用空格隔開。
border-color屬性:
border-color屬性用來(lái)顯示BOX邊框顏色,分為border-top-color、border-right-color、border-bottom-color、border-right-color和border-color屬性,屬性值為顏色,可以用十六進(jìn)制表示,也可用rgb()表示,屬性見下:
屬性名稱: 'border-top-color'、'border-right-color'、'border-bottom-color'、'border-left-color'、
'border-color'
屬性值: <color>
初始值: 元素顏色的初始值
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
border-color為快捷方式,順序?yàn)樯嫌蚁伦?,值之間用空格隔開。
border-style屬性:
border-style屬性用來(lái)設(shè)置BOX對(duì)象邊框的樣式,它的屬性值為CSS規(guī)定的關(guān)鍵字,平??床坏?font face=Arial>border是因?yàn)椋跏贾凳?font face=Arial>none的緣故。屬性見下:
屬性名稱: 'border-top-style'、'border-right-style'、'border-bottom-style'、'border-left-style'、'border-style'
屬性值: <border-style>
初始值: none
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
border-color為快捷方式,順序?yàn)樯嫌蚁伦螅抵g用空格隔開。
屬性值的名稱和代表意義如下:
none:無(wú)邊框。
dotted:邊框?yàn)辄c(diǎn)線。
dashed:邊框?yàn)殚L(zhǎng)短線。
solid:邊框?yàn)閷?shí)線。
double:邊框?yàn)殡p線。
groove、ridge、inset和outset:顯示不同效果的3D邊框(根據(jù)color屬性)。
border屬性:
border屬性為Border的快捷方式,屬性值間用空格隔開,順序是"邊框?qū)挾?邊框樣式 邊框顏色",例如:
<h1 style="border:.5em outset red">hello!</h1>
還可以用border-top、border-right、border-bottom、border-left分別作為上右下左的快捷方式,屬性值順序同border屬性。
3、布局(Layout)屬性:
在以前的HTML里,元素的位置只能靠元素的依次排列覺得,而在CSS里你可以更精確的定位元素。Netscape曾提出過(guò)Layer標(biāo)記,它對(duì)于精確布局很有好處,但是并沒有被W3C承認(rèn),W3C在CSS提出了類似于Layer標(biāo)記的功能。
position屬性:
position屬性用來(lái)決定元素的位置類型,詳見屬性:
屬性名稱: 'position'
屬性值: absolute | relative | static
初始值: static
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
其屬性值分別代表:
absolute:屏幕上的絕對(duì)位置。
relative:屏幕上的相對(duì)位置。
static:固有位置。
direction屬性:
direction屬性決定BOX的排列方向,詳見屬性:
屬性名稱: 'direction'
屬性值: ltr| rtl
初始值: ltr
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
float和clear屬性:
在HTML中圖片可以選擇飄浮的位置,現(xiàn)在BOX對(duì)象通過(guò)CSS對(duì)于也可以選擇飄浮的位置。改變BOX的float屬性,BOX將飄浮在其他元素的左或右方:
屬性名稱: 'float'
屬性值: left| right|none
初始值: none
適合對(duì)象: 所有元素
是否繼承: 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
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
絕對(duì)位置屬性:
絕對(duì)位置屬性有四個(gè)屬性:top、right、bottom和left,屬性值為長(zhǎng)度單位或百分?jǐn)?shù):
屬性名稱: 'top'、'right'、'bottom'、'left'
屬性值: <length>|<percentage>|auto
初始值: none
適合對(duì)象: 所有元素
是否繼承: 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中允許元素的重疊顯示,這樣就有一個(gè)顯示順序的問題,z-index屬性描述了元素的前后位置,如果把電腦屏幕看作X-Y平面的話,那么Z軸就是垂直于屏幕的,z-index使用整數(shù)表示元素的前后位置,數(shù)值越大,就會(huì)顯示在相對(duì)靠前的位置,并且CSS同意在z-index中使用負(fù)數(shù)。
屬性名稱: 'z-index'
屬性值: auto|<integer>
初始值: auto
適合對(duì)象: 使用position屬性的元素
是否繼承: no
百分比備注: 被禁止
width屬性:
規(guī)定BOX的width屬性,可以使BOX的寬度不依靠它所包含的內(nèi)容的多少:
屬性名稱: 'width'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對(duì)象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的width而定
在CSS中還提供了min-width和max-width屬性,使得BOX的寬度在最小寬度和最大寬度之間。
屬性名稱: 'min-width'
屬性值: <length> | <percentage>
初始值: 0
適合對(duì)象: all
是否繼承: no
百分比備注:根據(jù)父元素的width而定
屬性名稱: 'max-width'
屬性值: <length> | <percentage>
初始值: 100%
適合對(duì)象: all
是否繼承: no
百分比備注:根據(jù)父元素的width而定
height屬性:
相同的BOX還有height屬性來(lái)控制本身的高度:
屬性名稱: 'height'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對(duì)象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的height而定
在CSS中還提供了min-height和max-height屬性,使得BOX的高度在最小高度和最大高度之間。
屬性名稱: 'min-height'
屬性值: <length> | <percentage>
初始值: 0
適合對(duì)象: all
是否繼承: no
百分比備注:根據(jù)父元素的height而定
屬性名稱: 'max-height'
屬性值: <length> | <percentage>
初始值: 100%
適合對(duì)象: all
是否繼承: no
百分比備注:根據(jù)父元素的height而定
overflow屬性:
在規(guī)定元素的寬度和高度時(shí),如果元素的面積不足以顯示全部?jī)?nèi)容的話就要用到overflow屬性:
屬性名稱: 'overflow'
屬性值: visible | hidden | scroll | auto
初始值: visible
適合對(duì)象: 元素的position屬性
是否繼承: no
百分比備注: 被禁止
屬性值含義如下:
visible:擴(kuò)大面積以顯示所有內(nèi)容。
hidden:隱藏超出范圍的內(nèi)容。
scroll:在元素的右邊顯示一個(gè)滾動(dòng)條。
auto:當(dāng)內(nèi)容超出元素面積時(shí),顯示滾動(dòng)條。
clip屬性:
CSS還提供了一種clip屬性,可以把元素區(qū)域剪切成各種形狀,但目前提供的只有方形一種:
屬性名稱: 'clip'
屬性值: <shape> | auto
初始值: auto
適合元素: 元素的position屬性被設(shè)為absolute
是否繼承: no
百分比備注: 被禁止
<shape>值為rect(top right bottom left)。
line-height和vertical-align屬性:
line-height屬性可以規(guī)定元素內(nèi)部的行間距,使用長(zhǎng)度單位或百分?jǐn)?shù):
屬性名稱: 'line-height'
屬性值: normal | <number> | <length> | <percentage>
初始值: normal
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注:根據(jù)元素的字體大小而定
例如下面的例子,雖然表達(dá)方式不同,但結(jié)果一樣:
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
適合對(duì)象: inline elements
適合繼承: no
百分比備注: 根據(jù)元素的line-height屬性而定
屬性值含義如下:
baseline:與元素的基線對(duì)齊。
middle:與元素中部對(duì)齊。
sub:字下沉。
super:字上升。
text-top:文本頂部對(duì)齊。
text-bottom:文本底部對(duì)齊。
Top:和本行位置最高元素對(duì)齊。
Bottom:和本行位置最低元素對(duì)齊。
Visibility屬性:
該屬性用于控制元素的顯示或隱藏:
屬性名稱: 'visibility'
屬性值: inherit | visible | hidden
初始值: inherit
適合對(duì)象: 所有元素
是否繼承: 如果該值為inherit,則繼承父元素屬性
百分比備注: 被禁止
4、顏色和背景(Color and Background)屬性:
這里介紹有關(guān)CSS中前景色和背景顏色、圖片的設(shè)定方法。
color屬性:
color屬性用于設(shè)定元素的前景色:
屬性名稱: 'color'
屬性值: <color>
初始值: 根據(jù)用戶的初始值而定
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
color屬性的值可以是十六進(jìn)制數(shù)值、rgb()函數(shù)或CSS承認(rèn)的顏色名稱。如:
EM { color: red }
EM { color: rgb(255,0,0) }
背景屬性:
background-color屬性用于設(shè)定背景色,初始值為透明:
屬性名稱: 'background-color'
屬性值: <color> | transparent
初始值: transparent
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
backgroud-image屬性用于設(shè)定背景的圖片:
屬性名稱: 'background-image'
屬性值: <url> | none
初始值: none
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
其中url可以為絕對(duì)地址,也可以是相對(duì)地址,例如:
BODY { background-image: url(marble.gif) }
P { background-image: none }
以上兩個(gè)屬性利用普通的HTML屬性也可以實(shí)現(xiàn),下面的屬性是CSS對(duì)原有HTML的擴(kuò)展。
background-repeat屬性用來(lái)描述背景圖片的重復(fù)排列方式:
屬性名稱: 'background-repeat'
屬性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 被禁止
其中屬性值的含義為:
repeat:沿X軸和Y軸兩個(gè)方向重復(fù)顯示圖片。
repeat-x:沿X軸方向重復(fù)圖片。
repeat-y:沿Y軸方向重復(fù)圖片。
none:不重復(fù)圖片。
例如:
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/*表示沿Y軸重復(fù)圖片"pendant.gif",其余部分以紅色為背景色*/
background-attachment屬性表示在滾動(dòng)整個(gè)文檔時(shí),背景圖片的顯示方式。它的屬性值有兩種:fixed和scroll,fixed相當(dāng)于IE4里的水印效果,也就是說(shuō)在拖動(dòng)文檔時(shí),背景相對(duì)是靜止的,scroll則和文檔一起滾動(dòng)。
background-position屬性用來(lái)指定背景圖片顯示的位置:
屬性名稱: 'background-position'
屬性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
適合對(duì)象: 容器元素
是否繼承: no
百分比備注: refer to the size of the element itself
其中屬性值含義為:
"top left"和"left top"表示"0% 0%"。
"top"、"top center"和"center top"表示"50% 0%"。
"right top"和"top right"都表示"100% 0%"。
"left"、"left center"和"center left"表示"0% 50%"。
"center"和"center center"表示"50% 50%"。
"right"、"right center"和"center right"都表示"100% 50%"。
"bottom left"和"left bottom"表示"0% 100%"。
"bottom"、"bottom center"和"center bottom"都表示"50% 100%"
"bottom right"和"right bottom"表示"100% 100%"。
例如:
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屬性是以上背景屬性的快捷方式,屬性和順序如下:
屬性名稱: 'background'
屬性值: <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>
適合對(duì)象: 所有元素
是否繼承: no
百分比備注: 只在background-position中容許使用
5、字體(Font)屬性:
這里定義了關(guān)于字體的各種屬性。
font-family屬性定義字體的名稱,可以是一個(gè)字體的名稱,也可以是一類字體的名稱,字體的名稱一定要和計(jì)算機(jī)系統(tǒng)里的完全一樣:
屬性名稱: 'font-family'
屬性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值: 根據(jù)用戶定義而定
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
有些計(jì)算機(jī)系統(tǒng)里如果沒有樣式單要求的字體,可以再設(shè)一個(gè)次字體以備萬(wàn)一。例如:
BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name是指確定的某字體,如Heisi Mincho W3,generic-family指某一類字體,如serif。
font-style屬性描述字體的傾斜程度:
屬性名稱: 'font-style'
屬性值: normal | italic | oblique
初始值: normal
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
font-variant屬性:
屬性名稱: 'font-variant'
屬性值: normal | small-caps
初始值: normal
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
一個(gè)使用了small-caps屬性的元素中的小寫字母看起來(lái)要比正常的大寫字母小一些。
font-weight屬性用來(lái)描述字重。
屬性名稱: 'font-weight'
屬性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
100到900代表9種不同的字重,400代表normal,700代表bold,900是最重的字體,bolder或lighter表示字體的字重比父元素高或低一級(jí),比如父元素字重為400,則bolder代表字重500,如果父元素本身字重為900,那么bolder后,字重還是900,同樣的lighter也一樣。有些字體并沒有100到900那么全的字重,也許是從300到700,那么字重的最小和最大值也為300到700。例如:
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
font-size屬性描述字體的大?。?/span>
屬性名稱: 'font-size'
屬性值: <absolute-size> | <relative-size> | <length> | <percentage>
初始值: medium
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: relative to parent element's font size
該屬性可以使用絕對(duì)大小,也可以使用相對(duì)大小,其中絕對(duì)大小可以使用,如下關(guān)鍵字表示:
xx-small | x-small | small | medium | large | x-large | xx-large 分別代表最小、較小、小、中等、大、較大和最大。相對(duì)大小可以使用:larger 或smaller描述。例如:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Font屬性是以上屬性的快捷方式,屬性如下:
屬性名稱: 'font'
屬性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 只在font-size使用
例如:
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文檔中的文本顯示情況。
text-indent屬性描述文本的縮進(jìn)程度:
屬性名稱: 'text-indent'
屬性值: <length> | <percentage>
初始值: 0
適合對(duì)象: 容器元素
是否繼承: yes
百分比備注: 根據(jù)父元素的寬度而定
下面的例子表明段落的縮進(jìn)值為3em:
P { text-indent: 3em }
Alignment屬性表明文本的對(duì)齊方式:
屬性名稱: 'alignment'
屬性值: left | right | center | justify
初始值: 依照用戶定義
適合對(duì)象: block-level elements
是否繼承: yes
百分比備注: 被禁止
text-decoration屬性描述對(duì)文本的修飾方法:
屬性名稱: 'text-decoration'
屬性值: none | [ underline || overline || line-through || blink ]
初始值: none
適合對(duì)象: 所有元素
是否繼承: no (see clarification below)
百分比備注: 被禁止
屬性值含義分別為:
underline:下劃線。
overline:上劃線。
line-through:刪除線。
blink:閃爍(如同Navigator中的blink標(biāo)記的功能)
text-shadow屬性可以為文本加入陰影的特效:
屬性名稱: 'text-shadow'
屬性值: none | <color> [, <color> ]*
初始值: none
適合對(duì)象: all
是否繼承: No
百分比備注: 只在描述透明度時(shí)有效
例如:
P { text-shadow: black }
上例將在文本的右下方顯示黑色陰影,另外陰影將增大BOX的面積。
letter-spacing屬性表明文本的字間距:屬性名稱: 'letter-spacing'
屬性值: normal | <length> | auto
初始值: normal
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
例如:
BLOCKQUOTE { letter-spacing: 0.1em }
word-spacing屬性表明文本中單詞間距:
屬性名稱: 'word-spacing'
屬性值: normal | <length>
初始值: normal
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
例如:
H1 { word-spacing: 1em }
text-transform屬性可以將BOX內(nèi)的文本按指定的大寫或小寫形式顯示:
屬性名稱: 'text-transform'
屬性值: capitalize | uppercase | lowercase | none
初始值: none
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
屬性值含義為:
capitalize:把BOX中的每句句首字母變成大寫。
uppercase:把BOX中所有的字母變成大寫。
lowercase:把BOX中所有的字母變成小寫。
White-space屬性描述如何顯示文本中的空格,在HTML中,空格是被省略的,也就是說(shuō)你在一個(gè)段落標(biāo)記的開頭無(wú)論輸入多少個(gè)空格都是無(wú)效的,要輸入空格有兩個(gè)方法,一是直接輸入空格的代碼" ",或者使用<pre>標(biāo)記,CSS中也制定了類似于pre的屬性:
屬性名稱: 'white-space'
屬性值: normal | pre | nowrap
初始值: normal
適合對(duì)象: 容器元素
是否繼承: yes
百分比備注: 被禁止
例如:
UL { list-style: upper-roman inside } /* 對(duì)任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對(duì)任何UL內(nèi)部的UL標(biāo)記有效*
7、列表屬性:
這里的屬性用來(lái)描述列表(list)的一系列屬性。
list-style-type屬性描述用于列表每一項(xiàng)前使用的符號(hào):
屬性名稱: 'list-style-type'
屬性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值: disc
適合對(duì)象: 列表元素
是否繼承: yes
百分比備注: 被禁止
屬性值含義為:
disc:圓餅形。
circle:空心圓形。
square:方形。
decimal:十進(jìn)制數(shù)值。
lower-roman:小寫羅馬數(shù)字。
upper-roman:大寫羅馬數(shù)字。
lower-alpha:小寫希臘字母。
upper-alpha:大寫希臘字母。
例如:
<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
</BODY>
還可以利用list-style-image把列表前面的符號(hào)換為圖形:
屬性名稱: 'list-style-image'
屬性值: <url> | none
初始值: none
適合對(duì)象: 列表元素
是否繼承: yes
百分比備注: 被禁止
<url>可以是絕對(duì)地址,也可以是相對(duì)地址。
list-style-position屬性用于描述列表的位置顯示:
屬性名稱: 'list-style-position'
屬性值: inside | outside
初始值: outside
適合對(duì)象: 列表元素
是否繼承: yes
百分比備注: 被禁止
屬性值outside和inside分別表示在BOX外部顯示或內(nèi)部顯示,例如:
<STYLE type="text/css">
UL { list-style: outside }
UL.compact { list-style: inside } </STYLE> <UL>
<LI>first list item comes first
<LI>second list item comes second
</UL>
<UL class=compact>
<LI>first list item comes first
<LI>second list item comes second
</UL>
list-style屬性為以上屬性的快捷方式:
屬性名稱: 'list-style'
屬性值: <'list-style-type'> || <'list-style-position'> || <'list-style-image'>
初始值: no
適合對(duì)象: 列表元素
是否繼承: yes
百分比備注: 被禁止
例如:
UL { list-style: upper-roman inside } /* 對(duì)任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對(duì)任何UL內(nèi)部的UL標(biāo)記有效*/
PRE { white-space: pre }
P { white-space: normal
8、表格屬性:
由于表格中的大部分屬性已經(jīng)在以上的各類屬性中探討過(guò)了,所以這里只有兩個(gè)屬性介紹:
row-span屬性描述表格跨越的行的數(shù)目:
屬性名稱: 'row-span'
屬性值: <integer>
初始值: 1
適合對(duì)象: 表格元素
是否繼承: no
百分比備注: 被禁止
column-span屬性描述表格跨越的列的數(shù)目:
屬性名稱: 'column-span'
屬性值: <integer>
初始值: 1
適合對(duì)象: 表格元素
是否繼承: no
百分比備注: 被禁止
9、用戶界面屬性:
cursor屬性,用戶可以指定在某個(gè)元素上要使用的光標(biāo)形狀:
屬性名稱: 'cursor'
屬性值: auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | <url>
初始值: auto
適合對(duì)象: 所有元素
是否繼承: yes
百分比備注: 被禁止
屬性值分別代表鼠標(biāo)指針在windows操作里的各種形狀,另外還可以指定指針圖標(biāo)的url地址,不過(guò)CSS還暫時(shí)不支持ani動(dòng)畫光標(biāo)。
結(jié)束語(yǔ):
到此,所有關(guān)于CSS現(xiàn)有的屬性都介紹完了(還有一些關(guān)于聽覺方面的樣式單,就不再作介紹),本文也該結(jié)束了,雖然現(xiàn)在支持樣式單的瀏覽器種類還不多,但也占到了大半,樣式單遲早會(huì)成為瀏覽器的統(tǒng)一標(biāo)準(zhǔn),原因有兩個(gè):一、樣式單是W3C唯一接受的樣式標(biāo)準(zhǔn),而且沒有任何跡象表明W3C會(huì)把Javascript樣式單作為樣式單標(biāo)準(zhǔn);二則是CSS有效的解決了把事件引入元素的問題,配合腳本程序,是動(dòng)態(tài)HTML不可缺少的一部分,嘗試著用樣式單建立Web頁(yè),你會(huì)發(fā)現(xiàn)它真的很方便。希望我的這些努力能為你熟練掌握樣式單盡一點(diǎn)力。