1、第五章 樣式表,統(tǒng)一網(wǎng)站風(fēng)格、制作基本特效,CSS樣式表,2,主要內(nèi)容,一、樣式表(CSS)的基本概念 二、CSS與HTML文檔的結(jié)合方法 三、CSS屬性的理解與應(yīng)用 四、CSS樣式的單位 五、CSS樣式在網(wǎng)頁(yè)中的應(yīng)用 六、CSS的高級(jí)應(yīng)用,CSS樣式表,3,一、CSS的基本概念,1、編寫CSS樣式的方法 使用CSS編輯器 如Dreamweaver、Frontpage等都會(huì)自帶CSS編輯器。 使用超文本編輯器 如Dreamweaver、Frontpage等超文本編輯器均可編輯樣式表； 記事本,CSS樣式表,4,一、CSS的基本概念,2、基本語(yǔ)法,選擇符屬性: 值,選擇符屬性1: 值1; 屬性2

2、: 值2 ;,單一選擇符的復(fù)合樣式聲明應(yīng)該用“;”隔開，為便于閱讀也可以分行寫。,幾乎所有的HTML標(biāo)記符形式都可以作為選擇符。, CSS例子 H1 font-size:x-large; color:red H2 font-size:large; color:blue ,5-1.htm,H1 font-size:x-large; color:red H2 font-size:large; color:blue,CSS樣式表,5,一、CSS的基本概念,3、CSS樣式的組合、繼承和關(guān)聯(lián)性 樣式的組合：把具有相同聲明定義的選擇符組合在一起，并用逗號(hào)隔開。 例如：段落元素p、單元格元素td和類c1可以

3、使用相同樣式：,p,td,.c1font-size:12pt;font-family:黑體;color:red,5-2.htm,CSS樣式表,6,一、CSS的基本概念,樣式的繼承：若子元素未定義，則它將繼承上級(jí)元素的樣式的定義。但存在少數(shù)屬性不能繼承，見P119。, CSS例子 ,5-3.htm,CSS樣式表,7,一、CSS的基本概念,樣式表的關(guān)聯(lián)性： 樣式表的關(guān)聯(lián)性指在某些樣式定義中，可以定義某樣式僅在某個(gè)特定元素范圍內(nèi)才有效。 例如：,p bfont-size:12pt;font-family:黑體;color:red,b元素僅在p元素作用范圍內(nèi)會(huì)套用上述的樣式設(shè)定。 而在其他地方不具有這

4、些屬性。,5-4.htm,CSS樣式表,8,一、CSS的基本概念,4、注釋 CSS文字的注釋形式與C語(yǔ)言類似。,pfont-size:12pt /*P標(biāo)簽的樣式定義*/,CSS樣式表,9,一、CSS的基本概念,5、選擇符 樣式表的基本語(yǔ)法形式：,selectorproperty1:value1; property2:value2;,需要應(yīng)用的樣式的內(nèi)容,樣式的屬性,樣式的屬性的值,Select的五種合法的類別：HTML標(biāo)記符、用戶定義的類Class、用戶定義的ID、虛類和虛元素 P119,CSS樣式表,10,選擇符的類別,HTML標(biāo)記符 應(yīng)用比較多，注意繼承性、組合性和關(guān)聯(lián)性（P119）的應(yīng)用

5、。 用戶定義的類選擇符 可以使用任何名稱命名類。 里所有的元素都可以定義“類”。 語(yǔ)法如下：,selector.classnameproperty1:value1; property2:value2; .classnameproperty1:value1; property2:value2;,例5-5.htm,1、 兩種定義形式的區(qū)別？ 2、在標(biāo)簽中使用類選擇符樣式的使用方式如何？,CSS樣式表,11,選擇符的類別,ID選擇符 應(yīng)用的形式基本與類選擇符類似，定義時(shí)用“#”替代”.”。 因此應(yīng)用時(shí)一般選取其中的一種。見P120例子。 虛類和虛元素 在html的頁(yè)面元素中沒有這種屬性，故稱其為虛類

6、，僅在IE5.0以上的瀏覽器版本才支持虛類選擇符。 語(yǔ)法如下：,頁(yè)面元素名：元素虛屬性名樣式表內(nèi)容,CSS樣式表,12,a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa,:link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:italic :active color: #aaaaaa,例5-6.htm,CSS樣式表,13

7、,二、CSS與HTML文檔的結(jié)合方法,HTML與樣式表有多種結(jié)合方法 內(nèi)聯(lián)樣式：在標(biāo)記符內(nèi)定義 外聯(lián)樣式 使用標(biāo)記符鏈接到外部的樣式文件 使用CSS的import標(biāo)記符來導(dǎo)入樣式文件 在HTML標(biāo)簽中直接加入樣式表的定義。,CSS樣式表,14,二、CSS與HTML文檔的結(jié)合方法,內(nèi)聯(lián)樣式：在標(biāo)記符內(nèi)定義，在本網(wǎng)頁(yè)內(nèi)起作用。, ,CSS樣式表,15,二、CSS與HTML文檔的結(jié)合方法,外聯(lián)樣式：使用標(biāo)記符鏈接到外部的樣式文件，凡鏈接的網(wǎng)頁(yè)都起作用 1、定義外部樣式文件，用記事本或者Dreamweaver，編輯完后文件擴(kuò)展名應(yīng)為”.css”； 2、建立HTML網(wǎng)頁(yè)文檔； 3、在網(wǎng)頁(yè)文檔中使用標(biāo)簽將

