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

填充距屬性
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 outset red">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(top right 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,則繼承父元素屬性
百分比備註: 被禁止

4、顏色和背景(Color and Background)屬性:

這裏介紹有關CSS中前景色和背景顏色、圖片的設定方法。

color屬性:

color屬性用於設定元素的前景色:

屬性名稱: 'color'
屬性值: <color>
初始值: 根據用戶的初始值而定
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

color屬性的值可以是十六進制數值、rgb()函數或CSS承認的顏色名稱。如:

EM { color: red }
EM { color: rgb(255,0,0) }

背景屬性:

background-color屬性用於設定背景色,初始值爲透明:

屬性名稱: 'background-color'
屬性值: <color> | transparent
初始值: transparent
適合對象: 所有元素
是否繼承: no
百分比備註: 被禁止

backgroud-image屬性用於設定背景的圖片:

屬性名稱: 'background-image'
屬性值: <url> | none
初始值: none
適合對象: 所有元素
是否繼承: no
百分比備註: 被禁止

其中url可以爲絕對地址,也可以是相對地址,例如:

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

以上兩個屬性利用普通的HTML屬性也可以實現,下面的屬性是CSS對原有HTML的擴展。
background-repeat屬性用來描述背景圖片的重複排列方式:

屬性名稱: 'background-repeat'
屬性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
適合對象: 所有元素
是否繼承: no
百分比備註: 被禁止

其中屬性值的含義爲:
repeat:沿X軸和Y軸兩個方向重複顯示圖片。
repeat-x:沿X軸方向重複圖片。
repeat-y:沿Y軸方向重複圖片。
none:不重複圖片。

例如:

BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/*表示沿Y軸重複圖片"pendant.gif",其餘部分以紅色爲背景色*/

background-attachment屬性表示在滾動整個文檔時,背景圖片的顯示方式。它的屬性值有兩種:fixed和scroll,fixed相當於IE4裏的水印效果,也就是說在拖動文檔時,背景相對是靜止的,scroll則和文檔一起滾動。

background-position屬性用來指定背景圖片顯示的位置:

屬性名稱: 'background-position'
屬性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left | center | right]
初始值: 0% 0%
適合對象: 容器元素
是否繼承: 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'>
適合對象: 所有元素
是否繼承: no
百分比備註: 只在background-position中容許使用

5、字體(Font)屬性:

這裏定義了關於字體的各種屬性。

font-family屬性定義字體的名稱,可以是一個字體的名稱,也可以是一類字體的名稱,字體的名稱一定要和計算機系統裏的完全一樣:

屬性名稱: 'font-family'
屬性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值: 根據用戶定義而定
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

有些計算機系統裏如果沒有樣式單要求的字體,可以再設一個次字體以備萬一。例如:

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
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

font-variant屬性:

屬性名稱: 'font-variant'
屬性值: normal | small-caps
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

一個使用了small-caps屬性的元素中的小寫字母看起來要比正常的大寫字母小一些。

font-weight屬性用來描述字重。

屬性名稱: 'font-weight'
屬性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

100到900代表9種不同的字重,400代表normal,700代表bold,900是最重的字體,bolder或lighter表示字體的字重比父元素高或低一級,比如父元素字重爲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屬性描述字體的大小:

屬性名稱: 'font-size'
屬性值: <absolute-size> | <relative-size> | <length> | <percentage>
初始值: medium
適合對象: 所有元素
是否繼承: yes
百分比備註: relative to parent element's font size

該屬性可以使用絕對大小,也可以使用相對大小,其中絕對大小可以使用,如下關鍵字表示:

xx-small | x-small | small | medium | large | x-large | xx-large 分別代表最小、較小、小、中等、大、較大和最大。相對大小可以使用: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'> ]
適合對象: 所有元素
是否繼承: 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屬性描述文本的縮進程度:

屬性名稱: 'text-indent'
屬性值: <length> | <percentage>
初始值: 0
適合對象: 容器元素
是否繼承: yes
百分比備註: 根據父元素的寬度而定

下面的例子表明段落的縮進值爲3em:

P { text-indent: 3em }

Alignment屬性表明文本的對齊方式:

屬性名稱: 'alignment'
屬性值: left | right | center | justify
初始值: 依照用戶定義
適合對象: block-level elements
是否繼承: yes
百分比備註: 被禁止

text-decoration屬性描述對文本的修飾方法:

屬性名稱: 'text-decoration'
屬性值: none | [ underline || overline || line-through || blink ]
初始值: none
適合對象: 所有元素
是否繼承: no (see clarification below)
百分比備註: 被禁止

屬性值含義分別爲:
underline:下劃線。
overline:上劃線。
line-through:刪除線。
blink:閃爍(如同Navigator中的blink標記的功能)

