第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ)

1、第二章 靜態(tài)網(wǎng)頁制作基礎(chǔ)第五節(jié) 網(wǎng)頁樣式表(CSS)一、CSS概述由于HTML語言的網(wǎng)頁排版功能十分有限（例如不能精確定位網(wǎng)頁元素）并且網(wǎng)頁視覺效果難以令人滿意，因此，產(chǎn)生了CSS技術(shù)，作為HTML的補(bǔ)充。應(yīng)用CSS技術(shù)，可以使網(wǎng)頁達(dá)到很好視覺效果。脫離了HTML，CSS就失去了意義。因?yàn)閺母旧螩SS就是對(duì)HTML技術(shù)的補(bǔ)充。CSS是Cascading Style Sheet（層疊樣式表，級(jí)聯(lián)樣式表）的縮寫。它允許作者在HTML文檔中加入字體、顏色、定位屬性等樣式。CSS定義了一組樣式，樣式中的屬性在HTML中依次出現(xiàn)，并將控制結(jié)果顯示在瀏覽器中，比如，定義一組文本為綠色、斜體和Verdan

2、a字體。樣式可以直接在HTML文檔中夾帶，也可以單獨(dú)存為文件，并在HTML中調(diào)用，此時(shí)，一組樣式表可以作用于多個(gè)頁面甚至整個(gè)站點(diǎn)，具有更好的易用性、靈活性和可擴(kuò)展性。多種樣式可以被用于同一個(gè)網(wǎng)頁中，依照重要性不同而分級(jí)。如果同一段HTML被定義了有沖突的樣式，則靠近實(shí)際內(nèi)容的定義將生效。二、CSS與HTML的結(jié)合方式1、在網(wǎng)頁頭部定義CSS樣式定義方法：選擇符，選擇符屬性：值；屬性：值選擇符通常指HTML標(biāo)志，即樣式表所控制的內(nèi)容，不同選擇符之間用逗號(hào)分隔；屬性和值之間用冒號(hào)分隔；不同屬性用分號(hào)分隔，最后一個(gè)屬性之后的分號(hào)可以省略。實(shí)例：h3,tdfont-family:Arial;font-

3、size:12px實(shí)例規(guī)定了在整個(gè)網(wǎng)頁中，所有三號(hào)標(biāo)題都是12px大小Arial字體。2、規(guī)定某特定標(biāo)志的CSS樣式定義方法：HTML代碼 規(guī)定了某個(gè)特定標(biāo)志控制范圍內(nèi)的樣式。實(shí)例：?jiǎn)卧駜?nèi)容為綠色Arial字體 3、用CSS文件進(jìn)行廣域定義如果多個(gè)文檔使用相同的樣式，例如追求統(tǒng)一的網(wǎng)頁風(fēng)格，最好使用獨(dú)立于HTML文檔的CSS文件。用文本編輯軟件編寫一個(gè)樣式表文件，然后使所有的HTML頁面都調(diào)用這個(gè)CSS文件，從而使這些頁面具有相同的風(fēng)格。CSS文件是以.css為擴(kuò)展名的純文本文件。CSS文件格式：格式實(shí)例選擇符,選擇符屬性：值；屬性：值選擇符,選擇符屬性：值；屬性：值選擇符,選擇符屬性：值；

4、屬性：值選擇符,選擇符屬性：值；屬性：值h1,h2,h3color:redbodybackground-color:#cccccc;font-family:Arial,Verdana pline-height:200%ul lifont-size:70%多個(gè)屬性值之間用逗號(hào)分隔；實(shí)例中，只定義了無序列表的表項(xiàng)字體大小為70%，所以u(píng)l和li之間是空格，而非逗號(hào)。網(wǎng)頁中通過在頭部定義link標(biāo)志調(diào)用CSS文檔。 4、自定義選擇符CSS允許用戶自定義選擇符，并在用戶希望的位置引用。以“.”開頭定義選擇符。用class屬性引用自定義選擇符樣式。例：定義：.page_titlefont-size:12