8、前面的樣式表文檔鏈接到網(wǎng)頁(yè)中。, ,例5-7.htm,CSS樣式表,16,二、CSS與HTML文檔的結(jié)合方法,外聯(lián)樣式：使用import導(dǎo)入外部的樣式文件，凡在導(dǎo)入該樣式表的網(wǎng)頁(yè)都起作用 1、定義外部樣式文件，用記事本或者Dreamweaver，編輯完后文件擴(kuò)展名應(yīng)為”.css”； 2、建立HTML網(wǎng)頁(yè)文檔； 3、在網(wǎng)頁(yè)文檔中import導(dǎo)入前面的樣式表。, ,例5-8.htm,CSS樣式表,17,二、CSS與HTML文檔的結(jié)合方法,在HTML標(biāo)簽中直接加入樣式表的定義 若在個(gè)別標(biāo)簽需要作樣式調(diào)整，可使用這種方式。 使用標(biāo)簽的“Style”屬性來定義樣式。, 被定義的樣式文本在此處。 ,例5-

9、8.htm,CSS樣式表,18,三、CSS屬性的理解與應(yīng)用,樣式表的5類常用屬性：詳見P126 字體屬性 P126：字體、字號(hào)、行距等。 顏色及背景屬性 P127：背景顏色、背景圖片等。 文本屬性：P128 區(qū)塊屬性 P128：邊框粗細(xì)等。 分級(jí)屬性 P128：各組件的字距、行距、縮排等。 鼠標(biāo)屬性 P130：鼠標(biāo)形狀等。 詳見幫助文件,CSS屬性,CSS樣式表,19,字體屬性,Font-family:指定文字的字體 H1font-family:華文彩云 Font-style：指定文字是否加粗或使用斜體。取值：normal（正常）、oblique（偏斜體）、italic（斜體） Font-si

10、ze：指定文字的大小。 Font：上述樣式屬性的綜合表示法。 Pfont: bold 16pt,CSS樣式表,20,顏色及背景屬性,Color:顏色 Background-color：指定背景顏色 H1background-color:#000800 Background-image：指定Html組件的背景圖片，值為url或none。 Bodybackground-image:url(image1.jpg),CSS樣式表,21,文本屬性,Text-decoration：設(shè)置底線、頂線、閃爍等文字效果。值為none,underline,overline,line-through,blink. T

11、ext-align：指定文字的對(duì)齊方式。值為：left,right,center,justify,CSS樣式表,22,區(qū)塊屬性,定義邊界，取值為：長(zhǎng)度|百分比|auto 上邊界：margin-top；下邊界：margin-bottom 左邊界：margin-left：右邊界：margin-right P.narrow margin-right: 50% 定義邊框： Border-color Border-width Border-style,CSS樣式表,23,分級(jí)屬性,List-style-type：指定項(xiàng)目符號(hào)或編號(hào) 允許值：disc | circle | square | decimal

12、 | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image：指定項(xiàng)目符號(hào)的圖形文件名稱，值為url或none LI.square list-style-type: square UL.plain list-style-type: none OL list-style-type: upper-alpha /* A B C D E etc. */ OL OL list-style-type: decimal /* 1 2 3 4 5 etc. */ OL OL OL list-style-type

13、: lower-roman /* i ii iii iv v etc. */,CSS樣式表,24,鼠標(biāo)屬性,讓鼠標(biāo)移到不同對(duì)象上面，顯示不同形狀。 Cursor屬性，取值如下 Auto：自動(dòng)按默認(rèn)顯示 Crosshair：“” Hand:手形 Text：文本I形 Wait：等待 ,CSS樣式表,25,練習(xí)：,1、若要在網(wǎng)頁(yè)上使用使用統(tǒng)一的頁(yè)面風(fēng)格： 背景為淺藍(lán)灰色（#cdcdfe）， 文本為深藍(lán)色（#000066）， 所有網(wǎng)頁(yè)都不留邊(Margin)， 且列表項(xiàng)目、表格及段落文本中的字體均為10.5pt；顏色：綠色；文本對(duì)齊：居中；字體：楷體,Times New Roman；文字格式：加粗。,

