1、第8章 級聯(lián)樣式表（CSS）技術,CSS就是一種叫做樣式表（style sheet）的技術，也有人稱之為層疊樣式表（Cascading Style Sheet）。在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變整個頁面的風格。,8.1CSS簡介,CSS樣式表的特點如下: 將顯示格式和文檔結構分離 對HTML語言處理樣式的最好補充 體積更小加快網頁下載速度 實現(xiàn)動態(tài)更新、減少工作量 支持CSS的瀏覽器增多,8.2樣式定義,定義CSS的語句形式如下： selector property:value;pro

2、perty:value; SELECTOR：選擇符。 當多個對象具有相同的樣式定義時，多個對象之間可以用逗號分隔,8.2.1樣式定義的格式,在CSS樣式中有3種選擇符分別是 HTML選擇符 Class選擇符 ID選擇符,8.2.2選擇符的分類,HTML選擇符 HTML選擇符就是HTML的標記符，例如P、BODY、A等。如果用CSS定義了他們，那么在整個網頁中，該標識的屬性都應用定義中的設置。HTML選擇符的定義方法如下： tagproperty:value,Class選擇符 Class選擇符可以分為兩種，一種是相關的class selector，它只與一種HTML標記有關系。它的語法格式如下：

3、 Tag.Classnameproperty:value 第二種是獨立Class選擇符，它可以被任何HTML標記所應用。 它的語法格式如下： .Classnameproperty:value,ID選擇符 ID選擇符其實與獨立的Class選擇符的功能一樣，而他們的區(qū)別在于語法和用法不同。它的語法格式如下： #IDnameproperty:value ID選擇符的用法是在HTML標記中應用ID屬性引用CSS樣式,8.3使用樣式,用標記將樣式表嵌入在HTML文件的頭部。標記的屬性type指明樣式的類別，除了CSS樣式表外，還有Netscape瀏覽器使用的JSS（JavaScript Style Sh

4、eets，Java腳本樣式表）樣式表，其樣式類別為text/javascript；type的默認值為text/css。標記內定義的前后加上注釋符的作用是使不支持CSS的瀏覽器忽略樣式表的定義。嵌入樣式表的作用范圍是在本HTML文件內。,8.3.1嵌入樣式表,如果多個HTML文件要共享樣式表，可以將樣式表定義為一個獨立的CSS樣式文件。HTML文件在頭部用標記鏈接到CSS樣式文件。,8.3.2鏈接外部樣式表,這種方式是在HTML文件的頭部標記之間，用CSS樣式表的import聲明引入外部樣式表。 格式為： import URL(外部樣式文件名); ,8.3.3引入外部的樣式表,這種方式是在HTM

5、L標記中，將定義的樣式規(guī)則作為標記style屬性的屬性值。樣式定義的作用范圍僅限于此標記范圍之內。一個內嵌樣式的應用如下： 要在一個HTML文件中使用內聯(lián)樣式，必須在該文件的頭部對整個文件進行單獨的樣式表語言聲明，聲明如下： ,8.3.4內嵌樣式,樣式表的作用優(yōu)先順序遵循以下原則： 內聯(lián)樣式中所定義樣式的優(yōu)先級最高。 其他樣式按其在HTML文件中出現(xiàn)或者被引用的順序，遵循就近原則，靠近文本越近的優(yōu)先級越高。 選擇符的作用優(yōu)先順序為：上下文選擇符、類選擇符、ID選擇符，優(yōu)先級依次降低。 未在任何文件中定義的樣式，將遵循瀏覽器的默認樣式。,8.3.5CSS樣式的優(yōu)先級,8.4Style對象,內嵌樣

