第一講CSS層疊樣式表

第一講CSS層疊樣式表1.1CSS概述1.2定義CSS樣式表1.3CSS常用屬性1.4CSS關聯(lián)HTML文檔的方式1.5在HTML文檔中應用CSS1.6CSS的沖突學習目標熟練掌握CSS樣式表的定義掌握樣式表嵌入HTML文檔的方式掌握在HTML文檔中應用CSS樣式的方式1.1CSS概述CSS（CascadingStyleSheet，層疊樣式表）是一種格式化網(wǎng)頁的標準方式，它擴展了HTML的功能，使網(wǎng)頁設計者能夠以更有效的方式設置網(wǎng)頁格式。

特點將格式和結構分離以前所末有的能力控制頁面布局

制作體積更小、下載更快的網(wǎng)頁可以實現(xiàn)許多網(wǎng)頁同時更新應用CSS的步驟定義樣式表把樣式表關聯(lián)到HTML文檔在HTML文檔中應用樣式表1.2定義CSS樣式基本語法:

選擇符{屬性名1:屬性值1;屬性名2:屬性值2;……}常用選擇符類型:HTML標記符自定義的類自定義的ID偽類1.HTML標記符

HTML標記符重新定義了HTML標記符的顯示效果，定義示例代碼如下：h1{text-align:center;font-size:30pt;color:blue}HTML選擇符示例2.自定義的類與ID

使用自定義類或ID，可以定義一個通用的樣式，以便應用到任何需要的地方。它們的應用需要分別使用到class和id屬性，定義示例代碼如下：.classname{property:value…}#idname{property:value…}用戶定義的類與ID示例3.偽類選擇符

偽類是一種特殊的類選擇符，它最大的用處是可以對鏈接在不同狀態(tài)下定義不同的樣式效果，寫書形式如下：

a:link設置未訪問過的超鏈接格式a:visited設置已訪問過的超鏈接格式a:active設置活動超鏈接格式a:hover設置懸停狀態(tài)的超鏈接格式偽類選擇符示例代碼如下：

a:link{color:green;text- decoration:none}a:active{color:blue;text- decoration:none}a:visited{color:red;text- decoration:underline}a:hover{color:pink;font-style:italic}偽類選擇符示例1.3CSS常用屬性1.字體屬性及其屬性值字體屬性示例

<style>.text{font-family:"宋體";font-variant:small-capsfont-size:16pt;font-style:italic;font-weight:bolder;}</style>2.文本屬性及其屬性值文本屬性示例<style>.text{letter-spacing:6px; line-height:28pt; text-decoration:underline; text-align:left; text-indent:44pt;}</style>3.列表屬性及其屬性值列表屬性示例4.顏色和背景屬性及其屬性值顏色和背景屬性示例5.CSS區(qū)塊屬性區(qū)塊邊框區(qū)塊邊距區(qū)塊定位1)區(qū)塊邊框屬性及其屬性值屬性屬性值描述borderColor_value、width_value、style設置邊框的顏色、寬度和樣式Border-topColor_value、width_value、style設置邊框的顏色、寬度和樣式Border-leftColor_value、width_value、style設置邊框的顏色、寬度和樣式Border-rightColor_value、width_value、style設置邊框的顏色、寬度和樣式Border-bottomColor_value、width_value、style設置邊框的顏色、寬度和樣式屬性值描述none設置無邊框Dotted設置邊框由點組成Dash設置邊框由短線組成Solid設置邊框為實線Double設置邊框是雙實線Groove設置邊框帶有立體感的溝槽Ridge設置邊框成脊形Inset設置邊框內嵌一個立體邊框outset設置邊框外嵌一個立體邊框邊框style屬性值邊框屬性示例一個屬性可以設置多個屬性值，不同的屬性值之間使用空格間隔2)區(qū)塊邊距屬性及其屬性值邊距屬性示例3-1)區(qū)塊定位之位置與大小屬性

CSS區(qū)塊定位直接決定了網(wǎng)頁中各個元素的位置、大小與是否浮動等可視屬性。CSS區(qū)塊定位有兩種方法：相對定位和絕對定位區(qū)塊定位之位置與大小屬性示例<style>p{position:absolute;top:30px;left:50px;width:500px;height:100px;}</style>3-2)區(qū)塊定位之浮動與清除屬性

float屬性將所屬標記的顯示空間指定為一個浮動元素，并使其周圍對象按一定的方式環(huán)繞它排列。

float屬性的作用就象圖像和表格的align屬性一樣，但可以用到任何元素上。

clear屬性的作用是禁止浮動元素出現(xiàn)在所屬對象旁邊，如果它被放置為與浮動元素相鄰，則它將下沉至浮動元素為止。浮動與清除屬性區(qū)塊定位之浮動與清除屬性示例6.CSS層