14、CSS樣式表,26,練習(xí)：,2、編輯一個(gè)外聯(lián)樣式表，它使所有網(wǎng)頁(yè)中表格的文本顯示為如下風(fēng)格： 文字大小：10.5pt; 顏色：綠色； 文本對(duì)齊：居中； 字體：楷體 文字格式：加下劃線,CSS樣式表,27,練習(xí)：,3、在上題中，若有一個(gè)網(wǎng)頁(yè)中的某個(gè)表格要采取不同的顯示方式：如 顏色：藍(lán)色； 字體：黑體,Arial Black 其他與上題相同，應(yīng)在該頁(yè)上使用什么樣式表？,CSS樣式表,28,練習(xí)：,4、定義一個(gè)類選擇符，樣式為： 文字大?。?2pt; 顏色：綠色； 文本對(duì)齊：居中； 字體：楷體，Times New Roman 文字格式：加粗 并在多個(gè)頁(yè)面元素中引用此類樣式。,CSS樣式表,29,練

15、習(xí)：,5、定義一個(gè)偽類選擇符，使超鏈接具有一下特效： （1）超鏈接沒有下劃線； （2）當(dāng)鼠標(biāo)指向超鏈接時(shí)，文字從10pt變成12pt，文字加粗； （3）超鏈接文本在單擊前是藍(lán)色，在單擊后是灰色，并變成斜體。,CSS樣式表,30,課堂練習(xí)：,定義一個(gè)內(nèi)聯(lián)樣式，使網(wǎng)頁(yè)中的所有段落顯示效果如下： 字的大?。?2px 字的顏色：0000ff 對(duì)齊方式為居中 背景顏色：gray,CSS樣式表,31,四、CSS樣式的單位,定義長(zhǎng)度：符號(hào) 數(shù)值 單位（P132） 絕對(duì)長(zhǎng)度單位：cm,mm,in,pt(印刷點(diǎn)數(shù)),pc等。 相對(duì)長(zhǎng)度單位：px（像素）,em,ex。 百分比單位 百分比值總是相對(duì)于另一個(gè)值來說的

16、，參照值一般是該元素本身的字體尺寸。 樣式的單位,CSS樣式表,32,四、CSS樣式的單位,定義顏色 rgb函數(shù)：rgb(R,G,B) R、G、B可用百分比值表示，也可用0255的整數(shù)值表示。 使用十六進(jìn)制數(shù)組：#RRGGBB 直接使用顏色名。,color: rgb(100%,0,0) color: rgb(255,0,0) color: #FF0000 color:red,CSS樣式表,33,五、CSS樣式在網(wǎng)頁(yè)中的應(yīng)用,1、在網(wǎng)頁(yè)中創(chuàng)建樣式，分別創(chuàng)建下列三種樣式 標(biāo)簽選擇符 類選擇符 ID選擇符 2、在網(wǎng)頁(yè)中導(dǎo)入、鏈入樣式表文件,CSS樣式表,34,五、CSS樣式在網(wǎng)頁(yè)中的應(yīng)用,CSS樣式

17、表,35,六、用CSS樣式制作一些特殊效果,1、給文字設(shè)置圖形背景：利用層 2、文字間的重疊效果：利用兩個(gè)層 3、首字放大 P:first-letter,例5-10.htm,CSS樣式表,36,七、樣式表的高級(jí)應(yīng)用,1、CSS的濾鏡屬性 （filter） 的應(yīng)用 2、應(yīng)用濾鏡制作常見特效 文字特效 鼠標(biāo)特效 圖像特效 3、利用css進(jìn)行頁(yè)面布局,濾鏡實(shí)例,CSS樣式表,37,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,樣式表濾鏡的構(gòu)成 標(biāo)記FILTER : 濾鏡名（屬性名屬性值，屬性名屬性值，.）; 例如：p filter : alpha(opacity=80,style=1 ); 靜態(tài)濾

18、鏡的種類（IE4.0以上版本） Alpha讓對(duì)象呈現(xiàn)漸變半透明效果 Blur 讓對(duì)象產(chǎn)生風(fēng)吹模糊的效果 DropShadow 讓對(duì)象有一個(gè)下落式的陰影 Glow在對(duì)象的周圍產(chǎn)生光暈而模糊的效果 ,CSS樣式表,38,Chroma讓圖像中的某一顏色變成透明色 FlipH讓HTML對(duì)象水平轉(zhuǎn)換 FlipV讓HTML對(duì)象垂直轉(zhuǎn)換 Wave讓HTML對(duì)象產(chǎn)生水平或是垂直方向上的正弦波形 Shadow讓對(duì)象產(chǎn)生陰影效果 Mask利用一個(gè)HTML對(duì)象在另一個(gè)對(duì)象上產(chǎn)生圖像的遮罩 Light在HTML元件上放置一個(gè)光影 Gray把一個(gè)彩色的圖象變成灰色調(diào)圖象 Invert讓對(duì)象產(chǎn)生照片底片的效果 XRay讓