6、式是使用標簽屬性直接為單個HTML元素應用的樣式表(CSS)指派。而使用 style對象可以檢查這些指派，并進行新的指派或更改已有的指派。要使用style對象，應該在元素對象上使用style關鍵字。要獲得內嵌樣式的當前設置，應該在style對象上使用對應的style對象的屬性。,8.4.1 style元素對象,1檢索樣式表中的屬性值 在Netscape 6.0以后的版本中，使用Style對象檢索屬性值。 語法： document.getElementById(對象名稱).style.屬性 在IE瀏覽器中，使用Style對象檢索屬性值。 語法： document.all(對象名稱).style.

7、屬性,8.4.2 style元素對象的樣式標簽屬性和樣式屬性,2樣式標簽屬性和樣式屬性,3顏色和背景屬性 （1）BackgroundColor屬性 BackgroundColor屬性用于設置或檢索對象的背景顏色。其對應的樣式標簽屬性為background-color屬性。 語法： background-color: color color：指定顏色。,（2）Color屬性 Color屬性用于設置或檢索對象的文本顏色，無默認值。其對應的樣式標簽屬性為color屬性。 語法： color : color color：指定顏色。,（3）backgroundImage屬性 backgroundImag

8、e屬性用來設置或檢索對象的背景圖像。其對應的樣式標簽屬性為background-image屬性。 語法： background-image : none | url (url) none：無背景圖。 url：使用絕對或相對地址指定背景圖像。,（4）backgroundPosition屬性 backgroundPosition屬性用來設置或檢索對象的背景圖像位置。必須先指定background-image屬性。其對應的樣式標簽屬性為background-position屬性。 語法： background-position : length | length background-positio

9、n : position | position length ：百分數(shù) | 由浮點數(shù)字和單位標識符組成的長度值。 position ：top | center | bottom | left | center | right,（5）backgroundRepeat屬性 backgroundRepeat屬性用來設置或檢索對象的背景圖像是否及如何鋪排。必須先指定對象的背景圖像。其對應的樣式標簽屬性為background-repeat屬性。 語法： background-repeat : repeat | no-repeat | repeat-x | repeat-y repeat：背景圖像在縱向和

10、橫向上平鋪。 no-repeat：背景圖像不平鋪。 repeat-x ：背景圖像在橫向上平鋪。 repeat-y：背景圖像在縱向平鋪。,（6）BackgroundAttachment屬性 BackgroundAttachment屬性用來設置或檢索背景圖像是隨對象內容滾動還是固定的。其對應的樣式標簽屬性為background-attachment屬性。 語法： background-attachment : scroll | fixed scroll：背景圖像是隨對象內容滾動。 Fixed：背景圖像固定。,4邊框屬性 （1）borderColor屬性 borderColor屬性用于設置或檢索對象

11、的邊框顏色。其對應的樣式標簽屬性為border-color屬性。 語法： border-color：color,（2）borderWidth屬性 borderWidth屬性用于設置或檢索對象上下左右邊框的寬度。其對應的樣式標簽屬性為border-width屬性。 語法： border-width:border-top-width border-left-width border-bottom-width border-right-width,（3）borderStyle屬性 borderStyle屬性用于設置或檢索對象上下左右邊框的樣式。其對應的樣式標簽屬性為border-style屬性。 語

12、法： border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove,5定位屬性 （1）clip屬性 clip屬性檢索或設置對象的可視區(qū)域。區(qū)域外的部分是透明的。必須將postiton的值設為absolute，此屬性方可使用。其對應的樣式標簽屬性為clip屬性。 語法： clip : auto | rect( number number number number ) auto：對象無剪切。 rect（number number number number）：依據上-右-下-左的順序提供自對象左上角為

13、（0,0）坐標計算的4個偏移數(shù)值，其中任意數(shù)值都可用auto替換，即為此邊不剪切。,（2）top屬性 top屬性用于設置或檢索對象相對于文檔層次中下一個定位對象的上邊界的位置。其對應的樣式標簽屬性為top屬性。 語法： top : auto | length auto：默認值。無特殊定位，根據HTML定位規(guī)則在文檔流中分配。 Length：由浮點數(shù)字和單位標識符組成的長度值/百分數(shù)。必須定義position屬性值為absolute或者relative此取值方可生效。,（3）left屬性 left屬性用于設置或檢索對象相對于文檔層次中下一個定位對象的左邊界的位置。其對應的樣式標簽屬性為left屬

