css屬性標籤大全

 

css屬性標籤大全

標籤： csstransitionscrollfilterborderfloat

2011-07-12 12:54 4692人閱讀 評論(0) 收藏 舉報

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。

CSS樣式屬性

一、字體屬性(type)

font-family(使用什麼字體)

font-style(字體的樣式，是否斜體)：normal/italic/oblique

font-variant(字體大小寫)：normal/small-caps

font-weight(字體的粗細)：normal/bold/bolder/lithter

font-size(字體的大小)：absolute-size/relative-size/length/percentage

 

二、顏色和背景屬性(backgroud)

color(定義前景色，例如：p{color:red})

background-color(定義背景色)

background-image(定義背景圖片)

background-repeat(背景圖案重複方式)：repeat-x/repeat-y/no-repeat

background-attachment(設置滾動)：scroll(滾動)/fixe(固定的)

background-position(背景圖案的初始位置)：percentage/length/top/left/right/bottom

 

三、文本屬性：(block)

定義間距：

word-spacing(單詞之間的距離)

letter-spacing(字母之間的距離)

text-decoration(定義文字的裝飾)：nore/underline/overline/line-through/blink

vertical-align(元素在垂直方向的位置)：baseline(基線)/sub/super/top/text-top/middle/bottom/text-bottom

text-transform(使文本轉換爲其它方式)：capitalize(大寫)/uppercase(首字母大寫)/lowercase(小寫)/none

text-align(文字的對齊)：left/right/center/justify

text-indent(文本的首行縮進)length/percentage

line-height(文本的行高):normal/numbet/lenggth/percentage(百分比)

定義超連接：

a：link {color:green;text-decoration:nore}(未訪問過的狀態)

a：visited {color:ren;text-decoration:underline;16pt}(訪問過的狀態)

a:hover {color:blue;text-decoration:underline;16pt}(鼠標激活的狀態)

 

四、塊屬性(block)

邊距屬性：

margin-top(設置頂邊距)

margin-right(設置右邊距)

margin-bottom(設置底邊距)

margin-left(設置左邊距)

填充距屬性：

padding-top設置頂端真充距)

padding-right設置頂端真充距)

padding-bottom設置頂端真充距)

padding-left設置頂端真充距)

 

五、邊框屬性(border)

border-top-width(頂端邊框寬度)

border-right-width(右端邊框寬度)

border-bottom-width(底端邊框寬度)

border-left-width(d左邊框寬度)

border-width(一次定義邊框寬度)

border-color(設置邊框顏色)

border-style(設置邊框樣式)

border-top(一次定義頂端各類屬性)

border-right(一次定義右端各類屬性)

border-bottom(一次定義底端各類屬性)

border-left(一次定義左端各類屬性)

圖文混排：

width(定義寬度屬性)

height(定義高度屬性)

float(文字環繞在一個元素的四周)

clear(定義某一邊是否有環繞)

 

六、項目符號和編號(list)

display(定義是否顯示)

white-space(怎樣處理空白部分)：normal/pre/nowrap

list-style-type(在列表前加項目符號)disc(圓點)/circle(圈)/square（方形）

/decimal（阿拉伯數字）/lower-roman(小寫羅馬數字)/upper-roman(大寫羅馬數字)/lower-alpha(小寫英文字母)/upper-alpha(大寫英文字母)/nore

list-style-tyle(在列表前加圖案):<url>/none

list-style-position(決定列表項中第二行的起邕位置)

list-style(一次性定義全部屬性)

 

七、定位（positioning） 即層屬性

Type：設定對象的定位方式。

有三種方式：Absolute（絕對定位）、Relative（相對定位）、Static（無特殊定位）。相對應的CSS屬性是」position」。 

Visibility：設定對象定位層的最初顯示狀態。有三種狀態：Inherit（繼承父層的顯示屬性）、Visible（對象可視）、Hidden隱藏對象。相對應的CSS屬性是」visibility」。 

Z-Index：設置對象的層疊順序。編號較大的層會顯示在編號較小的層上邊。變量值能夠是正值也能夠是負值。相對應的CSS屬性是」z-index」。 

Overflow：設置若是層的內容超出了層的大小時如何處理。有四種處理方式：visible，增長層的大小，從而將層的全部內容顯示出來；hidden，保持層的大小不變，將超出層的內容剪裁掉；Scroll，老是顯示滾動；Auto，只有在內容超出層的邊界時才顯示滾動條。相對應的CSS屬性是」overflow」。 Placement：設置對象定位層的位置和大小。能夠分別設置left（左邊定位）、top（頂部定位）、width（寬）、height（高）。相對應的CSS屬性分別是」left; top; width; height」。Clip：定義定位層的可視區域。區域外的部分爲不可視區，爲透明的。能夠理解爲在定位層上放一個矩形遮罩的效果。相對應的CSS屬性是」clip」。

 