19、對(duì)象輪廓突出顯示,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,CSS樣式表,39,（1） Alpha讓對(duì)象呈現(xiàn)漸變半透明效果,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,p filter:alpha(opacity=80,style=0,starX=2,finishX=4);,filter: alpha(屬性=屬性值),0表示全圖統(tǒng)一同一透明度,應(yīng)用在層或表格或圖片中有效。,CSS樣式表,40,（2） Blur讓對(duì)象產(chǎn)生模糊的效果 P158,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,filter: blur(屬性=屬性值),p filter:blur(add=1,directio

20、n=60,strength=2);,CSS樣式表,41,（3） DropShadow讓對(duì)象有一個(gè)下落式的陰影 ,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,p filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0); color:#00ff11,filter: dropshadow(屬性=屬性值),CSS樣式表,42,（4） Glow在對(duì)象的周圍產(chǎn)生光暈而模糊的效果 參數(shù)如下： COLOR：指定發(fā)光的顏色。 STRENGTH：發(fā)光強(qiáng)度的表現(xiàn)，也指光暈的厚度；其大小可以從1到255之間的任何整數(shù)來指定這個(gè)強(qiáng)度。 例如：,1、CSS的

21、濾鏡屬性 （filter） 的應(yīng)用,p filter:glow(color=#880088,strength=3);,CSS樣式表,43,（5）Chroma讓圖像中的某一顏色變成透明色 參數(shù)如下： COLOR屬性：用來指定要變?yōu)橥该魃念伾?，通過該屬性值的設(shè)定，我們可以來過濾某圖象中的指定顏色。 例如： （6）FlipH讓HTML對(duì)象水平轉(zhuǎn)換（沒有參數(shù)） FlipV讓HTML對(duì)象垂直轉(zhuǎn)換（沒有參數(shù)） 例如：,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,p filter:chroma(color=#0000fe)；,p filter:filph,CSS樣式表,44,（7）Wave讓HTML對(duì)

22、象產(chǎn)生水平或是垂直方向上的正弦波形 參數(shù)如下： add：是一個(gè)布爾值，它用來決定是否將原始圖象加入最后的效果之中。0：不使用原圖；1：使用 freq：是指波紋的頻率，也就是指定在對(duì)象上一共需要產(chǎn)生多少個(gè)完整的波紋。 phase：用來設(shè)置正弦波的偏移量，也就是決定波形的形狀，其屬性值的取值范圍為從0到360度。 lightstrength：對(duì)于波紋增強(qiáng)光影的效果，其取值范圍為從0到100。 strength：用來決定波形振幅的大小。,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,CSS樣式表,45,（8） Shadow讓對(duì)象產(chǎn)生陰影效果 參數(shù)如下： color：設(shè)置陰影的顏色。 directi

23、on：設(shè)置投影的方向，取值范圍為度到度，其中0度代表垂直向上，然后每45度為一個(gè)單位，該屬性的默認(rèn)值是向左的270度。 例如：,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,p filter:shadow(color=#00ff00,direction=45)；,CSS樣式表,46,（9） Mask利用一個(gè)對(duì)象在另一個(gè)對(duì)象上產(chǎn)生圖像的遮罩 作用：該濾鏡能夠利用一個(gè)HTML對(duì)象在另一個(gè)對(duì)象上產(chǎn)生圖像的遮罩 ，可以為對(duì)象建立一個(gè)覆蓋于表面的膜，其效果就象戴者有色眼鏡看物體一樣，一般適用于圖象對(duì)象。 參數(shù)：color屬性用來指定要被遮罩的顏色。,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,CS

24、S樣式表,47,（10） Light在HTML元件上放置一個(gè)光影 （沒有參數(shù)） 作用：該濾鏡能夠使html對(duì)象產(chǎn)生一種模擬光源的投射效果。一旦為對(duì)象定義了light濾鏡屬性，那么就可以調(diào)用它的方法來設(shè)置或者改變屬性。 light可用的方法有： MoveLight 移動(dòng)光源 Changcolor 改變光的顏色 AddAmbient 加入包圍的光源 AddPoint加入點(diǎn)光源 Clear 清除所有的光源 AddCone 加入錐形光源 Changstrength 改變光源的強(qiáng)度,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,CSS樣式表,48,（11） Gray把一個(gè)彩色的圖象變成灰色調(diào)圖象 作用

25、：該濾鏡能夠使一張彩色的圖片轉(zhuǎn)變?yōu)榛疑{(diào)圖象，一般適用于圖象對(duì)象。 參數(shù)：該濾鏡沒有附帶參數(shù)。 （12） Invert讓對(duì)象產(chǎn)生照片底片的效果 作用：該濾鏡能夠使圖象產(chǎn)生照片底片的效果，一般適用于圖象對(duì)象。 參數(shù)：該濾鏡沒有參數(shù)。 （13） XRay讓對(duì)象輪廓突出顯示 作用：該濾鏡能夠讓對(duì)象反映出它的輪廓并把這些輪廓加亮顯示，一般適用于圖象對(duì)象。 參數(shù)：該濾鏡沒有參數(shù)。,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,CSS樣式表,49,3、新的濾鏡（要結(jié)合Javascript腳本） (1)Blentrans :混合轉(zhuǎn)換濾鏡，提供淡入淡出效果 duration 參數(shù)：淡入或淡出的時(shí)間，以秒作單

26、位 (2)RevealTrans :提供了更加多變的轉(zhuǎn)換效果 duration：轉(zhuǎn)換的秒數(shù) transition：轉(zhuǎn)換的類型,1、CSS的濾鏡屬性 （filter） 的應(yīng)用,CSS樣式表,50,blendTrans實(shí)例： 5-24bldtrans.html,1、在網(wǎng)頁(yè)中需要實(shí)現(xiàn)淡隱的對(duì)象，可插入div標(biāo)簽，并在id欄中輸入名字，如div1：,CSS樣式表,51,2、在div1中編輯內(nèi)容，輸入文字、插入圖片，如下圖虛線框內(nèi)所示。,CSS樣式表,52,3、編輯id樣式，樣式名即位該層的ID名稱，本例中即為div1。,CSS樣式表,53,4、進(jìn)入代碼視圖，在頭部插入腳本,/若當(dāng)前對(duì)象沒有隱藏,/應(yīng)用

27、第一個(gè)濾鏡,/將對(duì)象沒有隱藏,/播放第一個(gè)濾鏡,CSS樣式表,54,選中“單擊”,編輯超鏈接內(nèi)容為：javascript:fadein(div1),CSS樣式表,55,5、而后預(yù)覽！ 若無效果，可將div1的樣式中添加定位方式為絕對(duì)即可,CSS樣式表,56,若要實(shí)現(xiàn)淡出，只要再加一個(gè)函數(shù)：fadeout(obj)即可,而后在設(shè)計(jì)視圖中添加文字，并將該文字的超鏈接設(shè)置成javascript:fadeout(div1),CSS樣式表,57,revealTrans：5-25 rvlTrans.html, myText=new Array(4); myText0=學(xué)習(xí)網(wǎng)頁(yè)制作！ myText1=使用D

28、reamWeaver！ myText2=制作自己的特色小站！ myText3=! var i=-1; function trans() if (i=3)i=0; elsei+; div1.filters0.Apply(); div1.innerText=myTexti; div1.filters0.Play(); my=setTimeout(trans(),4000); ,CSS樣式表,58,revealTrans： 5-26 rvlTrans_2.html,CSS樣式表,59,2、應(yīng)用濾鏡制作常見特效,（1）文字特效 （2）用樣式表改變鼠標(biāo)的顯示形狀 （3）圖像特效略,CSS樣式表,60,2

29、、應(yīng)用濾鏡制作常見特效匯總,（1）文字特效 用glow濾鏡可以做空心字，方法是將字體顏色設(shè)置為背景色，再將glow濾鏡的strength的值設(shè)置為1或2即可。 這個(gè)效果的代碼如下：,濾鏡實(shí)例,p filter: glow(color=#8C96B5,strength=2) shadow(color=#B4BBCF,direction=135) ,CSS樣式表,61,2、應(yīng)用濾鏡制作常見特效匯總,利用Chroma()濾鏡做圖案文字 例如：,濾鏡實(shí)例, dreamweaver ,CSS樣式表,62,2、應(yīng)用濾鏡制作常見特效,（2）用樣式表改變鼠標(biāo)的顯示形狀 用cursor樣式，取值如下： hand

30、手的形狀 crosshair十字型 text移動(dòng)到文本上的那種效果 wait等待的那種效果 default默認(rèn)效果 help問號(hào) e-size向右的箭頭,ne-resize向右上的箭頭 n-resize向上的箭頭 nw-resize向左上的箭頭 w-resize向左的箭頭 sw-resize左下的箭頭 s-resize向下的箭頭 se-resize向右下的箭頭 auto由系統(tǒng)自動(dòng)給出效果,例如： aa,濾鏡實(shí)例,CSS樣式表,63,2、應(yīng)用濾鏡制作常見特效匯總,陰文 陽(yáng)文,濾鏡實(shí)例,CSS樣式表,64,CSS與網(wǎng)頁(yè)結(jié)合應(yīng)用1、背景的應(yīng)用,background復(fù)合屬性 和font一樣，可以使用復(fù)

31、合屬性一次性設(shè)置與背景相關(guān)的所有屬性值 background的屬性列表的順序依次為： 顏色、圖像、重復(fù)、依附、位置 中間用空格分開，如果某個(gè)屬性值為空，則用默認(rèn)值代替,.style1 background: lightgrey url(boy1.gif) repeat-y fixed 10% 20% ,CSS樣式表,65,CSS與網(wǎng)頁(yè)結(jié)合應(yīng)用背景的應(yīng)用,在頁(yè)面上添加純裝飾性的圖像，同時(shí)又希望將圖像從內(nèi)容重分離出來 創(chuàng)建一個(gè)內(nèi)容為空的div，并將該圖像設(shè)置為其背景圖 創(chuàng)建圓角框 簡(jiǎn)單的圓角框：simple-fixed-rounded.htm 高度可變的圓角框：advanced-fixed-rou

32、nded.htm 高度寬度都可變的圓角框：advanced-flexible-rounded.htm 創(chuàng)建陰影效果 簡(jiǎn)單的陰影：easy-drop-shadow.htm 使用負(fù)值的空白邊偏移技術(shù) 帶邊框：easy-drop-shadow2.htm,#branding width:700px; height:200px; background: url(branding.gif) no-repeat; ,.img-wrapper img margin:-5px 5px 5px -5px; ,CSS樣式表,66,CSS與網(wǎng)頁(yè)結(jié)合應(yīng)用 2、CSS中的布局,要掌握的三個(gè)最重要的CSS概念是： 框模型（

33、box model，或盒模型） 定位（position） 浮動(dòng)（float） 這些概念可以控制在頁(yè)面上安排和顯示元素的方式，形成CSS的基本布局 與傳統(tǒng)的表格控制布局不同 只有掌握這些概念，CSS開發(fā)就會(huì)變得容易 這一部份就介紹布局的可視化模型及相關(guān)的屬性,CSS樣式表,67,CSS的布局,Box Model 是CSS的基石之一 頁(yè)面上的每個(gè)元素被看作是一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、填充、邊框和空白邊(margin)組成,填充出現(xiàn)在內(nèi)容區(qū)域的周圍，如果元素上添加背景，那么背景會(huì)應(yīng)用于由內(nèi)容和填充組成的區(qū)域,添加邊框會(huì)在填充區(qū)域外加一條邊線，線條可以有多種樣式,空白邊是透明的，用來控制元素之間

34、的間隔,CSS樣式表,68,Box Model中的屬性 5-19 boxmoldel.html,填充、邊框和空白邊都可以設(shè)置，默認(rèn)值均為0 注意： 在CSS的BOX模型中，width和height指的是內(nèi)容區(qū)域的寬度和高度 而IE5和IE6在怪異模式中采用自己的非標(biāo)準(zhǔn)的Box模型，width是內(nèi)容、填充和邊框?qū)挾鹊目偤?，height也是如此,CSS樣式表,69,MARGIN-空白邊寬度設(shè)置 包括下列屬性 MARGIN-LEFT MARGIN-RIGHT MARGIN-TOP MARGIN-BOTTOM 也可以使用復(fù)合屬性：margin，按上右下左的順序 margin : auto | leng

35、th 可以使用長(zhǎng)度值或百分?jǐn)?shù)，也可以是auto(由瀏覽器自動(dòng)調(diào)整),#style1 margin-top:100px #style2 margin-left:100px #style3 margin-right:20% #style4 margin-bottom:100pt ,Box Model,Ex: container.htm,CSS樣式表,70,空白邊疊加 當(dāng)兩個(gè)垂直的空白邊相遇時(shí)，它們將形成一個(gè)空白邊，其高度為兩個(gè)空白邊的最大值 當(dāng)一個(gè)元素包含在另一元素中時(shí)，它們的頂/底空白邊也會(huì)發(fā)生疊加 內(nèi)容為空的元素(也沒有邊框和填充)，這時(shí)它的上下空白邊就碰到一起，也要發(fā)生疊加,CSS樣式表,7

