第一講CSS層疊樣式表

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

特點(diǎn)將格式和結(jié)構(gòu)分離以前所末有的能力控制頁面布局

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

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

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

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

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

a:link設(shè)置未訪問過的超鏈接格式a:visited設(shè)置已訪問過的超鏈接格式a:active設(shè)置活動(dòng)超鏈接格式a:hover設(shè)置懸停狀態(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ū)塊邊框?qū)傩约捌鋵傩灾祵傩詫傩灾得枋鯾orderColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-topColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-leftColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-rightColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式Border-bottomColor_value、width_value、style設(shè)置邊框的顏色、寬度和樣式屬性值描述none設(shè)置無邊框Dotted設(shè)置邊框由點(diǎn)組成Dash設(shè)置邊框由短線組成Solid設(shè)置邊框?yàn)閷?shí)線Double設(shè)置邊框是雙實(shí)線Groove設(shè)置邊框帶有立體感的溝槽Ridge設(shè)置邊框成脊形Inset設(shè)置邊框內(nèi)嵌一個(gè)立體邊框outset設(shè)置邊框外嵌一個(gè)立體邊框邊框style屬性值邊框?qū)傩允纠粋€(gè)屬性可以設(shè)置多個(gè)屬性值，不同的屬性值之間使用空格間隔2)區(qū)塊邊距屬性及其屬性值邊距屬性示例3-1)區(qū)塊定位之位置與大小屬性

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

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

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

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

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

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

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

語法解釋：

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

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

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

{Filter:filpv}語法解釋：

filph：設(shè)置水平翻轉(zhuǎn)

filpv：設(shè)置垂直翻轉(zhuǎn)FLIPHFLIPV濾鏡示例img{filter:flipv}Gray濾鏡基本語法：{filter:gray}語法解釋：

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

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

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

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

4）phase：用來設(shè)置正弦波的偏移量，取值范圍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為對(duì)象上的某種顏色，將其設(shè)置為透明效果

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

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

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

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

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

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

優(yōu)點(diǎn)：可修飾單獨(dú)的標(biāo)記符缺點(diǎn)：沒有發(fā)揮CSS統(tǒng)一設(shè)置格式的優(yōu)勢(shì)

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

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

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

</style></head><body></body></html>示例說明：<style>標(biāo)記用于定義HTML文檔內(nèi)的樣式表區(qū)域?qū)傩詔ype=text/css：定義文件的類型是樣式表文本

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

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

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

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

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

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