說明:
屬性繼承 *不繼承 

   [ ]為適應元素類型 無[ ]標出為所有元素


字體
Font-family
Font-size 9 10 12 14 16 18 24 36 xx-small x-small small medium large x-large xx-large smaller larger
Color

Font-style normal italic oblique
Line-height
nomal
Font-weight
normal bold bolder lighter 100 200 300 400 500 600 700 800 900
Text-transform
capitalize uppercase lowercase none
Font-variant
normal small-caps
Text-decoration
none underline overline line-through blink
Font


背景
Background-color
Background
Background-image
Background-attachment fixed scroll
Background-repeat
no-repeat repeat repeat-x repeat-y
Background-position[塊、替換]


區塊
Word-spacing normal[]
Letter-spacing normal
Vertical-align baseline sub super top text-top middle bottom text-bottom[]

Text-align left right center justify[]
Text-indent[]
White-space normal pre nowrap[]
Display inline block list-item run-in compact marker table inline-table table-row-group table-header-ground table-footer-ground table-row table-column-ground table-column table-cell table-caption none

邊框

Border
Border-top-color
Border-top-style none solid dashed dotted double groove ridge inset outset
Border-top-width
thin medium thick
Border-top-Right

Border-top-Bottom
Border-top-Left
Border-top
Border-right
Border-bottom
Border-left
Border-color
Border-style
Border-width

方框
Width auto px pt in cm mm pc em ex %[塊、替]
Height auto[塊、替]
Float left right none
Clear
left right both none
Margin

Margin-top
Margin-right
Margin-bottom
Margin-left
Padding
Padding-top
Padding-right
Padding-bottom
Padding-left

列表
List-style-type disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha onne[顯示值為list-item的元素]
List-style-Image[顯示值為list-item的元素]
List-style-position inside outside[顯示值為list-item的元素]

定位
Position absolute relative static
Visiblility
visible hidden inherit
Height
auto
Left
auto
Top
auto
Right
auto
Bottom
auto
z-index auto[定位元素]

overflow visible hidden scroll auto[塊、替]
clip auto



說明:


