免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
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
邊框?qū)傩?div style="height:15px;">
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)屬性 屬性含義
使用什么字體
字體是否斜體
是否用小體大寫
字體的粗細
字體的大小
定義前景色
定義背景色
定義背景圖案
重復方式
設置滾動
初始位置
單詞之間的間距
字母之間的間距
文字的裝飾樣式
垂直方向的位置
文本轉(zhuǎn)換
對齊方式
首行的縮進方式
文本的行高
頂端邊距
右側(cè)邊距
底端邊距
左側(cè)邊距
頂端填充距
右側(cè)填充距
底端填充距
左側(cè)填充距
頂端邊框?qū)挾?div style="height:15px;">
右側(cè)邊框?qū)挾?div style="height:15px;">
底端邊框?qū)挾?div style="height:15px;">
左側(cè)邊框?qū)挾?div style="height:15px;">一次定義寬度
設置邊框顏色
設置邊框樣式
一次定義頂端
一次定義右側(cè)
一次定義底端
一次定義左側(cè)
定義寬度屬性
定義高度屬性
文字環(huán)繞
哪一邊環(huán)繞
定義是否顯示
怎樣處理空白
加項目編號
加圖案
第二行起始位置
一次定義列表
自動
定位“十”字
默認指針
手形
移動
箭頭朝右方
箭頭朝右上方
箭頭朝左上方
箭頭朝上方
箭頭朝右下方
箭頭朝左下方
箭頭朝下方
箭頭朝左方
文本“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的區(qū)別在于,前者引入外部的樣式單用于媒體類型,后者直接引入媒體屬性。@import的使用方法是@import加樣式單文件的URL地址再加媒體類型,可以多個媒體共用一個樣式單,媒體類型之間用","分割符分開。@media用法則是把媒體類型放在前面,其他規(guī)則和rule-set基本一樣。下面列出各種媒體類型:
SCREEN:指計算機屏幕。
PRINT:指用于打印機的不透明介質(zhì)。
PROJECTION:指用于顯示的項目。
BRAILLE:盲文系統(tǒng),指有觸覺效果的印刷品。
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里內(nèi)容離邊框的距離,它的屬性值是數(shù)值單位,可以是長度、百分比或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的邊框和內(nèi)容之間插入多少空間,和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規(guī)定的關鍵字,平常看不到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邊框(根據(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曾提出過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中圖片可以選擇飄浮的位置,現(xiàn)在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,屬性值為長度單位或百分數(shù):
屬性名稱: '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使用整數(shù)表示元素的前后位置,數(shù)值越大,就會顯示在相對靠前的位置,并且CSS同意在z-index中使用負數(shù)。
屬性名稱: 'z-index'
屬性值: auto|<integer>
初始值: auto
適合對象: 使用position屬性的元素
是否繼承: no
百分比備注: 被禁止
width屬性:
規(guī)定BOX的width屬性,可以使BOX的寬度不依靠它所包含的內(nèi)容的多少:
屬性名稱: 'width'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的width而定
在CSS中還提供了min-width和max-width屬性,使得BOX的寬度在最小寬度和最大寬度之間。
屬性名稱: 'min-width'
屬性值: <length> | <percentage>
初始值: 0
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的width而定
屬性名稱: 'max-width'
屬性值: <length> | <percentage>
初始值: 100%
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的width而定
height屬性:
相同的BOX還有height屬性來控制本身的高度:
屬性名稱: 'height'
屬性值: <length> | <percentage> | auto
初始值: auto
適合對象: 塊元素
是否繼承: no
百分比備注:根據(jù)父元素的height而定
在CSS中還提供了min-height和max-height屬性,使得BOX的高度在最小高度和最大高度之間。
屬性名稱: 'min-height'
屬性值: <length> | <percentage>
初始值: 0
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的height而定
屬性名稱: 'max-height'
屬性值: <length> | <percentage>
初始值: 100%
適合對象: all
是否繼承: no
百分比備注:根據(jù)父元素的height而定
overflow屬性:
在規(guī)定元素的寬度和高度時,如果元素的面積不足以顯示全部內(nèi)容的話就要用到overflow屬性:
屬性名稱: 'overflow'
屬性值: visible | hidden | scroll | auto
初始值: visible
適合對象: 元素的position屬性
是否繼承: no
百分比備注: 被禁止
屬性值含義如下:
visible:擴大面積以顯示所有內(nèi)容。
hidden:隱藏超出范圍的內(nèi)容。
scroll:在元素的右邊顯示一個滾動條。
auto:當內(nèi)容超出元素面積時,顯示滾動條。
clip屬性:
CSS還提供了一種clip屬性,可以把元素區(qū)域剪切成各種形狀,但目前提供的只有方形一種:
屬性名稱: 'clip'
屬性值: <shape> | auto
初始值: auto
適合元素: 元素的position屬性被設為absolute
是否繼承: no
百分比備注: 被禁止
<shape>值為rect(top right bottom left)。
line-height和vertical-align屬性:
line-height屬性可以規(guī)定元素內(nèi)部的行間距,使用長度單位或百分數(shù):
屬性名稱: 'line-height'
屬性值: normal | <number> | <length> | <percentage>
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備注:根據(jù)元素的字體大小而定
例如下面的例子,雖然表達方式不同,但結(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
適合對象: inline elements
適合繼承: no
百分比備注: 根據(jù)元素的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>
初始值: 根據(jù)用戶的初始值而定
適合對象: 所有元素
是否繼承: yes
百分比備注: 被禁止
color屬性的值可以是十六進制數(shù)值、rgb()函數(shù)或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屬性也可以實現(xiàn),下面的屬性是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屬性定義字體的名稱,可以是一個字體的名稱,也可以是一類字體的名稱,字體的名稱一定要和計算機系統(tǒng)里的完全一樣:
屬性名稱: 'font-family'
屬性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值: 根據(jù)用戶定義而定
適合對象: 所有元素
是否繼承: yes
百分比備注: 被禁止
有些計算機系統(tǒng)里如果沒有樣式單要求的字體,可以再設一個次字體以備萬一。例如:
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屬性描述字體的大?。?div style="height:15px;">屬性名稱: '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
百分比備注: 根據(jù)父元素的寬度而定
下面的例子表明段落的縮進值為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內(nèi)的文本按指定的大寫或小寫形式顯示:
屬性名稱: '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內(nèi)部的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:十進制數(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把列表前面的符號換為圖形:
屬性名稱: 'list-style-image'
屬性值: <url> | none
初始值: none
適合對象: 列表元素
是否繼承: yes
百分比備注: 被禁止
<url>可以是絕對地址,也可以是相對地址。
list-style-position屬性用于描述列表的位置顯示:
屬性名稱: 'list-style-position'
屬性值: inside | outside
初始值: outside
適合對象: 列表元素
是否繼承: 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
適合對象: 列表元素
是否繼承: yes
百分比備注: 被禁止
例如:
UL { list-style: upper-roman inside } /* 對任何UL有效*/
UL ~ UL { list-style: circle outside } /* 對任何UL內(nèi)部的UL標記有效*/
PRE { white-space: pre }
P { white-space: normal
8、表格屬性:
由于表格中的大部分屬性已經(jīng)在以上的各類屬性中探討過了,所以這里只有兩個屬性介紹:
row-span屬性描述表格跨越的行的數(shù)目:
屬性名稱: 'row-span'
屬性值: <integer>
初始值: 1
適合對象: 表格元素
是否繼承: no
百分比備注: 被禁止
column-span屬性描述表格跨越的列的數(shù)目:
屬性名稱: '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動畫光標。
結(jié)束語:
到此,所有關于CSS現(xiàn)有的屬性都介紹完了(還有一些關于聽覺方面的樣式單,就不再作介紹),本文也該結(jié)束了,雖然現(xiàn)在支持樣式單的瀏覽器種類還不多,但也占到了大半,樣式單遲早會成為瀏覽器的統(tǒng)一標準,原因有兩個:一、樣式單是W3C唯一接受的樣式標準,而且沒有任何跡象表明W3C會把Javascript樣式單作為樣式單標準;二則是CSS有效的解決了把事件引入元素的問題,配合腳本程序,是動態(tài)HTML不可缺少的一部分,嘗試著用樣式單建立Web頁,你會發(fā)現(xiàn)它真的很方便。希望我的這些努力能為你熟練掌握樣式單盡一點力。
本站僅提供存儲服務,所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
CSS屬性篇(八):布局屬性
css語法手冊
[分享]CSS全攻略
表格標記詳解★表格邊框css修飾語法
WEB前端開發(fā)技巧與注意事項
移動端開發(fā)的一些技巧
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服