text-shadow屬性可以爲文本加入陰影的特效:

屬性名稱: 'text-shadow'
屬性值: none | <color> [, <color> ]*
初始值: none
適合對象: all
是否繼承: No
百分比備註: 只在描述透明度時有效

例如:

P { text-shadow: black }

上例將在文本的右下方顯示黑色陰影,另外陰影將增大BOX的面積。

letter-spacing屬性表明文本的字間距:屬性名稱: 'letter-spacing'

屬性值: normal | <length> | auto
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

例如:

BLOCKQUOTE { letter-spacing: 0.1em }

word-spacing屬性表明文本中單詞間距:

屬性名稱: 'word-spacing'
屬性值: normal | <length>
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

例如:

H1 { word-spacing: 1em }

text-transform屬性可以將BOX內的文本按指定的大寫或小寫形式顯示:

屬性名稱: 'text-transform'
屬性值: capitalize | uppercase | lowercase | none
初始值: none
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

屬性值含義爲:
capitalize:把BOX中的每句句首字母變成大寫。
uppercase:把BOX中所有的字母變成大寫。
lowercase:把BOX中所有的字母變成小寫。

White-space屬性描述如何顯示文本中的空格,在HTML中,空格是被省略的,也就是說你在一個段落標記的開頭無論輸入多少個空格都是無效的,要輸入空格有兩個方法,一是直接輸入空格的代碼"&nbsp;",或者使用<pre>標記,CSS中也制定了類似於pre的屬性:

屬性名稱: 'white-space'
屬性值: normal | pre | nowrap
初始值: normal
適合對象: 容器元素
是否繼承: yes
百分比備註: 被禁止

例如:

UL { list-style: upper-roman inside } /* 對任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*


7、列表屬性:

這裏的屬性用來描述列表(list)的一系列屬性。

list-style-type屬性描述用於列表每一項前使用的符號:

屬性名稱: 'list-style-type'
屬性值: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初始值: disc
適合對象: 列表元素
是否繼承: yes
百分比備註: 被禁止

屬性值含義爲:
disc:圓餅形。
circle:空心圓形。
square:方形。
decimal:十進制數值。
lower-roman:小寫羅馬數字。
upper-roman:大寫羅馬數字。
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把列表前面的符號換爲圖形:

屬性名稱: 'list-style-image'
屬性值: <url> | none
初始值: none
適合對象: 列表元素
是否繼承: yes
百分比備註: 被禁止

<url>可以是絕對地址,也可以是相對地址。

list-style-position屬性用於描述列表的位置顯示:

屬性名稱: 'list-style-position'
屬性值: inside | outside
初始值: outside
適合對象: 列表元素
是否繼承: yes
百分比備註: 被禁止

屬性值outside和inside分別表示在BOX外部顯示或內部顯示,例如:

<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
適合對象: 列表元素
是否繼承: yes
百分比備註: 被禁止

例如:

UL { list-style: upper-roman inside } /* 對任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對任何UL內部的UL標記有效*/

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


8、表格屬性:

由於表格中的大部分屬性已經在以上的各類屬性中探討過了,所以這裏只有兩個屬性介紹:

row-span屬性描述表格跨越的行的數目:

屬性名稱: 'row-span'
屬性值: <integer>
初始值: 1
適合對象: 表格元素
是否繼承: no
百分比備註: 被禁止

column-span屬性描述表格跨越的列的數目:

屬性名稱: 'column-span'
屬性值: <integer>
初始值: 1
適合對象: 表格元素
是否繼承: no
百分比備註: 被禁止


9、用戶界面屬性:

cursor屬性,用戶可以指定在某個元素上要使用的光標形狀:

屬性名稱: '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
適合對象: 所有元素
是否繼承: yes
百分比備註: 被禁止

屬性值分別代表鼠標指針在windows操作裏的各種形狀,另外還可以指定指針圖標的url地址,不過CSS還暫時不支持ani動畫光標。

結束語:

到此,所有關於CSS現有的屬性都介紹完了(還有一些關於聽覺方面的樣式單,就不再作介紹),本文也該結束了,雖然現在支持樣式單的瀏覽器種類還不多,但也佔到了大半,樣式單遲早會成爲瀏覽器的統一標準,原因有兩個:一、樣式單是W3C唯一接受的樣式標準,而且沒有任何跡象表明W3C會把Javascript樣式單作爲樣式單標準;二則是CSS有效的解決了把事件引入元素的問題,配合腳本程序,是動態HTML不可缺少的一部分,嘗試着用樣式單建立Web頁,你會發現它真的很方便。希望我的這些努力能爲你熟練掌握樣式單盡一點力。


本文來自CSDN博客,轉載請標明出處:http://blog.csdn.net/ccaakkee/archive/2007/10/29/1853848.aspx

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章