14、性。 語法： left : auto | length auto：默認值。無特殊定位，根據HTML定位規(guī)則在文檔流中分配。 Length：由浮點數(shù)字和單位標識符組成的長度值|百分數(shù)。必須定義position屬性值為absolute 或者relative此取值方可生效。,（4）paddingTop屬性 paddingTop屬性用于設置對象與其最近一個定位的父對象頂部相關的位置。其對應的樣式標簽屬性為paddingTop屬性。 語法： padding-top:length length：由浮點數(shù)字和單位標識符組成的長度值或者百分數(shù)。百分數(shù)是基于父對象的寬度。,（5）Position屬性 Posit

15、ion屬性用于檢索對象的定位方式，其中包括posLeft、posRight、posTop和posBottom屬性，表示檢索對象的4個不同定位方式。其對應的樣式標簽屬性為position屬性。 語法： position : static | absolute | fixed | relative static：無特殊定位，對象遵循HTML定位規(guī)則。 absolute：將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框。 relative：對象不可層疊，但將依據left，right，top

16、，bottom等屬性在正常文檔流中偏移位置 fixed：IE5.5及NS6尚不支持此屬性。,6字體屬性 （1）fontStyle屬性 fontStyle屬性用于設置或檢索對象中的字體樣式。其對應的樣式標簽屬性為font-style屬性。 語法： font-style : normal | italic | oblique normal：默認值。正常的字體。 italic：斜體。對于沒有斜體變量的特殊字體，將應用 oblique。 oblique：傾斜的字體。,（2）fontVariant屬性 fontVariant屬性用于設置或檢索對象中的文本是否為小型的大寫字母。其對應的樣式標簽屬性為fon

17、t-variant屬性。 語法： font-variant : normal | small-caps normal：默認值。正常的字體。 small-caps：小型的大寫字母字體。,（3）fontWeight屬性 fontWeight屬性設置或檢索對象中的文本字體的粗細。其作用由用戶端系統(tǒng)安裝的字體的特定字體變量映射決定，系統(tǒng)選擇最近的匹配。也就是說，用戶可能看不到不同值之間的差異。其對應的樣式標簽屬性為font-weight屬性。 語法： font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500

18、 | 600 | 700 | 800 | 900,（4）fontSize屬性 fontSize屬性設置或檢索對象中的字體尺寸。其對應的樣式標簽屬性為font-size屬性。 語法： font-size : xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length,（5）lineheight屬性 lineheight屬性檢索或設置對象的行高。即字體最底端與字體內部頂端之間的距離。其對應的樣式標簽屬性為line-height屬性。 語法： line-height : no

19、rmal | length normal：默認值。默認行高 length：百分比數(shù)字 | 由浮點數(shù)字和單位標識符組成的長度值，允許為負值。其百分比取值是基于字體的高度尺寸。,（6）fontFamily屬性 fontFamily屬性設置或檢索用于對象中文本的字體名稱序列。默認值為 Times New Roman。其對應的樣式標簽屬性為font-family屬性。 語法： font-family: name font-family:ncursive | fantasy | monospace | serif | sans-serif name：字體名稱。按優(yōu)先順序排列。以逗號隔開。如果字體名稱包含

20、空格，則應使用引號括起。 第二種聲明方式使用所列出的字體序列名稱。,（7）textDecoration屬性 textDecoration屬性用于設置或檢索對象中的文本的裝飾。其對應的樣式標簽屬性為text-decoration屬性。 語法： text-decoration: none | underline | blink | overline | line-through,7其他屬性 zoom屬性用于設置或檢索對象的縮放比例。其對應的樣式標簽屬性為zoom屬性。 語法： zoom : normal | number normal：使用對象的實際尺寸。 number：百分數(shù)|無符號浮點實數(shù)。浮

