日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

css屬性列表和屬性值含義

 Long_way 2008-02-20
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

邊框?qū)傩?/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

分級(jí)屬性
Display
White-space
List-style-type
List-style-image
List-style-position
List-style

鼠標(biāo)(Cursor)屬性
屬性含義


使用什么字體
字體是否斜體
是否用小體大寫
字體的粗細(xì)
字體的大小



定義前景色
定義背景色
定義背景圖案
重復(fù)方式
設(shè)置滾動(dòng)
初始位置



單詞之間的間距
字母之間的間距
文字的裝飾樣式

垂直方向的位置

文本轉(zhuǎn)換

對(duì)齊方式
首行的縮進(jìn)方式
文本的行高



頂端邊距
右側(cè)邊距
底端邊距
左側(cè)邊距


頂端填充距
右側(cè)填充距
底端填充距
左側(cè)填充距


頂端邊框?qū)挾?br>右側(cè)邊框?qū)挾?br>底端邊框?qū)挾?br>左側(cè)邊框?qū)挾?br>一次定義寬度
設(shè)置邊框顏色
設(shè)置邊框樣式
一次定義頂端
一次定義右側(cè)
一次定義底端
一次定義左側(cè)
定義寬度屬性
定義高度屬性
文字環(huán)繞
哪一邊環(huán)繞


定義是否顯示
怎樣處理空白
加項(xiàng)目編號(hào)
加圖案
第二行起始位置
一次定義列表


自動(dòng)
定位“十”字
默認(rèn)指針
手形
移動(dòng)
箭頭朝右方
箭頭朝右上方
箭頭朝左上方
箭頭朝上方
箭頭朝右下方
箭頭朝左下方
箭頭朝下方
箭頭朝左方
文本“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)類型

樣式單的一個(gè)最重要的特點(diǎn)就是它可以作用于多種媒體,比如頁(yè)面、屏幕、電子合成器等等。特定的屬性只能作用于特定的媒體,如"font-size"屬性只對(duì)可卷動(dòng)的媒體類型有效(屏幕)。

聲明一個(gè)媒體屬性可以用@import@media引入:

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

也可以在文檔標(biāo)記中引入媒體:

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

可以看出,@import@media的區(qū)別在于,前者引入外部的樣式單用于媒體類型,后者直接引入媒體屬性。@import的使用方法是@import加樣式單文件的URL地址再加媒體類型,可以多個(gè)媒體共用一個(gè)樣式單,媒體類型之間用","分割符分開。@media用法則是把媒體類型放在前面,其他規(guī)則和rule-set基本一樣。下面列出各種媒體類型:

SCREEN:指計(jì)算機(jī)屏幕。
PRINT:指用于打印機(jī)的不透明介質(zhì)。
PROJECTION:指用于顯示的項(xiàng)目。
BRAILLE:盲文系統(tǒng),指有觸覺效果的印刷品。
AURAL:指語(yǔ)音電子合成器。
TV:指電視類型的媒體。
HANDHELD:指手持式顯示設(shè)備(小屏幕,單色)
ALL:適合于所有媒體。

2、BOX模型(BOX Model)屬性

什么是BOX?CSSHTML中以<somesign>……</somesign>的部分稱為BOX(容器),BOX有三類屬性:paddingmarginborder。

Margin屬性:

Margin屬性分為margin-top、margin-right、margin-bottom、margin-leftmargin五個(gè)屬性,分別表示BOX里內(nèi)容離邊框的距離,它的屬性值是數(shù)值單位,可以是長(zhǎng)度、百分比或auto,margin甚至可以設(shè)為負(fù)值,造成BOXBOX之間的重疊顯示,關(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 } /*
上下margin1em,右左margin2em */
BODY { margin: 1em 2em 3em } /*
margin1em,右左margin2em,下margin3em*/

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-colorborder-style,而這些屬性下面又有分支。

border-width屬性:

border-width屬性又分為:border-top-widthborder-right-width、border-bottom-width、border-left-widthborder-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-colorborder-right-color、border-bottom-color、border-right-colorborder-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、insetoutset:顯示不同效果的3D邊框(根據(jù)color屬性)。

border屬性:

border屬性為Border的快捷方式,屬性值間用空格隔開,順序是"邊框?qū)挾?邊框樣式 邊框顏色",例如:

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

還可以用border-top、border-rightborder-bottom、border-left分別作為上右下左的快捷方式,屬性值順序同border屬性。

3、布局(Layout)屬性:

在以前的HTML里,元素的位置只能靠元素的依次排列覺得,而在CSS里你可以更精確的定位元素。Netscape曾提出過(guò)Layer標(biāo)記,它對(duì)于精確布局很有好處,但是并沒有被W3C承認(rèn),W3CCSS提出了類似于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
百分比備注: 被禁止


floatclear屬性:

HTML中圖片可以選擇飄浮的位置,現(xiàn)在BOX對(duì)象通過(guò)CSS對(duì)于也可以選擇飄浮的位置。改變BOXfloat屬性,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、bottomleft,屬性值為長(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ī)定BOXwidth屬性,可以使BOX的寬度不依靠它所包含的內(nèi)容的多少:

屬性名稱: 'width'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對(duì)象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的width而定

CSS中還提供了min-widthmax-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-heightmax-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-heightvertical-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í),背景圖片的顯示方式。它的屬性值有兩種:fixedscroll,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 W3generic-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
百分比備注: 被禁止

100900代表9種不同的字重,400代表normal700代表bold,900是最重的字體,bolderlighter表示字體的字重比父元素高或低一級(jí),比如父元素字重為400,則bolder代表字重500,如果父元素本身字重為900,那么bolder后,字重還是900,同樣的lighter也一樣。有些字體并沒有100900那么全的字重,也許是從300700,那么字重的最小和最大值也為300700。例如:

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
百分比備注: 被禁止

屬性值outsideinside分別表示在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)力。


    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多