八、擴展（Extensions） 

Pagebreak：在打印的時候強迫在樣式控制的對象先後換頁。

Before：設置對象前出現的頁分割符。設置爲always時，始終在對象以前插入頁分割符。相對應的CSS屬性是」page-break-before」。

After：設置對象後出現的頁分割符。設置爲always時，始終在對象以後插入頁分割符。相對應的CSS屬性是」'>。

注意：以上IE5僅支持always值和空白值（null）。 

Cursor：當鼠標滑過樣式控制的對象時改變鼠標形狀。能夠設置爲hand（手型）、crosshair（「十」型）、text （「I」型）、wait（等待）、default（默認）、help（幫助）、e-resize（東箭頭）、ne-resize（東北箭頭）、n-resize（北箭頭）、nw-resize（西北箭頭）、w-resize（西箭頭）、sw-resize（西南箭頭）、s-resize（南箭頭）、se-resize（東南箭頭）和auto（自動）。 

 

CSS濾鏡屬性

 

Filter：在樣式中加上濾鏡特效。因爲此屬性內容比較多，咱們將到下一章單獨對濾鏡介紹。

1.Alpha：設置透明度

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?) 

Opacity：透明度級別，範圍是0-100，0表明徹底透明，100表明徹底不透明。FinishOpacity：設置漸變的透明效果時，用來指定結束時的透明度，範圍也是0 到 100。Style：設置漸變透明的樣式，值爲0表明統一形狀、1表明線形、2表明放射狀、3表明長方形。StartX和StartY：表明漸變透明效果的開始X和Y座標。 FinishX和FinishY：表明漸變透明效果結束X和Y 的座標。 

2.BlendTrans：圖像之間的淡入和淡出的效果 

BlendTrans(Duration=?) Duration：淡入或淡出的時間。注意：這個濾鏡必須配合JS創建圖片序列，才能作出圖片間效果。

3.Blru：創建模糊效果 

Blur(Add=?, Direction=?, Strength=?) Add：是否單方向模糊，此參數是一個布爾值，true（非0）或false（0）。 Direction：設置模糊的方向，其中0度表明垂直向上，而後每45度爲一個單位。 Strength：表明模糊的象素值。 

4.Chroma：把指定的顏色設置爲透明

Chroma(Color=?) Color：是指要設置爲透明的顏色。

5.DropShadow：創建陰影效果 

DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定陰影的顏色。OffX：指定陰影相對於元素在水平方向偏移量，整數。 OffY：指定陰影相對於元素在垂直方向偏移量，整數。 Positive：是一個布爾值，值爲true（非0）時，表示爲創建外陰影；爲false(0)，表示爲創建內陰影。 

6.FlipH：將元素水平反轉 

7.FlipV：將元素垂直反轉 

8.Glow：創建外發光效效果 

Glow(Color=?, Strength=?) 

Color：是指定發光的顏色。 

Strength：光的強度，能夠是1到255之間的任何整數，數字越大，發光的範圍就越大。

9.Gray：去掉圖像的色彩，顯示爲黑白圖象 

10.　　Invert：反轉圖象的顏色，產生相似底片的效果 

11.　　Light：放置光源的效果，能夠用來模擬光源在物體上的投影效果 注意：此效果須要用JS設置光的位置和強度。

12.　　Mask：創建透明遮罩 

Mask(Color=?) Color：設置底色，讓對象遮住底色的部分透明。

13.　　RevealTrans：創建切換效果

RevealTrans(Duration=?, Transition=?) 

Duration：是切換時間，以秒爲單位。 

Transtition：是切換方式，可設置爲從0到23。

注意：若是作頁面間的切換效果，能夠在<head>區加上一行代碼：<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。若是用在頁面裏的元素必須配合JS使用。

14.　　Shadow：創建另外一種陰影效果 Shadow(Color=?, Direction=?) Color：是指陰影的顏色。 

Direction：是設置投影的方向，0度表明垂直向上，而後每45度爲一個單位。 

15.　　Wave：波紋效果 

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。 Freq：設置波動的個數。LightStrength：設置波浪效果的光照強度，從0到100。0表示最弱，100表示最強。 Phase：波浪的起始相角。從0到100的百分數值。（例如：25至關於90度，而50至關於180度。） Strength：設置波浪搖擺的幅度。 

16.　　Xray：顯現圖片的輪廓，X光片效果 

注意：在使用CSS濾鏡時，必須使用在有區域的元素，好比表格，圖片等。而文本，段落這樣沒有區域的元素不能使用CSS濾鏡，對這樣的元素咱們能夠設置元素的Height和Width樣式或座標來實現。"