在使用元素定位時，從可視角度講，不可避免地會發(fā)生兩個元素試圖同時出現(xiàn)于同一位置的情況。顯示其中一個就會覆蓋另外一個。如果將網(wǎng)頁的二維空間延伸到三維空間，就會解決上述元素覆蓋問題。在坐標系中，通過增加z-軸，可使用二維空間的變?yōu)槿S空間。在網(wǎng)頁中，將沿著z-軸的元素使用z-index值來代表通過z-index，可以改變網(wǎng)頁元素相互重疊的順序當CSS區(qū)塊增加一個z-index屬性后，即成為一個層空間層屬性及其屬性值層屬性示例7.鼠標屬性及其屬性值屬性屬性值描述cursorhand設置鼠標為手形狀crosshair設置鼠標為十字交叉形狀text設置鼠標為文本選擇形狀wait設置鼠標為Windows的沙漏形default設置鼠標為默認的形狀help設置鼠標為帶問號的形狀e-resize設置鼠標為指向東的箭頭ne-resize設置鼠標為指向東北的箭頭n-resize設置鼠標為指向北的箭頭nw-resize設置鼠標為指向西北的箭頭w-resize設置鼠標為指向西的箭頭sw-resize設置鼠標為指向西南的箭頭s-resize設置鼠標為指向南的箭頭se-resize設置鼠標為指向東南的箭頭可以對任何對象使用cursorCSS屬性來改變移動到對象上的鼠標樣式鼠標屬性示例<style>p{cursor:hand}</style>8.濾鏡屬性

使用濾鏡屬性可以把可視化的濾鏡和轉換效果添加到一個標準的HTML元素中，如圖片、文本等對象中。對于濾鏡和漸變效果，前者是基礎，后者是濾鏡效果的不斷變化和演示更替。常用濾鏡alpha濾鏡：設置透明層次blur濾鏡：設置模糊效果flipH、flipV濾鏡：設置水平垂直翻轉gray濾鏡：設置灰度invert濾鏡：將顏色的飽和度及亮度完全反轉xray濾鏡：設置X射線效果wave濾鏡：設置變形效果chroma濾鏡：設置特定顏色的透明效果glow濾鏡：設置邊緣光暈效果dropshadow濾鏡：設置陰影效果shadow濾鏡：設置漸變陰影效果mask濾鏡：設置遮罩效果Alpha濾鏡基本語法：{filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy）}語法解釋：

