1、字體屬性(type)
font-family(使用什么字體)
font-style(字體的樣式,是否斜體):normal/italic/oblique
font-variant(字體大小寫(xiě)):normal/small-caps
font-weight(字體的粗細):normal/bold/bolder/lithter
font-size(字體的大小):absolute-size/relative-size/length/percentage
2、顏色和背景屬性(backgroud)
color(定義前景色,例如:p{color:red})
background-color(定義背景色)
background-image(定義背景圖片)
background-repeat(背景圖案重復方式):repeat-x/repeat-y/no-repeat
background-attachment(設置滾動(dòng)):scroll(滾動(dòng))/fixe(固定的)
background-position(背景圖案的初始位置):percentage/length/top/left/right/bottom
3、文本屬性:(block)
定義間距:
word-spacing(單詞之間的距離)
letter-spacing(字母之間的距離)
text-decoration(定義文字的裝飾):nore/underline/overline/line-through/blink
vertical-align(元素在垂直方向的位置):baseline(基線(xiàn))/sub/super/top/text-top/middle/bottom/text-bottom
text-transform(使文本轉換為其它方式):capitalize(大寫(xiě))/uppercase(首字母大寫(xiě))/lowercase(小寫(xiě))/none
text-align(文字的對齊):left/right/center/justify
text-indent(文本的首行縮進(jìn))length/percentage
line-height(文本的行高):normal/numbet/lenggth/percentage(百分比)
定義超鏈接:
a:link {color:green;text-decoration:nore}(未訪(fǎng)問(wèn)過(guò)的狀態(tài))
a:visited {color:ren;text-decoration:underline;16pt}(訪(fǎng)問(wèn)過(guò)的狀態(tài))
a:hover {color:blue;text-decoration:underline;16pt}(鼠標激活的狀態(tài))
4、塊屬性(block)
邊距屬性:
margin-top(設置頂邊距)
margin-right(設置右邊距)
margin-bottom(設置底邊距)
margin-left(設置左邊距)
填充距屬性:
padding-top設置頂端真充距)
padding-right設置頂端真充距)
padding-bottom設置頂端真充距)
padding-left設置頂端真充距)
5、邊框屬性(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(文字環(huán)繞在一個(gè)元素的四周)
clear(定義某一邊是否有環(huán)繞)
6、項目符號和編號(list)
display(定義是否顯示)
white-space(怎樣處理空白部分):normal/pre/nowrap
list-style-type(在列表前加項目符號)disc(圓點(diǎn))/circle(圈)/square(方形)
/decimal(阿拉伯數字)/lower-roman(小寫(xiě)羅馬數字)/upper-roman(大寫(xiě)羅馬數字)/lower-alpha(小寫(xiě)英文字母)/upper-alpha(大寫(xiě)英文字母)/nore
list-style-tyle(在列表前加圖案):<url>/none
list-style-position(決定列表項中第二行的起邕位置)
list-style(一次性定義所有屬性)
7、定位(positioning) 即層屬性
Type:設定對象的定位方式。
有三種方式:Absolute(絕對定位)、Relative(相對定位)、Static(無(wú)特殊定位)。相對應的CSS屬性是”position”。
Visibility:設定對象定位層的最初顯示狀態(tài)。有三種狀態(tài):Inherit(繼承父層的顯示屬性)、Visible(對象可視)、Hidden隱藏對象。相對應的CSS屬性是”visibility”。
Z-Index:設置對象的層疊順序。編號較大的層會(huì )顯示在編號較小的層上邊。變量值可以是正值也可以是負值。相對應的CSS屬性是”z-index”。
Overflow:設置如果層的內容超出了層的大小時(shí)如何處理。有四種處理方式:visible,增加層的大小,從而將層的所有內容顯示出來(lái);hidden,保持層的大小不變,將超出層的內容剪裁掉;Scroll,總是顯示滾動(dòng);Auto,只有在內容超出層的邊界時(shí)才顯示滾動(dòng)條。相對應的CSS屬性是”overflow”。 Placement:設置對象定位層的位置和大小??梢苑謩e設置left(左邊定位)、top(頂部定位)、width(寬)、height(高)。相對應的CSS屬性分別是”left; top; width; height”。Clip:定義定位層的可視區域。區域外的部分為不可視區,為透明的??梢岳斫鉃樵诙ㄎ粚由戏乓粋€(gè)矩形遮罩的效果。相對應的CSS屬性是 ”clip”。
8、擴展(Extensions)
Pagebreak:在打印的時(shí)候強迫在樣式控制的對象前后換頁(yè)。
Before:設置對象前出現的頁(yè)分割符。設置為always時(shí),始終在對象之前插入頁(yè)分割符。相對應的CSS屬性是”page-break-before”。
After:設置對象后出現的頁(yè)分割符。設置為always時(shí),始終在對象之后插入頁(yè)分割符。相對應的CSS屬性是”'>。
注意:以上IE5僅支持always值和空白值(null)。
Cursor:當鼠標滑過(guò)樣式控制的對象時(shí)改變鼠標形狀??梢栽O置為hand(手型)、crosshair(“十”型)、text (“I”型)、wait(等待)、default(默認)、help(幫助)、e-resize(東箭頭)、ne-resize(東北箭頭)、n- resize(北箭頭)、nw-resize(西北箭頭)、w-resize(西箭頭)、sw-resize(西南箭頭)、s-resize(南箭頭)、 se-resize(東南箭頭)和auto(自動(dòng))。
Filter:在樣式中加上濾鏡特效。由于此屬性?xún)热荼容^多,我們將到下一章單獨對濾鏡介紹。
1. Alpha:設置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:透明度級別,范圍是0-100,0代表完全透明,100代表完全不透明。FinishOpacity:設置漸變的透明效果時(shí),用來(lái)指定結束時(shí)的透明度,范圍也是0 到 100。Style:設置漸變透明的樣式,值為0代表統一形狀、1代表線(xiàn)形、2代表放射狀、3代表長(cháng)方形。StartX和StartY:代表漸變透明效果的開(kāi)始X和Y坐標。 FinishX和FinishY:代表漸變透明效果結束X和Y 的坐標。
2. BlendTrans:圖像之間的淡入和淡出的效果
BlendTrans(Duration=?) Duration:淡入或淡出的時(shí)間。注意:這個(gè)濾鏡必須配合JS建立圖片序列,才能做出圖片間效果。
3. Blru:建立模糊效果
Blur(Add=?, Direction=?, Strength=?) Add:是否單方向模糊,此參數是一個(gè)布爾值,true(非0)或false(0)。 Direction:設置模糊的方向,其中0度代表垂直向上,然后每45度為一個(gè)單位。 Strength:代表模糊的象素值。
4. Chroma:把指定的顏色設置為透明
Chroma(Color=?) Color:是指要設置為透明的顏色。
5. DropShadow:建立陰影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color:指定陰影的顏色。OffX:指定陰影相對于元素在水平方向偏移量,整數。 OffY:指定陰影相對于元素在垂直方向偏移量,整數。 Positive:是一個(gè)布爾值,值為true(非0)時(shí),表示為建立外陰影;為false(0),表示為建立內陰影。
6. FlipH:將元素水平反轉
7. FlipV:將元素垂直反轉
8. Glow:建立外發(fā)光效效果
Glow(Color=?, Strength=?)
Color:是指定發(fā)光的顏色。
Strength:光的強度,可以是1到255之間的任何整數,數字越大,發(fā)光的范圍就越大。
9. Gray:去掉圖像的色彩,顯示為黑白圖象
10. Invert:反轉圖象的顏色,產(chǎn)生類(lèi)似底片的效果
11. Light:放置光源的效果,可以用來(lái)模擬光源在物體上的投影效果 注意:此效果需要用JS設置光的位置和強度。
12. Mask:建立透明遮罩
Mask(Color=?) Color:設置底色,讓對象遮住底色的部分透明。
13. RevealTrans:建立切換效果
RevealTrans(Duration=?, Transition=?)
Duration:是切換時(shí)間,以秒為單位。
Transtition:是切換方式,可設置為從0到23。
注意:如果做頁(yè)面間的切換效果,可以在<head>區加上一行代碼:<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在頁(yè)面里的元素必須配合JS使用。
14. Shadow:建立另一種陰影效果 Shadow(Color=?, Direction=?) Color:是指陰影的顏色。
Direction:是設置投影的方向,0度代表垂直向上,然后每45度為一個(gè)單位。
15. Wave:波紋效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add:表示是否顯示原對象,0表示不顯示,非0表示要顯示原對象。 Freq:設置波動(dòng)的個(gè)數。LightStrength:設置波浪效果的光照強度,從0到100。0表示最弱,100表示最強。 Phase:波浪的起始相角。從0到100的百分數值。(例如:25相當于90度,而50相當于180度。) Strength:設置波浪搖擺的幅度。
16. Xray:顯現圖片的輪廓,X光片效果
注意:在使用CSS濾鏡時(shí),必須使用在有區域的元素,比如表格,圖片等。而文本,段落這樣沒(méi)有區域的元素不能使用CSS濾鏡,對這樣的元素我們可以設置元素的Height和Width樣式或坐標來(lái)實(shí)現。"
CSS中的長(cháng)度
絕對單位:幾乎不用在網(wǎng)頁(yè)中
in 英寸 1in = 2.54cm
cm 厘米 1cm = 0.394in
pt 磅 1in = 72pt
pc pica 1in = 6pc
相對單位:較常用
em 1em = 相應字體的font-size值
ex 1ex = 相應字體中的小寫(xiě)x字母的高度值,較難求得,一般取0.5em
px 最為常用的
CSS中的元素分類(lèi)
display 設定元素所屬類(lèi)別,不可繼承
none(設定為不顯示在屏幕上)
block(塊級元,包括 P,H1-H6,list,div,body)
inline(內聯(lián)元,包括 a,em,span)
list-item(列表元,如 LI)
顏色與背景類(lèi)
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 設置背景圖片,默認為none,不可繼承,可用于所有元
url(imageURL) none
body{backround-image:url(back.jpg);}
background-repeat 設置背景圖片是否重復排列,不可繼承,用于所有元
repeat(XY軸均重復) repeat-x(X軸重復排列) repeat-y(Y軸重復排列) No-repeat(不重復排列,默認值)
BODY{background-repeat:repeat-x;}
BODY{background-repeat:No-repeat;}
background-attachment 設定背景圖片是否卷動(dòng),不可繼承,用于所有元
scroll(隨網(wǎng)頁(yè)卷動(dòng),默認值) fixed(不隨網(wǎng)頁(yè)卷動(dòng))
BODY{background-attachment:fixed;}
background-position 設定背景圖片或背景顏色開(kāi)始顯示的位置,不可繼承,用于塊級元和可替換元
top,buttom,left,right,center(用關(guān)鍵字)
70px 10px(用長(cháng)度值)
50% 30%(用百分比)
BODY{background-position:right top;}
BODY{background-position:50px 10px;}
BODY{background-position:20% 50%;}
background 定義背景綜合屬性,不要求順序,各屬性值以空格分開(kāi)
BODY{background:#ffcc00 url(bg.jpg) fixed center}
字型類(lèi)
font-family 設置字型屬性,取值可以是任何字型名稱(chēng),缺省為瀏覽器內定字型,可以設多個(gè)以逗號(,)分開(kāi),有空格的英文字型可用單引號或雙引號括起來(lái)??衫^承,用于所有元
P{font-family:宋體,楷體,黑體,"Time New Rom";}
font-style 設定字型樣式,可繼承,用于所有元
Normal(正常,默認值) italic(斜體) objlique(直斜體)
P{font-style:italic;}
font-variant 需要特定的字體配合,可繼承,用于所有元
Normal(默認) small-caps(如果是中文字型則將字型縮小顯示,如果是英文則全部改為較小的大寫(xiě))
H3{font-variant:small-caps;}
font-weight 設定字體粗細,可繼承,用于所有元
Normal(默認) bold bolder lighter 100 200...900
由于瀏覽器支持程度不同,一般只用normal和bold兩種屬性
P{font-weight:bold;}
font-size 設定字體的大小,可繼承,用于所有元
絕對大?。簒x-small x-small small medium(默認值) large x-large xx-large;
相對大?。簂arger smaller
數字表示可用單位:磅(pt),像素(px),英寸(in),厘米(cm);
亦可用百分比表示
H2{font-size:36pt;}
P{font-size:200%;}
font 設定字型的綜合屬性,必須含有字體名稱(chēng)和字體大小,順序如下
{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;}
文字類(lèi)
letter-spacing 設定文字間距,默認為0,可為負值,可繼承,用于所有元
P{letter-spacing:5pt;}
text-decoration 設定文字加上下劃線(xiàn)、刪除線(xiàn)等效果,不可繼承,用于所有元
none(無(wú),默認值) underline(下劃線(xiàn)) overline(上劃線(xiàn)) line-through(刪除線(xiàn))
vertical-align 設定文字或圖片垂直方向的對齊方式
baseline(默認值) sub(下標) super(上標) top(垂直向上對齊) middle(垂直居中) bottom(垂直向下對齊) 百分比(相對于行高,可為負值)
text-transform 轉換英文字母大小寫(xiě),可繼承,用于所有元
none(默認值) capitalize(首字母大寫(xiě)) uppercase(所有英文字母大寫(xiě)) lowercase(所有英文字母小寫(xiě))
text-align 設置文字的水平對齊方式,可繼承,用于塊級元
left(左對齊) right(右對齊) center(水平居中) justify(左右對齊)
text-indent 設定標記元素內文字的首行縮進(jìn)或配合margin-left屬性設定首行凸排,可為負值,可繼承,用于塊級元
line-height 設定行高,聲明方式有標準行高、固定值表示法、百分比行高(相對于字體尺寸)、字型大小比例行高等,可繼承,用于所有元
white-space 設定空白符處理方式,不可繼承,用于塊級元
pre(不忽略塊中的空白符) nowrap(文字不在塊中自動(dòng)換行) normal(忽略空白符,默認值)
列表類(lèi)
list-style-type 有序列表的編號方式(供標記使用),可繼承
none:無(wú)編號 decimal:阿拉伯數字 lower-roman:小寫(xiě)羅馬數字 upper-roman:大寫(xiě)羅馬數字 lower-alpha:小寫(xiě)英文字母 upper-alpha:大寫(xiě)英文字母
list-style-type 無(wú)序列表的符號樣式(供使用),可繼承
none:無(wú)符號 disc:實(shí)心圓符號 circle:空心圓符號 square:實(shí)心方形符號
list-style-image 無(wú)序列表的自定義符號樣式,可繼承
url(圖片名稱(chēng)) none(默認值)
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 列表清單項目的綜合設定,屬性之間用空格隔開(kāi)
UL{list-style-imag:url(dd.gif) inside;}
邊界及其相關(guān)類(lèi)
margin 標記元素邊界值的綜合設定,可為負值,不可繼承,用于所有元。應用于塊級元時(shí),縱向相鄰邊界被壓縮/重疊;應用于內聯(lián)元時(shí),不影響文本的行高。
亦可以用margin-top、margin-right、margin-bottom、margin-left分開(kāi)設定各邊的邊界。 聲明4個(gè)值,其順序為上、右、下、左邊界,如:DIV{margin:12pt 15pt 20pt 16pt;}
聲明3個(gè)值,其順序為上、右、下,缺少的左邊界取其對邊(右),如:DIV{margin:12pt 15pt 16pt;}
聲明2個(gè)值,其順序為上、右,缺少的下、左邊界取其對邊,如:DIV{margin:12pt 15pt;}
聲明1個(gè)值,則4個(gè)邊界同一個(gè)值,如:DIV{margin:15pt;}
padding 設定標記內容與標記邊框之間的留白的綜合設定,不能為負值,不可繼承,用于所有元。也可分開(kāi)設定padding-top、padding-right、padding-bottom、padding-left各值。
border-width 標記元素邊框寬度的綜合設定。 也可分開(kāi)設定border-top-width、border-right-width、border-bottom-width、border-left-width各值
border-color 標記元素邊框顏色的綜合設定(規則類(lèi)似于margin屬性)。顏色取值見(jiàn)color屬性。 也可分開(kāi)設定border-top-color、border-right-color、border-bottom-color、border-left-color各值
border-style 標記元素邊框樣式的綜合設定(規則類(lèi)似于margin屬性)。邊框樣式有none(默認值),dotted,dashed,solid,double,goove,ridge,inset,outset等。 也可分開(kāi)設定border-top-style、border-right-style、border-bottom-style、border-left-style各值
border 標記元素4個(gè)邊框的綜合設定,可以分別聲明邊框寬度、邊框樣式、和邊框顏色
DIV{border:5pt solid #ff0000;}
width 設定標記元素的寬度
height 設定標記元素的高度
float 設定標記元素與文字間的相對位置(文字繞排方式),不可繼承,用于所有元
none:以默認方式顯示
left:標記元素靠左,文字在右邊繞排
right:標記元素靠右,文字在左邊繞排
clear 設定標記元素與文字間的相對位置(與float不同的是標記元素兩邊都不繞排),不可繼承,用于所有元
none:以默認方式顯示;
left:標記元素靠左,右邊無(wú)文字繞排;
right:標記元素靠右,左邊無(wú)文字繞排;
定位
z-index 設定標記元素的堆疊層次,取值為整數,也可以是負數,數值大的在上層,不可繼承,用于定位元
visibility 設定標記元素是否可見(jiàn),不可繼承,用于所有元
inherit:取默認值 visible:可見(jiàn) hidden:不可見(jiàn)(隱藏) collapse
position 設定定位樣式,不可繼承,用于所有元
static(默認值) relative(相對定位) absolute(絕對定位) fixed inherit