36、1,PADDING設(shè)置填充的寬度 使用方法與margin一樣,#style1 padding-top:100px #style2 padding-left:100px #style3 padding-right:10% #style4 padding-bottom:100pt #style5 padding:100pt ,Box Model,CSS樣式表,72,WIDTH寬度 可以使用長(zhǎng)度值或百分?jǐn)?shù)，也可以是auto(由瀏覽器自動(dòng)調(diào)整或保持該元素的原有大小，如圖像),#style1 width:100px ,HEIGHT高度 設(shè)置方法與width一樣,#style1 height:100px

37、,Box Model,CSS樣式表,73,BORDER對(duì)于邊界的設(shè)置，包括寬度、顏色、線條樣式三種，使用方法相同： border-color : 顏色值列表 設(shè)置各個(gè)邊框的顏色，設(shè)置順序和margin一樣 也可以分別用四個(gè)屬性： border-top-color， border-bottom-color， border-right-color， border-left-color border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 設(shè)置各個(gè)邊框的線條樣

38、式 也可以分別用四個(gè)屬性：border-top-style， border-bottom-style， border-left-style， border-right-style, #style1 border-color: blue green #1f1f1f blue; #style2 border-color: blue; #style3 border-top-color :blue; #style4 border-style : dotted; ,Box Model,CSS樣式表,74,border-width : medium | thin | thick | length 設(shè)置各個(gè)

