計算機網(wǎng)絡(luò)和多媒體技術(shù)

1、計算機網(wǎng)絡(luò)和多媒體技術(shù)常寶寶北京大學(xué)信息技術(shù)學(xué)院層疊樣式表(CSS)介紹什么是層疊樣式表(CSS)?qHTML語言提供了眾多的元素定義超文本文檔，但是在HTML語言中，面向內(nèi)容和面向形式的元素常常混淆在一起(如：)，并且HTML對文檔格式的支持有限，不能滿足用戶對頁面樣式的更多需求，為了解決這個問題，引入CSS樣式表技術(shù)。qCSS是Cascading Style Sheets的詞首縮寫，中文翻譯為“層疊樣式表”，簡稱樣式表，它是一種改善網(wǎng)頁外觀的技術(shù)。qCSS可以用來精確控制HTML文檔中每個元素的樣式，包括字體、背景、排列方式、區(qū)域尺寸、邊框等。qCSS需要IE4(Internet Expl

2、orer 4.0)和NC4(Netscape 4.0)以上的瀏覽器支持，有些效果需要更高版本的瀏覽器支持。CSS基本語法qCSS的定義由三個部分構(gòu)成：選擇符、屬性和屬性值。qCSS定義的基本格式如下：q選擇符可以是多種形式，一般是你要定義樣式的HTML元素標簽，例如：body、p、table等；屬性和屬性值之間用冒號隔開。如：body color: black選擇符body是指頁面主體部分，color是控制文字顏色的屬性，black是顏色的值，此例的效果是使頁面中的文字為黑色。q參見 css01.html選擇符組q具有相同屬性和值的選擇符可以組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重

3、復(fù)定義。如：p, table font-size: 9pt 效果完全等效于：p font-size: 9pt table font-size: 9pt q參見 css02.html類選擇符q給同類元素定義不同類型的樣式，可以使用類選擇符類選擇符。q類選擇符的格式為：如頁面中希望定義兩個不同的段落樣式，一個段落向右對齊，一個段落居中，可以先定義兩個類：p.right text-align: rightp.center text-align: center然后用在不同的段落里，只要在HTML標記里加入class屬性：這個段落向右對齊的 這個段落是居中排列的q參見 css03.html類選擇符q類選

4、擇符中的HTML元素名稱可以省略，這樣可以把幾個不同的元素定義成相同的樣式。如：.center text-align: center該類可以被應(yīng)用到任何元素上這個標題是居中排列的這個段落也是居中排列的q參見 css04.html包含選擇符q可以單獨針對某種元素包含關(guān)系定義樣式表，元素1里包含元素2，這種方式是對在元素1里的元素2的樣式進行定義，對單獨的元素1或元素2無定義，例如：table a font-size: 12pt 在表格內(nèi)的鏈接改變了樣式，文字大小為12pt，而表格外的鏈接的文字仍為默認大小。q參見 css05.html樣式表的層疊性q層疊性就是繼承性，樣式表的繼承規(guī)則是外部元素的

5、樣式會保留下來繼承給這個元素所包含的其它元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊加在一起，除非另外更改。例如在div元素中嵌套p元素。q當(dāng)樣式表繼承遇到?jīng)_突時，也就是內(nèi)層對某個屬性的屬性值作了和外層不同的規(guī)定，則總是以內(nèi)層定義的樣式為準。q參見 css06.html選擇符的優(yōu)先級q不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優(yōu)先級。q類選擇符優(yōu)先級高于HTML標記選擇符。例如：p color: yellow .blue color: blue則在中起作用的是類選擇符blue。q但可以用!important提升樣式表的優(yōu)先權(quán)，如：