alpha：用于把一個目標元素與背景混合，即設置元素的透明度。它是通過以下參數(shù)來實現(xiàn)透明度的設置：1）opacity：設置透明度的程度。取值范圍為 0~100，0代表完全透明，100代表完全不透明2）finishopacity：用于設置漸變結束時的透明度3）style：用于指定透明區(qū)域的形狀特征，取值為0（表統(tǒng)一形狀）、1（表線形）、2（表放射狀）、3（表長方形）4）startx和starty：表示漸變效果開始的X和Y坐標5）finishx和finishy：表漸變效果結束的X和Y坐標Alpha濾鏡示例img{filter:alpha(opacity=50);}Blur濾鏡基本語法：{filter:blur(add=true|false,direction=direction,strength=strength）}

語法解釋：

add：用于指定圖片是否被改變成印象派的模糊效果，默認取值為true

direction：用于設置模糊的方向。其中0度代表垂直向上，然后每45度為一個單位，默認值是向左的270度

strength：表示有多少像素的寬度將受到模糊影響，默認是5像素。注意：其只能取整數(shù)Blur濾鏡示例img{filter:blur(strength=10);}FlipH、FlipV濾鏡基本語法：{Filter:filph}

{Filter:filpv}語法解釋：

filph：設置水平翻轉

filpv：設置垂直翻轉FLIPHFLIPV濾鏡示例img{filter:flipv}Gray濾鏡基本語法：{filter:gray}語法解釋：

Gray濾鏡的作用是將對象中的顏色除去，以變成黑白效果gray濾鏡示例img{filter:gray}invert濾鏡基本語法：{filter:invert}語法解釋：

Invert濾鏡的作用是把對象的可視化屬性全部翻轉，包括色彩、飽和度和亮度值，類似底片效果invert濾鏡示例<style>img{filter:invert}</style>xray濾鏡基本語法：{filter:xray}語法解釋：

Xray濾鏡的作用是讓對象反映出它的輪廓并把這些輪廓加亮，即所謂的X光片xray濾鏡示例<style>img{filter:xray}</style>wave濾鏡基本語法：{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength）}語法解釋：

wave：用于設置對象產(chǎn)生垂直的波浪效果。它是通過以下參數(shù)來實現(xiàn)波浪效果的設置：1）add：表示是否要把對象按照波形樣式打亂，默認是按照波形樣式打亂，取值除了非0數(shù)字及true外，其它值可任意取2）freq：波紋的頻率，也就是指定在對象上一共需要產(chǎn)生多少個完整的波紋3）lightstrength：可以對波紋增強光影效果。取值范圍是從0~100的整數(shù)值

4）phase：用來設置正弦波的偏移量，取值范圍0~100，參數(shù)值為波長的百分比值

5）strength：表示振幅在小，即扭曲的程度wave濾鏡示例img{filter:wave(add=add,freq=6,lightstrength=30,phase=0,strength=6)}chroma濾鏡基本語法：{filter:chroma(color=color_value}語法解釋：color_value為對象上的某種顏色，將其設置為透明效果

chroma濾鏡示例img{filter:chroma(color=black)}dropshadow濾鏡基本語法：{filter:dropshadow(color=color_value,offx=value,offy=value,positive=value）}語法解釋：dropshadow：用于設置對象的陰影效果。它是通過以下參數(shù)來實現(xiàn)陰影效果的設置：1）color：設置陰影顏色2）offx：陰影相對于原始對象的水平位置3）offy：陰影相對于原始對象的垂直位置4）positive：設置陰影的透明，0為透明，1為不透明

dropshadow濾鏡示例img{filter:dropshadow(color=#ffffcc,offx=10,offy=10,positive=1)}glow濾鏡基本語法：{filter:glow(color=color_value,strength=value）}語法解釋：glow濾鏡設置對象產(chǎn)生邊緣光暈的模糊效果Color_value：設置邊緣光暈的顏色strength：設置邊緣光暈的強度大小，取值為1~255

glow濾鏡示例img{filter:glow(color=#33333,strength=135)}mask濾鏡基本語法：{filter:mask(color=color_value}語法解釋：mask濾鏡設置對象的屏蔽效果，就好象印章一樣印出模型的模樣

color_value指定某種顏色，來設置遮罩效果code1/mask_filter.htm濾鏡示例img{filter:mask(color=#336699)}shadow濾鏡基本語法：{filter:shadow(color=color_value,direcition=value）}語法解釋：shadow濾鏡除了具備dropshadow濾鏡效果外，還具有漸變陰影的效果Color_value：設置漸變陰影的顏色direction：設置陰影的方向，取值為1~255

shadow濾鏡示例img{filter:shadow(color=#336699,direction=135)}

1.4CSS關聯(lián)HTML文檔的方式方式一（即應用內聯(lián)樣式定義）:在主體區(qū)域內使用HTML標記符的style屬性，例如：<pstyle=“text-align:center”>

優(yōu)點：可修飾單獨的標記符缺點：沒有發(fā)揮CSS統(tǒng)一設置格式的優(yōu)勢

使用style屬性示例<body><pstyle=“font-size:18pt;background-color:#FFCCFF”>在主體內使用HTML標記符的style屬性</p></body>方式二:在頭部區(qū)域內使用style標記符將樣式表嵌入到HTML文檔中，例如：<style>h1{text-align:center;color:blue}</style>

優(yōu)點：有利于統(tǒng)一設置單個網(wǎng)頁的格式缺點：不便統(tǒng)一設置多個網(wǎng)頁的格式

使用style標記嵌入CSS示例<html><head><styletype=text/css><!--body{background-image:url(horse.gif)}-->

</style></head><body></body></html>示例說明：<style>標記用于定義HTML文檔內的樣式表區(qū)域屬性type=text/css：定義文件的類型是樣式表文本

<!---->：用于對不支持樣式的瀏覽器隱藏樣式表內容方式三:在頭部區(qū)域內的style標記對之間使用@import導入外部樣式表文件，例如：<style>@importurl(‘mycss.css’)</style>優(yōu)點：可設置多個網(wǎng)頁的統(tǒng)一格 式，常用于網(wǎng)站

使用@import引入CSS示例<head><styletype=text/css><!--@importurl('mycss.css');-->

</style></head>示例說明：

使用@import來引入CSS外部文件時，需注意：該聲明語句必須放在所有樣式表的最前面方式四:在頭區(qū)域內使用link標記符鏈接外部文件，例如：<linkrel=“stylesheet”type=“text/css”href=“stylesheet.css”>

優(yōu)點：可設置多個網(wǎng)頁的統(tǒng)一格 式，常用于網(wǎng)站

使用link標記符示例<head><linkrel=stylesheethref="mycss.css"type="text/css"></head>示例說明：<link>標記用于鏈接一個外部樣式表文件屬性rel=stylesheet：用于定義鏈接的文件和HTML文檔之間的關系屬性type=text/css：定義文件的類型是文本類型的屬性href：用于指定所鏈接的CSS文件1.5在HTML文件中應用CSS在HTML文件中應用CSS隨樣式表定義的選擇符不同而不同當選擇符是HTML標記或偽類時，HTML文件在使用該選擇符標記的同時就直接應用了樣式表當選擇符是自定義的類或ID時，在HTML文檔中應分別在需使用它們的地方的標記中使用屬性class=“類名”和id=“ID名”