39、邊框的寬度 也可以分別用四個(gè)屬性： border-top-width，border-right-width，border-bottom-width，border-left-width 也可以使用border-top，border-right，border-bottom，border-left四個(gè)屬性一次性地設(shè)置各個(gè)邊的寬度、樣式和顏色 這四個(gè)屬性使用方法相同，如： border-top : border-top-width border-top-style border-top-color 或使用一個(gè)復(fù)合屬性設(shè)置所有屬性值： border : border-width border-style

40、 border-color,#style1 border-bottom: 25px solid red; border-left: 25px solid yellow; #style2 border-width: 1px thin 5px thick; #style1 border-top-width :20px; p border: thick double yellow; ,CSS樣式表,75,定位與顯示,CSS的定位與顯示屬性可以把一個(gè)HTML元素定位在網(wǎng)頁(yè)中的任何位置 定位與布局密切相關(guān) CSS中有三種基本的定位機(jī)制 普通流：顯示的位置由元素在HTML文件中的位置決定 浮動(dòng)：可以左右移

41、動(dòng)，直到碰到包含框或其它浮動(dòng)框 絕對(duì)定位：可以直接將元素定位在頁(yè)面上地任何位置 層疊順序 進(jìn)行CSS定位時(shí)，有可能發(fā)生多個(gè)元素的重疊 需要設(shè)置元素在Z軸上的層疊順序 與定位相關(guān)的屬性主要有14個(gè) 可參考：/TR/CSS21/visuren.html,CSS樣式表,76,普通流定位機(jī)制 5-28 relative.thml,按照元素的類型和在HTML源文件中的出現(xiàn)順序進(jìn)行定位 就是block元素（如p、h、div）（塊級(jí)框）從上到下一個(gè)接一個(gè)的排列 inline元素（如span、strong元素）在行中水平布置 除非特殊的指定，否則所有的框都在普通流中定位 相對(duì)定