基本類
color
設置文字顏色
#rgb
#rrggbb
rgb(255,255,255)
rgb(100%,100%,100%) H1{color:red}
H1{color:#f00}
H1{color:#ff0000}
H1{color:rgb(255,0,0)}
H1{color:rgb(100%,0%,0%)}

background-color
設置背景顏色 (格式同上)
BODY{background-color:red}
BODY{background-color:#f00}
BODY{background-color:#ff0000}
BODY{background-color:rgb(255,0,0)}
BODY{background-color:rgb(100%,0%,0%)} 

background-image
設置背景圖片

url(/imageURL) body{backround-image:url(/back.jpg);} 

background-repeat
設置背景圖片是否重複排列
repeat-x(X
軸重復排列
);
repeat-y(Y
軸重復排列
);
No-repeat(
不重復排列
) BODY{background-repeat:repeat-x;}
BODY{background-repeat:No-repeat;} 

background-attachment
設定背景圖片是否卷動 (默認為卷動)

scroll(
卷動)
fixed(
不卷動
) BODY{background-attachment:fixed;} 

background-position
設定背景圖片或背景顏色開始顯示的位置

top,buttom,left,right,center(
用關鍵字)
70px 10px(
用長度值
)
50% 30%(
用百分比
) BODY{background-position:right top;}
BODY{background-position:50px 10px;}
BODY{background-position:20% 50%;} 

background
定義背景綜合屬性,不要求順序,各屬性值以空格分開
BODY{background:#ffcc00 url(/bg.jpg) fixed center} 


字型類

font-family
設置字型屬性
取值可以是任何字型名稱,缺點為只能顯示瀏覽器內定字型,可以設多個以逗號
(,)分開,有空格的英文字型可用單引號或雙引號括起來。 
P{"COLOR: #000066;">宋體
,楷體,黑體
,"Time New Rom";} 

font-style
設定字型樣式
Normal(正常)
italic
objlique(斜體

P{font-style:italic;} 

font-variant
取值
Normal(默認)
small-caps(如果是中文字型則將字型縮小顯示,如果是英文則全部改為較小的大寫

H3{font-variant:small-caps;} 

font-weight
設定字體粗細

Normal(
默認),bold,lighter,border,100,200...900 
由于瀏覽器支持程度不同,一般只用normalbold兩種屬性。
 
P{font-weight:bold;} 

font-size
設定字體的大小

絕對大小:xx-small,x-small,small,mediumlarge,x-large,xx-large;
相對大小:
larger,smaller;
數字表示可用單位:磅(pt),像素(px),英寸(in),釐米
(cm);亦可用百分比表示。 
H2{font-size:36pt;} P{font-size:200%;} 

font
設定字型的綜合屬性,其順序如下

{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;} 


文字類

letter-spacing
設定文字間距
P{letter-spacing:5pt;} 

text-decoration
設定文字加上下劃線、刪除線等效果

none(
)
underline(
下劃線
)
overline(
上劃線
)
line-through(
刪除線


vertical-align
設定文字或圖片垂直方向的對齊方式

baseline:
默認值 
sub:
下標 
super:
上標 
top:
垂直向上對齊 
middle:
垂直居中 
bottom:
垂直向下對齊

text-transform
轉換英文字母大小寫

none:
默認值 
capitalize:
首字母大寫 
uppercase:
所有英文字母大寫 
lowercase:
所有英文字母小寫

text-align
設置文字的水平對齊方式

left:
左對齊 
right:
右對齊 
center:
水平居中 
justify:
左右對齊


text-indent
設定標記元素內文字的首行縮進或配合
margin-left屬性設定首行凸排

line-height
設定行高,聲明方式有標準行高、固定值表示法、百分比行高、字型大小比例行高等。
 


列表類

list-style-type
有序列表的編號方式(供<OL>標記使用)

none:
無編號 
decimal:
阿拉伯數字 
lower-roman:
小寫羅馬數字 
upper-roman:
大寫羅馬數字 
lower-alpha:
小寫英文字母 
upper-alpha:
大寫英文字母

list-style-type
無序列表的符號樣式(供<UL>使用)

none:
無符號 
disc:
實心圓符號 
circle:
空心圓符號 
square:
實心方形符號

list-style-image
無序列表的自定義符號樣式

格式:url(圖片名稱) UL{list-style-imag:url(/dd.gif);} 

list-style-position
設置列表清單符號縮排屬性

outside:
凸排 
inside:
縮排
 
UL{list-style-imag:url(/dd.gif); list-style-position:outside;} 

list-style
列表清單項目的綜合設定,屬性之間用空格隔開
UL{list-style-imag:url(/dd.gif) inside;} 


邊界及其相關類

margin
標記元素邊界值的綜合設定
亦可以用margin-topmargin-rightmargin-bottommargin-left分開設定各邊的邊界。
聲明4個值,其順序為上、右、下、左邊界,如:
DIV{margin:12pt 15pt 20pt 16pt;}
聲明3個值,其順序為上、右、下,缺少的左邊界取其對邊(右),如:
DIV{margin:12pt 15pt 16pt;}
聲明2個值,其順序為上、右,缺少的下、左邊界取其對邊,如:
DIV{margin:12pt 15pt;}
聲明1個值,則4個邊界同一個值,如:
DIV{margin:15pt;} 

padding
設定標記內容與標記邊框之間的留白的綜合設定(規則見margin屬性的範例)
也可分開設定padding-toppadding-rightpadding-bottompadding-left各值。
 

border-width
標記元素邊框寬度的綜合設定(規則類似margin屬性)
也可分開設定border-top-widthborder-right-widthborder-bottom-widthborder-left-width各值。(上、右、下、左)
 

border-color
標記元素邊框顏色的綜合設定(規則類似margin屬性)
顏色取值見
color屬性。也可分開設定border-top-colorborder-right-colorborder-bottom-colorborder-left-color各值。
 

border-style
標記元素邊框樣式的綜合設定(規則類似margin屬性)
邊框樣式有
solid,double,goove,ridge,inset,outset等。也可分開設定border-top-styleborder-right-styleborder-bottom-styleborder-left-style各值。
 

border
標記元素4個邊框的綜合設定
可以分別聲明邊框寬度、邊框樣式、和邊框顏色。
DIV{border:5pt solid #ff0000;}
width
設定標記元素的寬度。

height
設定標記元素的高度。
 

float
設定標記元素與文字間的相對位置(文字繞排方式)
none:以默認方式顯示;
left:
標記元素靠左,文字在右邊繞排;
right:
標記元素靠右,文字在左邊繞排; 

clear
設定標記元素與文字間的相對位置(與float不同的是標記元素兩邊都不繞排)

none:
以默認方式顯示;
left:
標記元素靠左,右邊無文字繞排;
right:
標記元素靠右,左邊無文字繞排; 


其他類

z-index
設定標記元素的堆疊層次
取值為整數,也可以是負數,數值大的在上層。
 

visibility
設定標記元素是否可見

inherit:
取默認值 
visible:
可見 
hidden:
不可見(隱藏)
 


arrow
arrow
    全站熱搜

    weedyc 發表在 痞客邦 留言(0) 人氣()