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

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

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

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

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

5、px引用：單元格內(nèi)容三、CSS常用屬性和單位1、CSS常用屬性屬性功能說明font-family:gill,Verdana字體如果字體名含有空格，要將字體名加上雙引號；已經(jīng)在雙引號里的要降級為單引號。font-style:italic字體italic或oblique為斜體；normal為正常體。font-weight:normal字粗細值為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時，為透明。background-image:none背景圖值為none，無背景圖；值為url(圖像文件的URL)，指定背景圖。text-decoration:none特殊字體值為none,無特殊；line-through,刪除線；underline,下劃線；overline,上劃線；blink,閃爍等。text-align:left文字對齊值為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(點虛線)、dash(短線虛線)、solid(實線)、double(雙線)、groove（3d溝槽狀）、ridge（3d脊狀）、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，是相對屏幕分辨率而言的。cm厘米1/100米mm毫米1/1000米in英寸1in=2.54cmpc派卡1pc=1/6inem瀏覽器默認字體M或H的高度為1em。原理：讀取瀏覽器默認字號大小值，如12pt；讀取em值，如1.5em；確定最終顯示的大小為12pt*1.5=18ptpt點1pt=0.3478mm四、用CSS定位文檔元素CSS用來定位文檔元素的屬性有：CSS屬性屬性取值說明positionabsolute絕對位置的元素是獨立的relative各元素位值關系是相對的left和top絕對值或百分比定義元素的左

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

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