5、px引用：?jiǎn)卧駜?nèi)容三、CSS常用屬性和單位1、CSS常用屬性屬性功能說明font-family:gill,Verdana字體如果字體名含有空格，要將字體名加上雙引號(hào)；已經(jīng)在雙引號(hào)里的要降級(jí)為單引號(hào)。font-style:italic字體italic或oblique為斜體；normal為正常體。font-weight:normal字粗細(xì)值為lighter,normal,bold,bolder等，逐漸加粗；值業(yè)可以為100，200，300等。font-size:12px字大小單位有px、ex、em等。color:red顏色值為 1）red、yellow、blue形式；2）rgb(255,23,1

6、00)形式；3）#rrggbb形式。background-color:red背景顏色值同上。值為transparent時(shí)，為透明。background-image:none背景圖值為none，無背景圖；值為url(圖像文件的URL)，指定背景圖。text-decoration:none特殊字體值為none,無特殊；line-through,刪除線；underline,下劃線；overline,上劃線；blink,閃爍等。text-align:left文字對(duì)齊值為left、right、center、justify等。list-style-type:disc列表符樣式值為disc()、circle

7、()、square()、decimal(1,2,3)、lower-roman(i,ii,iii)、upper-roman、lower-alpha、none等。border-style:solid邊框樣式值為none(無)、dotted(點(diǎn)虛線)、dash(短線虛線)、solid(實(shí)線)、double(雙線)、groove（3d溝槽狀）、ridge（3d脊?fàn)睿?、inset（3d內(nèi)嵌）、outset（3d外嵌）等。border-color:red邊框顏色值為 1）red、yellow、blue形式；2）rgb(255,23,100)形式；3）#rrggbb形式。2、CSS常用單位CSS的常用單位有

8、cm、mm、in、pt、pc、px、em、ex等。單位名稱說明px像素pixel，是相對(duì)屏幕分辨率而言的。cm厘米1/100米mm毫米1/1000米in英寸1in=2.54cmpc派卡1pc=1/6inem瀏覽器默認(rèn)字體M或H的高度為1em。原理：讀取瀏覽器默認(rèn)字號(hào)大小值，如12pt；讀取em值，如1.5em；確定最終顯示的大小為12pt*1.5=18ptpt點(diǎn)1pt=0.3478mm四、用CSS定位文檔元素CSS用來定位文檔元素的屬性有：CSS屬性屬性取值說明positionabsolute絕對(duì)位置的元素是獨(dú)立的relative各元素位值關(guān)系是相對(duì)的left和top絕對(duì)值或百分比定義元素的左

9、上定點(diǎn)坐標(biāo)width和height絕對(duì)值或百分比定義元素的寬和高z-index整數(shù)或auto按照z-index值的遞增順序由底層至頂層堆砌元素visibilityinherit繼承：子元素在沒有被定義樣式的前提下，它將繼承上級(jí)元素所定義的樣式。例如：The headline is important!，設(shè)置h3為藍(lán)色，而子元素em沒有定義顏色，它將繼承h3的藍(lán)色。visible元素可見hidden隱藏元素五、CSS濾鏡濾鏡是CSS最精彩的部分，將網(wǎng)頁引入絢麗多姿世界。CSS的濾鏡屬性的標(biāo)識(shí)符是filter。書寫格式為filter：filtername（parameters）常用濾鏡如下表：al

10、pha屬性alpha設(shè)置透明度。格式：filter:alpha(opacity=opcity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY)Opacity代表透明度等級(jí)，可選值從0到100，0代表完全透明，100代表完全不透明。 Style參數(shù)指定了透明區(qū)域的形狀特征。其中0代表統(tǒng)一形狀；1代表線形；2代表放射狀；3代表長(zhǎng)方形。Finishopacity是一個(gè)可選項(xiàng)，用來設(shè)置結(jié)束時(shí)的透明度，從而達(dá)到一種漸變效果，它的值也是從0到100。 StartX和StartY代表漸變透明效果的開始坐標(biāo)，finishX和finishY代表漸變透明效果的結(jié)束坐標(biāo)。DropShadow屬性DropShadow屬性為對(duì)象添加陰影效果。格式：Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,Positive=positive)該屬性一共有四個(gè)參數(shù)： Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的偏移量。偏移量必須用整數(shù)值來設(shè)置。如果設(shè)置為正整數(shù)，