42、位 相對(duì)于元素在普通文本流中的初始位置 如果一個(gè)元素進(jìn)行相對(duì)定位，它將以它所在的位置(即它在普通流中的位置)為初始點(diǎn)，然后，可以通過設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的初始點(diǎn)進(jìn)行移動(dòng),使用相對(duì)定位時(shí)，元素仍然占據(jù)原來的空間，因此被看作普通流定位模型的一個(gè)特殊情況 另外，移動(dòng)元素可能導(dǎo)致覆蓋其它元素,#style1 position: relative;left:20px;top:20px ,Ex: relative.htm,絕對(duì)定位 5-29 absolute.html,可以把某個(gè)元素精確的定位在某個(gè)地方 絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)普通流中的空間，普通文檔流中其他元素

43、的布局就像絕對(duì)定位的元素不存在時(shí)一樣 絕對(duì)定位的元素的位置是相對(duì)于最近的父元素而言的,固定定位 是絕對(duì)定位的一個(gè)特殊情況 與絕對(duì)定位相似，唯一不同的是絕對(duì)定位是相對(duì)于父元素的某一個(gè)位置，而固定定位則是固定在瀏覽器的視框位置 這樣當(dāng)窗口滾動(dòng)時(shí)，固定定位的元素不會(huì)隨之滾動(dòng)，總是出現(xiàn)在屏幕的固定位置,#style1 position:absolute;left:20px;top:20px ,#style1 position:fixed; left:20px; top:20px ,Ex: absolutePos.htm,CSS樣式表,78,浮動(dòng) 5-30float.htm,浮動(dòng)框可以左右移動(dòng)，直到它的

44、外邊緣碰到包含框或另一浮動(dòng)框的邊緣 當(dāng)元素浮動(dòng)時(shí)，它將不再處于普通文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會(huì)縮短行框，產(chǎn)生文字環(huán)繞的效果,Ex: floating-boxes.htm,Ex: clear/text-round.htm,CSS樣式表,79,浮動(dòng),浮動(dòng)框覆蓋了普通文本流中塊框的部分邊框和背景，但行框縮短給浮動(dòng)框騰出空間,三個(gè)box都浮動(dòng)了，向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框,#style1 float: left; ,CSS樣式表,80,浮動(dòng),如果水平位置沒有空間了，則box3會(huì)跑到下面去,如果box2的高度沒有box1高度大，box1減去box2的高度的部分會(huì)把box3攔住,CS

45、S樣式表,81,浮動(dòng)框不再處于普通文檔流中，會(huì)覆蓋其它的塊框；而浮動(dòng)框旁的行框則會(huì)被縮短，使其環(huán)繞浮動(dòng)框 如果要為浮動(dòng)元素留出垂直空間，使其它的元素不在其兩側(cè)顯示，可以對(duì)其周圍的元素使用清理屬性 clear : none | left |right | both 添加了clear屬性的元素，通過自動(dòng)增加空白邊，達(dá)到留出垂直空間的效果,CSS樣式表,82,Clear屬性,實(shí)例：有一圖片和一段文字，圖片浮動(dòng)到左側(cè)，文字浮動(dòng)到右側(cè)，希望將圖片和文本包含在另一個(gè)具有背景色和邊框的元素中,浮動(dòng)元素不占普通文本流的空間，容器元素成空元素,設(shè)置了clear屬性的空div元素。移到了浮動(dòng)框的下面，容器元素得到

46、延伸，包含了浮動(dòng)元素, .clear clear: both; .news background-color:#eaeaea; border: solid 1px #999; width: 500px; .news img float: left; padding: 10px 0 10px 10px; .news p float: right; width: 350px; margin: 0; padding: 10px 10px 10px 0; ,Ex: enclosing-floats.htm,CSS樣式表,83,CSS定位與顯示,POSITION設(shè)置定位方式 屬性值：static | a