6、p color: yellow !important .blue color: blue則在中起作用的是HTML標記選擇符。q參見 css07.html偽類q偽類是一種特殊的類選擇符，是能被瀏覽器自動識別的特殊選擇符。它的最大的用處是根據(jù)鏈接文字的不同狀態(tài)定義不同的樣式效果。q偽類的語法為：選擇符:偽類名 屬性: 屬性值q偽類名和類名不同，是CSS已經(jīng)定義好的，不能象類選擇符一樣隨意用別的名字，根據(jù)上面的語法可以解釋為對象（選擇符）在某個特殊狀態(tài)下（偽類）的樣式。q類選擇符及其它選擇符也同樣可以和偽類混用：選擇符.類名:偽類名 屬性: 屬性值鏈接元素的偽類q最常用的偽類是關(guān)于鏈接元素4個偽類，

7、分別表示鏈接的4種不同狀態(tài)：link、visited、active、hover（未訪問的鏈接、已訪問的鏈接、激活鏈接和鼠標停留在鏈接上）。通過偽類可以定義不同狀態(tài)下鏈接文字效果，如： a:hover font-size:20ptq參見 css08.html如何在網(wǎng)頁中插入CSSq鏈入外部樣式表q內(nèi)部樣式表q內(nèi)嵌樣式 一個外部樣式表文件可以應(yīng)用于多個頁面。對樣式表文件的改變,所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時，非常有用，不僅減少了重復(fù)的工作量，而且有利于以后的修改、編輯，瀏覽時也減少了重復(fù)下載代碼。 鏈入外部樣式表q可以把所有的樣式定義保存為一個樣式表文件，然后在HTML

8、文檔頭部鏈入該樣式表文件。q在HTML文檔中鏈入外部樣式表使用元素link，該元素必須位于HTML文檔的文檔頭部（即head區(qū)內(nèi)），基本格式是：rel=”stylesheet”表示鏈入的文檔是一個樣式表文檔。type=”text/css”是指文件的類型是CSS樣式表文檔。href=”mystyle.css”是CSS文件所在的位置以及文件名。q參見 css10.html內(nèi)部樣式表q直接在HTML文件head區(qū)內(nèi)定義的樣式表稱為內(nèi)部樣式表。q用于內(nèi)部樣式表定義的HTML元素是style，如：hr color: siennap margin-left: 20pxbody background-ima

9、ge: url(images/back40.gif)內(nèi)嵌樣式表q樣式定義也可以通過設(shè)定HTML元素的style屬性的方式進行，通過這種方法定義的樣式表稱為內(nèi)嵌樣式表。用這種方法，可以很簡單的對某個元素單獨定義樣式。如： 這是一個段落（這個段落顏色為土黃，左邊距為20象素）q參見 css11.html多重樣式表的疊加q如果對同一個HTML元素既使用了外部樣式表,又使用了內(nèi)嵌樣式表或內(nèi)部樣式表，其屬性值將會疊加幾個樣式表，遇到?jīng)_突的地方會以最后定義的為準。例如：首先鏈入一個外部樣式表，其中有：h3 color: red; text-align: left; font-size: 8pt 然后在內(nèi)部

10、樣式表里也定義了h3選擇符：h3 text-align: right; font-size: 20pt 那么這個頁面疊加后的樣式就是：h3 color: red; text-align: right;font-size: 20pt q優(yōu)先級最高的是內(nèi)嵌樣式表，內(nèi)部樣式表高于外部樣式表。元素格式模型寬度邊距邊框填充距內(nèi)容q 參見 yfz.html長度單位qCSS中指定各種元素大小可用三種方式，分別是：q絕對方式單位可以是點(pt=1/72英寸)、英寸(in)以及厘米(cm)等，如：p font-size:20pt b font-size:xx-largeq相對方式單位可以是(em)、像素(px)等，如：p line-height:1.5emq百分比方式相對于某個其它長度的百分比，如： p font-size:150%q 參見 size.htmlCSS字體屬性顏色和背景屬性q參見 css13.html cssbg.html間距屬性q參見 css14.html邊距、填充距屬性q 邊距屬性q 填充距屬性項目符號和編號q 參見 css19.html邊框?qū)傩詑 參見 css15.html圖文混排q 參見 css16.html鼠標屬性q 參見 css17.html其它CSS屬性q定位屬性 直接控