21、點實數(shù)值為1.0或百分數(shù)為100%時相當于此屬性的normal值。,8.5CSS屬性,8.5.1字體屬性,font復合字體屬性 語法： font ：font-style | font-variant | font-weight | font-size | line-height | font-family 該屬性是復合屬性。聲明方式中的參數(shù)必須按照如上的排列順序。每個參數(shù)僅允許有一個值。忽略的將使用其參數(shù)對應的獨立屬性默認值。,font-family指定字體 語法： font-family：字體1，字體2，字體3 可以設置多種字體。按優(yōu)先順序排列，以逗號隔開。如果字體名稱包含空格，則應使用引號

22、括起。當瀏覽器找不到第一種字體，將使用第二種字體替代，以此類推。,font-size設定字號 語法： font-size：| ：指的是絕對長度。使用時應謹慎地考慮到其在不同瀏覽器上瀏覽時可能出現(xiàn)的不同效果。對于一個用戶來說，絕對長度的字體有可能會很大或者很小，如xx-small | x-small | small | medium | large | x-large | xx-large等。 ：指的是相對長度，一般使用百分比實現(xiàn)，其百分比取值是基于父對象中字體的尺寸。,font-style設定樣式 語法： font-style：normal | italic |oblique normal：正

23、常值。 italic：斜體。 oblique：偏斜體。,font-weight設定字體粗細 語法： font-weight：normal | bold | bolder | lighter |100-900,8.5.2文本屬性,letter-spacing設定字符間距 語法： letter-spacing：normal | length normal：正常值。 length：指定長度，包含長度單位。,word-spacing設定單詞間距 語法： word-spacing：normal | length normal：正常值。 length：指定長度，包含長度單位。,text-decoratio

24、n設定文字修飾 語法： text-decoration：underline | overline | line-through | blink | none,text-align設定橫向文字對齊方式 語法： text-align：left | right | center | justity,vertical-align設定縱向文字對齊方式 語法： vertical-align：super | sub | top | middle | bottom | text-top | text-bottom,text-indent設定文字首行縮進 語法： text-indent：value 使用text

25、-indent屬性可以設定頁面文字首行縮進。,line-height設定文字行高 語法： line-height：value 使用line-height屬性可以設定頁面文字行高。,8.5.3顏色和背景屬性,color設定顏色 語法： color：color-value HTML語言使用十六進制的RGB顏色值對顏色進行控制，即顏色可以通過英文名稱或者十六進制來表現(xiàn)。如標準的紅色，可以用RED作為名稱來表現(xiàn)，也可以用#FF0000作為十六進制來表現(xiàn)。能夠使用的預設顏色命名總共有140種，常用的有16種：Black、Olive、Teal、Red、Blue、Maroon、Navy、Gray、Lime、

26、Fuchsia、White、Green、Purple、Silver、Yellow和Aqua。,background-color設定背景顏色 語法： background-color：color-value,background-image設定背景圖像 語法： background-image：none | url(url) none：無背景圖。 url(url)：使用絕對或相對地址指定背景圖像。不僅可以輸入本地圖像文件的路徑和文件名稱，也可以用URL的形式輸入其他位置的圖像名稱。 頁面中可以用JPG或者GIF圖片作為背景圖，這與向網頁中插入圖片不同，背景圖像放在網頁的最底層，文字和圖片等都位于其上。,background-repeat設定背景圖像平鋪 語法： background-repeat：repeat | repeat-x | repeat-y | no-repeat,background-attachment設定背景圖像是否跟隨頁面內容滾動 語法： background-attachment：scroll | fixed scroll：背景圖像跟隨頁面內容滾動。 fixed：背景圖像固定。,background- position設定背景圖像位置 語法： background- position：value