47、bsolute | fixed | relative,#style1 position:absolute； right:10px;bottom:10px; #style2 position:relative; ,top, left, right, bottom 設(shè)置元素位置 以position定義出來的原點(diǎn)為基準(zhǔn)，設(shè)置元素的位置,CSS樣式表,84,CSS定位與顯示,VISIBILITY設(shè)置對(duì)象是否可見 定義這個(gè)層級(jí)是不是要在畫面上顯示出功能來，最常利用java script來動(dòng)態(tài)控制某個(gè)層級(jí)的顯示狀況，進(jìn)而達(dá)到動(dòng)態(tài)的效果 默認(rèn)值是visible，不顯示則設(shè)定成hidden display-設(shè)

48、置對(duì)象顯示方式 display : block | none | inline | 可以各種不同的方式顯示對(duì)象 display=none;與visibility=hidden;是不一樣的 后者為隱藏的對(duì)象保留其占據(jù)的物理空間，而前者則不保留 Ex: display.htm,#style1 visibility:visible #style1 visibility:hidden ,CSS樣式表,85,CSS定位與顯示,Z-INDEX設(shè)置層疊順序 當(dāng)定位多個(gè)元素并將它們相互重疊時(shí)，可以使用該屬性設(shè)置元素在Z軸的層疊順序 z-index : number 屬性值越大表示在越上層 這邊填入的數(shù)字沒有單

49、位,#style1 z-index:100 ,CSS樣式表,86,CSS中的布局,使用CSS布局技術(shù)可以完成頁(yè)面整體布局，實(shí)現(xiàn)各種布局樣式 CSS布局技術(shù)都基于三個(gè)基本概念：定位、浮動(dòng)和空白邊操縱 基本布局方式有很多 按外觀分，有單列布局、兩列布局、三列布局等 按實(shí)現(xiàn)技術(shù)分，有基于自動(dòng)空白邊的布局、浮動(dòng)布局等 按適應(yīng)性分，有固定寬度布局、流式布局，彈性布局等,CSS樣式表,87,居中布局,單列居中設(shè)計(jì)，是最基礎(chǔ)的布局方式 可以使用自動(dòng)空白邊方法，Ex: centering-auto-margin.htm 可以使用相對(duì)定位和負(fù)空白邊方法，Ex：centering-negative-margin.

50、htm, #wrapper width: 720px; margin: 0 auto; text-align: left; , #wrapper position: relative; left: 50%; width: 720px; margin-left: -360px; ,CSS樣式表,88,多列浮動(dòng)布局,兩列浮動(dòng)布局 Ex：2-col-fixed.htm,三列浮動(dòng)布局 Ex:3-col-fixed.htm content div包含了兩個(gè)div, , ,CSS樣式表,89,流式布局和彈性布局,流式布局 寬度用百分?jǐn)?shù)進(jìn)行設(shè)置 使整體布局隨瀏覽器窗口的伸縮而伸縮 Ex:3-col-liqu

51、id.htm 彈性布局 以em為單位設(shè)置寬度 在字號(hào)增加時(shí)，整個(gè)布局隨之而擴(kuò)大 Ex:3-col-elastic.htm 混合布局 可以組合流式布局與彈性布局，以em設(shè)置寬度，以百分比設(shè)置最大寬度 在極端情況下都可以有較好的整體效果 Ex:3-col-hybrid.htm,CSS樣式表,90,偽列(Faux),前面的例子中，導(dǎo)航和次要內(nèi)容區(qū)都有一個(gè)淺灰色的背景，但如果正文比較長(zhǎng)，導(dǎo)航和次要內(nèi)容區(qū)域沒有擴(kuò)展到整個(gè)內(nèi)容高度，它們的背景也不會(huì)拉長(zhǎng),CSS樣式表,91,偽列(Faux),為了使背景能隨正文的大小自動(dòng)延伸，需要使用偽列技術(shù) 固定寬度的偽列 創(chuàng)建背景圖案條，然后設(shè)置成“縱向平鋪”（repe

52、at-y） Ex:faux-3-col-fixed.htm 可變寬度的偽列 要使用背景圖像的百分比定位方法 Ex:faux-3-col-liquid.htm,background: #fff url(images/bg-fixed.gif) repeat-y left top;,CSS樣式表,92,鏈接樣式,在CSS樣式中，定義鏈接的各種狀態(tài) a:link 沒有接觸過的鏈接 用于定義了鏈接的常規(guī)狀態(tài)。如果希望各種鏈接都相同，就只需要定義這種鏈接狀態(tài)。這種鏈接狀態(tài)是基本的 a:visited 訪問過的鏈接 能清楚的判斷已經(jīng)訪問過的鏈接 a:hover 鼠標(biāo)放在鏈接上的狀態(tài) 鼠標(biāo)放到一個(gè)鏈接上，鏈接就會(huì)產(chǎn)生變化；當(dāng)鼠標(biāo)離開這個(gè)鏈接時(shí)，這種狀態(tài)就消失 a:active 在鏈接上按下鼠標(biāo)時(shí)的狀態(tài) 注意選擇器的順序： a:link, a:visited, a:hover, a:active Ex:比較兩種寫法，link.htm, a:link, a:visite