《CSS層疊樣式表》PPT課件.pptVIP

第一講 CSS層疊樣式表,1.1 CSS概述 1.2 定義CSS樣式表 1.3 CSS常用屬性 1.4 CSS關(guān)聯(lián)HTML文檔的方式 1.5 在HTML文檔中應(yīng)用CSS 1.6 CSS的沖突,學(xué)習(xí)目標(biāo),熟練掌握CSS樣式表的定義 掌握樣式表嵌入HTML文檔的方式 掌握在HTML文檔中應(yīng)用CSS樣式的方式,1.1 CSS概述,CSS（Cascading Style Sheet，層疊樣式表）是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它擴(kuò)展了 HTML 的功能，使網(wǎng)頁(yè)設(shè)計(jì)者能夠以更有效的方式設(shè)置網(wǎng)頁(yè)格式。,特 點(diǎn),將格式和結(jié)構(gòu)分離 以前所末有的能力控制頁(yè)面布局 制作體積更小、下載更快的網(wǎng)頁(yè) 可以實(shí)現(xiàn)許多網(wǎng)頁(yè)同時(shí)更新,應(yīng)用CSS的步驟,定義樣式表 把樣式表關(guān)聯(lián)到HTML文檔 在HTML文檔中應(yīng)用樣式表,1.2 定義CSS樣式,基本語(yǔ)法: 選擇符 屬性名1:屬性值1; 屬性名2:屬性值2; ,1. HTML標(biāo)記符,HTML標(biāo)記符重新定義了HTML標(biāo)記符的顯示效果，定義示例代碼如下： h1text-align:center;font-size:30pt;color:blue,HTML選擇符示例,2.自定義的類(lèi)與ID,使用自定義類(lèi)或ID，可以定義一個(gè)通用的樣式，以便應(yīng)用到任何需要的地方。它們的應(yīng)用需要分別使用到class和id屬性，定義示例代碼如下： .classnameproperty:value #idnameproperty:value,用戶定義的類(lèi)與ID示例,3.偽類(lèi)選擇符,偽類(lèi)是一種特殊的類(lèi)選擇符，它最大的用處是可以對(duì)鏈接在不同狀態(tài)下定義不同的樣式效果，寫(xiě)書(shū)形式如下： a:link 設(shè)置未訪問(wèn)過(guò)的超鏈接格式 a:visited 設(shè)置已訪問(wèn)過(guò)的超鏈接格式 a:active 設(shè)置活動(dòng)超鏈接格式 a:hover 設(shè)置懸停狀態(tài)的超鏈接格式,偽類(lèi)選擇符示例代碼如下： a:linkcolor:green;text- decoration:none a:activecolor:blue;text- decoration:none a:visitedcolor:red;text- decoration:underline a:hovercolor:pink; font-style:italic,偽類(lèi)選擇符示例,1.3 CSS常用屬性,1.字體屬性及其屬性值,字體屬性示例, .text font-family:“宋體“; font-variant:small-caps font-size:16pt; font-style:italic; font-weight:bolder; ,2.文本屬性及其屬性值,文本屬性示例, .text letter-spacing:6px; line-height:28pt; text-decoration:underline; text-align:left; text-indent:44pt; ,3.列表屬性及其屬性值,列表屬性示例,4.顏色和背景屬性及其屬性值,顏色和背景屬性示例,5.CSS區(qū)塊屬性 區(qū)塊邊框 區(qū)塊邊距 區(qū)塊定位,1)區(qū)塊邊框?qū)傩约捌鋵傩灾?邊框?qū)傩允纠?一個(gè)屬性可以設(shè)置多個(gè)屬性值，不同的屬性值之間使用空格間隔,2) 區(qū)塊邊距屬性及其屬性值,邊距屬性示例,3-1)區(qū)塊定位之位置與大小屬性,區(qū)塊定位之位置與大小屬性示例, p position:absolute; top:30px; left:50px; width:500px; height:100px; ,3-2)區(qū)塊定位之浮動(dòng)與清除屬性,區(qū)塊定位之浮動(dòng)與清除屬性示例,6. CSS層,層屬性及其屬性值,層屬性示例,7.鼠標(biāo)屬性及其屬性值,鼠標(biāo)屬性示例, pcursor:hand ,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濾鏡,基本語(yǔ)法： filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy）,語(yǔ)法解釋?zhuān)?alpha：用于把一個(gè)目標(biāo)元素與背景混合，即設(shè)置元素的透明度。它是通過(guò)以下參數(shù)來(lái)實(shí)現(xiàn)透明度的設(shè)置： 1）opacity：設(shè)置透明度的程度。取值范圍為 0100，0代表完全透明，100代表完全不透明 2）finishopacity：用于設(shè)置漸變結(jié)束時(shí)的透明度 3）style：用于指定透明區(qū)域的形狀特征，取值為0（表統(tǒng)一形狀）、1（表線形）、2（表放射狀）、3（表長(zhǎng)方形） 4）startx和starty：表示漸變效果開(kāi)始的X和Y坐標(biāo) 5）finishx和finishy：表漸變效果結(jié)束的X和Y坐標(biāo),Alpha濾鏡示例,img filter:alpha(opacity=50); ,Blur濾鏡,基本語(yǔ)法： filter:blur(add=true|false,direction=direction,strength=strength）,語(yǔ)法解釋?zhuān)?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濾鏡,基本語(yǔ)法： Filter:filph Filter:filpv 語(yǔ)法解釋?zhuān)?filph：設(shè)置水平翻轉(zhuǎn) filpv：設(shè)置垂直翻轉(zhuǎn),FLIPH FLIPV濾鏡示例,img filter:flipv ,Gray濾鏡,基本語(yǔ)法： filter:gray 語(yǔ)法解釋?zhuān)?Gray濾鏡的作用是將對(duì)象中的顏色除去，以變成黑白效果,gray濾鏡示例,img filter:gray ,invert濾鏡,基本語(yǔ)法： filter:invert 語(yǔ)法解釋?zhuān)?Invert濾鏡的作用是把對(duì)象的可 視化屬性全部翻轉(zhuǎn)，包括色彩、飽和度和亮度值，類(lèi)似底片效果,invert濾鏡示例, img filter:invert ,xray濾鏡,基本語(yǔ)法： filter:xray 語(yǔ)法解釋?zhuān)?Xray濾鏡的作用是讓對(duì)象反映出它的輪廓并把這些輪廓加亮，即所謂的X光片,xray 濾鏡示例, img filter:xray ,wave濾鏡,基本語(yǔ)法： filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength）,語(yǔ)法解釋?zhuān)?wave：用于設(shè)置對(duì)象產(chǎn)生垂直的波浪效果。它是通過(guò)以下參數(shù)來(lái)實(shí)現(xiàn)波浪效果的設(shè)置： 1）add：表示是否要把對(duì)象按照波形樣式打亂，默認(rèn)是按照波形樣式打亂，取值除了非0數(shù)字及true外，其它值可任意取 2）freq：波紋的頻率，也就是指定在對(duì)象上一共需要產(chǎn)生多少個(gè)完整的波紋 3）lightstrength：可以對(duì)波紋增強(qiáng)光影效果。取值范圍是從0100的整數(shù)值 4）phase：用來(lái)設(shè)置正弦波的偏移量，取值范圍0100，參數(shù)值為波長(zhǎng)的百分比值 5）strength：表示振幅在小，即扭曲的程度,wave濾鏡示例,img filter:wave (add=add, freq=6, lightstrength=30 , phase= 0,strength=6) ,chroma濾鏡,基本語(yǔ)法： filter:chroma(color=color_value 語(yǔ)法解釋?zhuān)?color_value為對(duì)象上的某種顏色，將其設(shè)置為透明效果,chroma濾鏡示例,img filter:chroma(color=black) ,dropshadow濾鏡,基本語(yǔ)法： filter:dropshadow(color=color_value,offx=value,offy=value,positive=value）,語(yǔ)法解釋?zhuān)?dropshadow：用于設(shè)置對(duì)象的陰影效果。它是通過(guò)以下參數(shù)來(lái)實(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濾鏡,基本語(yǔ)法： filter:glow(color=color_value,strength=value） 語(yǔ)法解釋?zhuān)?glow濾鏡設(shè)置對(duì)象產(chǎn)生邊緣光暈的模糊效果 Color_value：設(shè)置邊緣光暈的顏色 strength：設(shè)置邊緣光暈的強(qiáng)度大小，取值為1255,glow濾鏡示例,img filter:glow (color=#33333,strength=135) ,mask濾鏡,基本語(yǔ)法： filter:mask(color=color_value 語(yǔ)法解釋?zhuān)?mask濾鏡設(shè)置對(duì)象的屏蔽效果，就好象印章一樣印出模型的模樣 color_value指定某種顏色，來(lái)設(shè)置遮罩效果,mask濾鏡示例,img filter:mask(color=#336699) ,shadow濾鏡,基本語(yǔ)法： filter:shadow(color=color_value,direcition=value） 語(yǔ)法解釋?zhuān)?shadow濾鏡除了具備dropshadow濾鏡效果外，還具有漸變陰影的效果 Color_value：設(shè)置漸變陰影的顏色 direction：設(shè)置陰影的方向，取值為1255,shadow濾鏡示例,img filter:shadow (color=#336699,direction=135) ,1.4 CSS關(guān)聯(lián)HTML文檔的方式,方式一（即應(yīng)用內(nèi)聯(lián)樣式定義）:在主體區(qū)域內(nèi)使用HTML 標(biāo)記符的 style 屬性，例如： 優(yōu)點(diǎn)：可修飾單獨(dú)的標(biāo)記符 缺點(diǎn)：沒(méi)有發(fā)揮CSS統(tǒng)一設(shè)置格式的優(yōu)勢(shì),使用style屬性示例, 在主體內(nèi)使用HTML 標(biāo)記符的 style 屬性 ,方式二:在頭部區(qū)域內(nèi)使用style標(biāo)記符將樣式表嵌入到HTML文檔中，例如： h1text-align:center;color:blue 優(yōu)點(diǎn)：有利于統(tǒng)一設(shè)置單個(gè)網(wǎng)頁(yè)的格式 缺點(diǎn)：不便統(tǒng)一設(shè)置多個(gè)網(wǎng)頁(yè)的格式,使用style標(biāo)記嵌入CSS示例,示例說(shuō)明：,標(biāo)記用于定義HTML文檔內(nèi)的樣式表區(qū)域 屬性type=text/css：定義文件的類(lèi)型是樣式表文本 ：用于對(duì)不支持樣式的瀏覽器隱藏樣式表內(nèi)容,方式三:在頭部區(qū)域內(nèi)的style標(biāo)記對(duì)之間使用import導(dǎo)入外部樣式表文件，例如： import url(mycss.css) 優(yōu)點(diǎn)：可設(shè)置多個(gè)網(wǎng)頁(yè)的統(tǒng)一格 式，常用于網(wǎng)站,使用import引入CSS示例,示例說(shuō)明：,使用import 來(lái)引入CSS外部文件時(shí)，需注意：該聲明語(yǔ)句必須放在所有樣式表的最前面,方式四:在頭區(qū)域內(nèi)使用link標(biāo)記符鏈接外部文件，例如： 優(yōu)點(diǎn)：可設(shè)置多個(gè)網(wǎng)頁(yè)的統(tǒng)一格 式，常用于網(wǎng)站,使用link標(biāo)記符示例,示例說(shuō)明：,標(biāo)記用于鏈接一個(gè)外部樣式表文件 屬性rel=stylesheet：用于定義鏈接的文件和HTML文檔之間的關(guān)系 屬性type=text/css：定義文件的類(lèi)型是文本類(lèi)型的 屬性href：用于指定所鏈接的CSS文件,1.5 在HTML文件中應(yīng)用CSS,在HTML文件中應(yīng)用CSS隨樣式表定義的選擇符不同而不同 當(dāng)選擇符是HTML標(biāo)記或偽類(lèi)時(shí)，HTML文件在使用該選擇符標(biāo)記的同時(shí)就直接應(yīng)用了樣式表 當(dāng)選擇符是自定義的類(lèi)或ID時(shí)，在HTML文檔中應(yīng)分別在需使用它們的地方的標(biāo)記中使用屬性class=“類(lèi)名”和id=“ID名”來(lái)應(yīng)用自定義的類(lèi)和ID,在HTML文件中應(yīng)用CSS示例,1.6 CSS的沖突,當(dāng)對(duì)同一段文本應(yīng)用多個(gè)CSS樣式時(shí)，由于這些樣式之間可能存在一定的矛盾（即沖突），所以在顯示時(shí)會(huì)出現(xiàn)無(wú)法預(yù)期的效果 為解決CSS沖突問(wèn)題，瀏覽器在顯示CSS樣式時(shí)，一般遵循下頁(yè)所列出的幾個(gè)沖突解決規(guī)則,沖突解決規(guī)則,當(dāng)兩個(gè)不同樣式應(yīng)用于同一段文本時(shí)，瀏覽器將顯示這段文本所具有的所有屬性，除非定義的兩個(gè)樣式之間有顯示上的沖突 當(dāng)來(lái)自不同樣式的文本屬性在應(yīng)用到同一段文本產(chǎn)生沖突時(shí)，瀏覽器將按照與文本關(guān)系的遠(yuǎn)近來(lái)決定顯示哪一個(gè)屬性，近者優(yōu)先 如果HTML樣式與CSS樣式存在矛盾時(shí)，CSS樣式具有較高的優(yōu)先級(jí)。,CSS沖突示例,這里面的文字將被顯示成紅色這里面的文字卻是綠色這里面的文字也是紅色,小 結(jié),CSS是一種分離格式和結(jié)構(gòu)的格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，它擴(kuò)展了 HTML 的功能，對(duì)網(wǎng)頁(yè)布局的控制能力前所未有，可實(shí)現(xiàn)多網(wǎng)頁(yè)同時(shí)更新 CSS的定