1、第第6章章 css樣式表樣式表2022-3-5網頁設計技術2本章內容本章內容 6.1 CSS樣式概述樣式概述 6.2 CSS樣式定義樣式定義 6.3 CSS樣式的使用樣式的使用 6.4 CSS屬性屬性6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式6.6 CSS應用示例應用示例 上機內容上機內容小結小結2022-3-5網頁設計技術36.1 CSS樣式概述樣式概述 nCSS（Cascading Style Sheets）又稱層疊樣式表層疊樣式表，它是一系列格式規(guī)則集合，它能夠定義網頁元素的樣式，如層、文本、表格、鏈接等元素的屬性，一種樣式信息與網頁內容分離的標記性語言。n在CSS樣式

2、出現(xiàn)以前，HTML標簽樣式被廣泛應用，HTML標簽樣式用于控制單個文檔中一定范圍內文本的格式。n而CSS樣式不同，它不僅可以控制單個文檔中一定范圍內網頁元素的格式，而且可采用外部鏈接的方式，控制整個站點內所有網頁的格式。這樣既保證了站點風格的一致性，又提高了工作效率。nCSS樣式生成樣式表文件擴展名為.CSS，當對CSS規(guī)則修改后，所有鏈接該規(guī)則的文檔格式會自動改變，簡化了格式化網頁的工作。返回返回2022-3-5網頁設計技術4CSS樣式由三部分組成：選擇器、屬性和值選擇器、屬性和值。語法格式：語法格式：選擇器選擇器 屬性屬性1:1:值值1;1;屬性屬性2:2:值值2 2 說明：說明：n選擇器

3、用來標識格式元素，可分為3種基本類型：標簽（html）選擇器、ID選擇器、類（class）選擇器。除了基本類型外，還可把基本類型的選擇器組合使用。n屬性和屬性值之間用冒號（:）隔開，定義多個屬性時，屬性之間用分號（;）隔開。n如: bodycolor:black 選擇器body指頁面主體部分，color顏色屬性名，black顏色屬性值，其效果是使頁面中的文字為黑色。6.2 CSS樣式定義樣式定義例例6.16.1 在DW代碼視圖的編輯窗口輸入以下代碼，創(chuàng)建使用樣式頁面的文檔css6_1.html。在標記符中直接嵌套樣式信息 一代人 黑夜給了我黑色的眼睛我卻用它尋找光明提示：style元素是HTM

4、L中的一個標記元素，提供了 一 組 對 應 于 瀏 覽 器 所 支 持 C S S 規(guī) 則 （ 如background 、font-size等），可以使用這個標記元素訪問CSS樣式屬性。2022-3-5網頁設計技術61.HTML1.HTML選擇器選擇器HTML選擇器是最典型的選擇器類型，網頁設計者可為某個或某些HTML標記元素應用樣式定義。pHTMLHTML選擇器的定義方法：選擇器的定義方法： tagproperty:value例如，例如，設置表格中單元格內的文字大小為9pt，顏色為藍色的CSS代碼： td font-size: 9pt; color: bluepCSS可以在一條語句中定義多個

5、選擇器 例如，例如，將段落文本和單元格內的文字設置為藍色的CSS代碼： td,pcolor: bluep組合選擇器組合選擇器(逗號隔開)，其中所有標簽都使用指定樣式。p關聯(lián)選擇器關聯(lián)選擇器(空格隔開,pembackground:yellow) 表示段落中標簽中背景為黃色，而其他地方出現(xiàn)的不受影響 （標記em用來表示強調，其默認樣式為斜體）。6.2 CSS樣式定義樣式定義72.class2.class選擇器（類選擇器）選擇器（類選擇器） 相關的類選擇器相關的類選擇器。它只與一種HTML標記有關系，此類選擇器僅為某個或某些標記符定義類。語法格式：語法格式：Tag.Classnameproperty

6、:value例如：例如： h1.redcolor:red應用：應用：在網頁中需要使用該類的“h1標記元素內”用class屬性引用 吉林省明日科技有限責任公司吉林省明日科技有限責任公司 獨立獨立classclass選擇器選擇器。可被任何HTML標記元素所應用。 語法格式：語法格式：.Classnameproperty:value 例如：例如： .blueonecolor:blue 應用：應用：需要引用該類的任意標記符內使用class屬性 有雨的日子 不知是無意還是天意，有你的日子總有雨！不知是無意還是天意，有你的日子總有雨！ 6.2 CSS樣式定義樣式定義2022-3-5網頁設計技術2022-3

7、-5網頁設計技術83.ID3.ID選擇器選擇器p其實與獨立的class選擇器的功能一樣，區(qū)別在于語法和用法不同。p語法格式語法格式：#IDnameproperty:valuep用法用法:在HTML標記元素中應用ID屬性引用CSS樣式。p例如：例如：#redonecolor:redp應用：應用：紅色熱情p提示：提示：使用.classname和使用#IDname這兩種方式在效果上并沒有區(qū)別，但最好只使用其中之一，以免造成混淆。6.2 CSS樣式定義樣式定義綜合舉例綜合舉例6.26.2：在DW代碼視圖的編輯窗口輸入以下代碼，創(chuàng)建綜合幾種選擇器類型的頁面css6_2.html：選擇器舉例選擇器舉例標題

8、標題1的使用的使用測試關聯(lián)選擇器（沒有關聯(lián)）測試關聯(lián)選擇器（沒有關聯(lián)）測試關聯(lián)選擇器組合（具有關聯(lián)關系）測試關聯(lián)選擇器組合（具有關聯(lián)關系）這是黃河的水這是黃河的水這句話才使用了類這句話才使用了類“hello”的效果。的效果。這里危險這里危險css6_2.htmlcss6_2.html2022-3-5網頁設計技術10返回返回2022-3-5網頁設計技術11一般情況下，CSS樣式使用有四種方式。 1.1.內聯(lián)式樣式內聯(lián)式樣式表表 在現(xiàn)有HTML元素的基礎上，用style屬性把特殊的樣式直接加入到那些標記元素中。 例如例如：內聯(lián)式樣式表 說明：說明：使用內聯(lián)樣式，必須在該文件的頭部對整個網頁文檔進行

9、單獨的樣式表語言聲明：meta http-equiv=text/css這種樣式表只對使用它的元素起作用，而不會影響其它元素，通常用在需要特殊格式的某個網頁對象。這種樣式表將樣式和要展示的內容混在一起，失去了樣式表的優(yōu)點，一般不采用。6.3 CSS樣式使用樣式使用2022-3-5網頁設計技術12 2. 2. 嵌入式樣式嵌入式樣式表表又又稱內部樣式表，稱內部樣式表，包含在HTML文件頭部HEADHEAD的stylestyle標簽內的一系列CSS規(guī)則。書寫格式：書寫格式：6.3 CSS樣式使用樣式使用說明：說明：在此格式中，stylestyle的typetype屬性值須設為text/csstext/

10、css，表示定義的是一個CSS。當不支持CSS的瀏覽器讀到這個屬性時，自動忽略這個樣式表。標記內定義的前后加上注釋符，其作用是使不支持CSS的瀏覽器忽略樣式表的定義。注意：注意：在定義嵌入式樣式表時，一定要放在和標記之間。嵌入樣式表的作用范圍是在本HTML文檔內。2022-3-5網頁設計技術133. 3. 鏈接外部樣式文件鏈接外部樣式文件p先將樣式表寫在一個擴展名為.CSS文件中，樣式在樣式表文件中的定義和嵌入式樣式表的定義是一樣的，此時只是不需要style元素。p在HEAD標記符內使用link標記元素，通過指定相應屬性鏈接到外部樣式表文件。代碼格式： p說明：說明：標簽定義了當前文檔與其他文

11、檔的鏈接信息 rel：表示其它文檔將以何種方式與HTML文檔結合 href：目標文檔的URL6.3 CSS樣式使用樣式使用144. 4. 導入外部樣式文件導入外部樣式文件p這種方式是在HTML文件的頭部標記之間，用CSS樣式表的import聲明引入外部樣式表文件。其格式： import URL(外部樣式文件名);p引入外部樣式表的使用與鏈接到外部樣式表很相似，都是將樣式定義保存為單獨文件。p區(qū)別：區(qū)別：導入方式在瀏覽器下載HTML文件時將樣式文件的全部內容拷貝到import關鍵字位置，以替換該關鍵字；而鏈接外部樣式文件僅在HTML文件需要引用CSS樣式文件中的某個樣式時，瀏覽器才鏈接樣式文件，

12、讀取需要的內容并不進行替換。6.3 CSS樣式使用樣式使用2022-3-5網頁設計技術15例例6.36.3 CSS CSS樣式文件樣式文件應用應用在DW的代碼視圖編輯窗口輸入以下代碼，創(chuàng)建外部樣式表文件sheet1.css、sheet2.css和頁面文件css6_3.html。sheet1.css代碼代碼/* CSS Document */h1font-size: 36px;font-family: 隸書;font-weight: bold;color: #993366;h2 b color:blue.water font-family:隸書; font-size:24px; text-ali

13、gn:righth3.hello font-family:隸書; text-align:center; font-size:36px6.3 CSS樣式使用樣式使用2022-3-5網頁設計技術2022-3-5網頁設計技術16sheet2.css代碼代碼/* CSS Document */#danger color:#990000;font-family:華文彩云;font-size:24pxa:linkcolor:red; text-decoration: none;/*未訪問的鏈接*/a:visitedcolor:blue; text-decoration: none;/*已訪問的鏈接*/a:

14、activecolor:yellow;text-decoration: none;/*活動鏈接*/a:hover color:#990000;text-decoration:underline/*鼠標指針移到上面鏈接的顏色*/h2 b color:green6.3 CSS樣式使用樣式使用2022-3-5網頁設計技術17css6_3.html代碼代碼 導入鏈接外部樣式表 標題1的使用。測試上下選擇器（具有上下文）這是黃河的水這句話才使用了類“hello”的效果。這里危險。測試鏈接的顏色6.3 CSS樣式使用樣式使用2022-3-5網頁設計技術186.3 CSS樣式使用樣式使用2022-3-5網頁

15、設計技術195. 5. 樣式樣式表的優(yōu)先級表的優(yōu)先級p同時使用多層樣式表，很可能的情況是在一個網頁中既定義了內聯(lián)式樣式表和嵌入式樣式表又鏈接了外部樣式表，這時網頁會變得怎么樣？p三種樣式表具有不同的優(yōu)先級: 內內聯(lián)式樣式聯(lián)式樣式表表 嵌入嵌入式樣式式樣式表表 外部外部式樣式式樣式表表 所以某個元素在挑選多層樣式表時，會首先選擇優(yōu)先級最高的樣式，即就近原則就近原則。6.3 CSS樣式使用樣式使用返回返回2022-3-5網頁設計技術20n 字體屬性 n 文本屬性 n 顏色和背景屬性 n 容器屬性 n 列表屬性 n 鼠標屬性 n 定位和顯示 n CSS濾鏡 6.4 CSS屬性屬性2022-3-5網頁

16、設計技術216.4 CSS屬性屬性2022-3-5網頁設計技術226.4 CSS屬性屬性返回返回2022-3-5網頁設計技術231 1. .創(chuàng)建創(chuàng)建CSSCSS樣式樣式p單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕 6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式（1 1）定義）定義的的位置位置僅對該僅對該文檔文檔：此時CSS樣式的 代 碼 會 嵌 套 在 網 頁和標簽中。新建樣式表文件：新建樣式表文件：則彈出“保存樣式表文件為”對話框，選擇樣式文件的存儲路徑和文件名，將CSS樣式代碼單獨存放在一個CSS文件中。已有的某已有的某CSSCSS文件：文件：將新建的CSS樣式規(guī)則

17、寫入已有的CSS文件中。其代碼會嵌套在網頁和標簽中。2022-3-5網頁設計技術24（2 2）選擇器的類型）選擇器的類型 類類自定義CSS規(guī)則，可應用于網頁任何標簽。在應用時，它會在HTML標簽內加入一個類（class）來規(guī)定標簽中的格式。比如,將類的樣式mystylemystyle定義于某個標題，代碼：標題1應用自定義樣式 標簽標簽重新定義特定標簽的外觀，如創(chuàng)建或更改h1標簽的CSS樣式，所有應用h1標簽的文本都會立即更新。 高級高級在CSS選擇器中，它的功能最為強大，可定義鏈接的特效，定義特定元素組合的格式設置（如body,table,td,用逗號隔開），定義嵌套的樣式（td img 空格

18、隔開），定義包含特定id屬性的標簽的格式設置。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網頁設計技術25a:linka:link 鏈接文本普通狀態(tài)的外觀a:activea:active 當前活動的超級鏈接文本的外觀a:hovera:hover 鼠標懸停狀態(tài)下超級鏈接文本的外觀a:visited a:visited 已經訪問的超級鏈接文本的外觀 CSSCSS超級鏈接樣式超級鏈接樣式6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2. “CSSCSS”樣式面板樣式面板正在正在模式：只顯示當前文檔中頁面元素CSS規(guī)則全部全部模式：顯示整個網頁文件所涉及的

19、全部CSS規(guī)則“顯示類別視圖顯示類別視圖”按鈕按鈕 按類別顯示DW所支持的所有CSS屬性“顯示列表視圖顯示列表視圖”按鈕按鈕 按字母順序顯示DW所支持的所有屬性“設置屬性視圖設置屬性視圖”按鈕按鈕 僅顯示已設置的屬性，默認視圖“附加樣式表附加樣式表”銨鈕銨鈕 選擇要鏈接或導入到當前文檔中的外 部樣式表“新建新建CSSCSS規(guī)則規(guī)則”銨鈕銨鈕“編輯樣式編輯樣式”按鈕按鈕“刪除刪除CSSCSS規(guī)則規(guī)則”按鈕按鈕6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網頁設計技術27 3. 3. CSSCSS樣式定義對話框（樣式定義對話框（CSSCSS屬性）屬性） 創(chuàng)建了新樣式后

20、，即可在“CSS樣式定義”對話框中進行設置，CSS樣式屬性的8大類型。 6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網頁設計技術28CSSCSS屬性屬性8 8大類型大類型說明：說明：類型格式：類型格式：此類屬性用于定義網頁中文本的字體、大小、顏色、文本鏈接的修飾線等格式。背景格式：背景格式：為整段文字或其它頁面元素加入背景格式，如背景色或圖像。區(qū)塊格式：區(qū)塊格式：控制文本的間距、縮進或對齊方式等。方框格式：方框格式：控制網頁中的塊元素，方框共分為4個部分：邊界、邊框、填充、方框內容。邊框格式：邊框格式：為任何網頁元素加上邊框（如寬度、顏色和樣式），且邊框的樣式多

21、樣（粗細、凹下等）。如寬度、顏色。列表格式：列表格式：可以設置項目符號的樣式（如項目符號大小和類型），還可以用圖片來代替項目符號。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網頁設計技術29定位格式定位格式： 提供網頁元素的相對位置或絕對位置的設置，甚至可以將兩個元素重疊在一起。這對于一些固定元素（如表格）來說，是一種功能的擴展，而對于浮動元素來說，卻是有效的、用于精確控制其位置的方法。擴展格式：擴展格式： 設置頁面打印的分頁效果和網頁視覺效果，其屬性包含兩部分：分頁分頁為打印的頁面設置分頁符；視覺視覺效果效果為網頁元素施加特殊效果。【光標光標】 ：可指定在某個

22、元素上要使用的光標形狀，共有15種選擇方式，分別代表鼠標指針的各種形狀。【濾鏡濾鏡】：特殊效果有陰影、模糊、透明、光暈等。這些效果在DW的設計視圖中是顯現(xiàn)不出來的，只有在瀏覽器中瀏覽時才能看到。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網頁設計技術30(1)(1)導出導出樣式表樣式表文件文件在當前文檔中設置的樣式只在該文檔中有效。要使當前文檔中的樣式應用到其他文檔，則可以考慮將其中的樣式導出為樣式表文件，這樣，DW就可以通過樣式表鏈接，使整個站點具有相同的樣式設置。 單擊“文件”的“導出”命令，選擇“CSS”樣式或在CSS樣式面板中，執(zhí)行“右鍵”菜單的“導出”

23、命令。 在對話框中設置好保存的文件名及路徑。4.CSS4.CSS樣式導入與導出樣式導入與導出6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網頁設計技術31(2)(2)鏈接鏈接或導入外部樣式表文件或導入外部樣式表文件樣式表文件是一個僅包含樣式規(guī)則的文本文件。通過“附加樣式表”命令可將其他頁面中的樣式應用到當前頁面中，具體操作： 在“CSS樣式”面板中，單擊“附加樣式表”按鈕，打開“鏈接外部樣式表”對話框。 在“選擇樣式表文件”對話框中，指定樣式表的路徑及名稱，則創(chuàng)建的外部鏈接樣式表顯示在“CSS樣式”面板中。 注意：編輯外部樣式表將影響到所有鏈接引用它的文編輯外部樣

24、式表將影響到所有鏈接引用它的文檔。用戶可以將檔。用戶可以將CSSCSS樣式表文件復制到自己的站點內編樣式表文件復制到自己的站點內編輯。輯。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式返回返回6.6 CSS應用示例應用示例 例例6.4 設置文字樣式設置文字樣式 2022-3-5網頁設計技術32設置文字效果p font-family:黑體; /* 文字字體 */ font-size:35px; /* 文字大小 */ color:#0033CC; /* 顏色 */ font-weight:bold; /* 粗體 */ font-style:italic; /* 斜體 */ text-

25、decoration:line-through; /* 刪除線 */CSS設置文字效果2022-3-5網頁設計技術336.6 CSS應用示例應用示例 l段落是由一個個文字組合而成的，同樣是網頁中最重要的組成部分之一，因此前面提到的文字屬性，對于段落同樣適用。但CSS針對段落也提供了很多樣式屬性。l在使用Word編輯文檔時，可以很輕松的設置行間距，在CSS中通過“l(fā)ine-heightline-height”屬性同樣可以輕松地實現(xiàn)行距的設置。在CSS中“l(fā)ine-height”的值表示的是兩行文字之間基線的距離。如果給文字加上下劃線，那么下劃線的位置就是文字的基線。l “l(fā)ine-height”

26、的值跟CSS中所有設定具體數值的屬性一樣，可以設定為相對數值，也可以設定為絕對數值。在靜態(tài)頁面中，文字大小固定時常常使用絕對數值，達到統(tǒng)一的效果。而對于論壇、博客這些可以由用戶自定義字體大小的頁面，通常設定為相對數值，可以隨著用戶自定義的字體大小而改變相應的行距。CSS文字段落文字段落例例6.5 設置文字段落設置文字段落 行間距l(xiāng)ine-height 冬至，是我國農歷中一個非常重要的節(jié)氣，也是一個傳統(tǒng)節(jié)日，至今仍有不少地方有過冬至節(jié)的習俗。冬至俗稱“冬節(jié)”、“長至節(jié)”、“亞歲”等。早在二千五百多年前的春秋時代，我國已經用土圭觀測太陽測定出冬至來了，它是二十四節(jié)氣中最早制訂出的一個。時間在每年的

27、陽歷12月22日或者23日之間。 冬至是北半球全年中白天最短、黑夜最長的一天，過了冬至，白天就會一天天變長。古人對冬至的說法是：陰極之至，陽氣始生，日南至，日短之至，日影長之至，故曰“冬至”。冬至過后，各地氣候都進入一個最寒冷的階段，也就是人們常說的“進九”，我國民間有“冷在三九，熱在三伏”的說法。在我國古代對冬至很重視，冬至被當作一個較大節(jié)日，曾有“冬至大如年”的說法，而且有慶賀冬至的習俗。漢書中說：“冬至陽氣起，君道長，故賀。”人們認為：過了冬至，白晝一天比一天長，陽氣回升，是一個節(jié)氣循環(huán)的開始，也是一個吉日，應該慶賀。晉書上記載有“魏晉冬至日受萬國及百僚稱賀其儀亞于正旦。”說明古代對冬至

28、日的重視。2022-3-5網頁設計技術35行間距行間距示例示例 例例6.6 制作首字下沉效果制作首字下沉效果許多報刊、雜志的文章第一個字都很大，并且向下浮動，這種首字放大的效果，同樣可以方便地應用在網頁中。在CSS中首字下沉的效果是通過對第一個字進行單獨設置樣式風格來實現(xiàn)的。首字放大 端午節(jié)是古老的傳統(tǒng)節(jié)日，始于中國的春秋戰(zhàn)國時期，至今已有2000多年歷史。據史記“屈原賈生列傳”記載，屈原，是春秋時期楚懷王的大臣。他倡導舉賢授能，富國強兵，力主聯(lián)齊抗秦，遭到貴族子蘭等人的強烈反對，屈原遭饞去職，被趕出都城，流放到沅、湘流域。他在流放中，寫下了憂國憂民的離騷、天問、九歌等不朽詩篇，獨具風貌，影響

29、深遠（因而，端午節(jié)也稱詩人節(jié)）。公元前278年，秦軍攻破楚國京都。屈原眼看自己的祖國被侵略，心如刀割，但是始終不忍舍棄自己的祖國，于五月五日，在寫下了絕筆作懷沙之后，抱石投汨羅江身死，以自己的生命譜寫了一曲壯麗的愛國主義樂章。 傳說屈原死后，楚國百姓哀痛異常，紛紛涌到汨羅江邊去憑吊屈原。漁夫們劃起船只，在江上來回打撈他的真身。有位漁夫拿出為屈原準備的飯團、雞蛋等食物，“撲通、撲通”地丟進江里，說是讓魚龍蝦蟹吃飽了，就不會去咬屈大夫的身體了。人們見后紛紛仿效。一位老醫(yī)師則拿來一壇雄黃酒倒進江里，說是要藥暈蛟龍水獸，以免傷害屈大夫。后來為怕飯團為蛟龍所食，人們想出用楝樹葉包飯，外纏彩絲，發(fā)展成棕子

30、。說明： 在CSS定義中屬于一個行內元素,在行內定義一個區(qū)域，也就是一行內可以被 劃分成好幾個區(qū)域，從而實現(xiàn)某種特定效果。 本身沒有任何屬性。 在p span 的 css規(guī)則定義：分類方框-浮動-左對齊 在CSS定義中屬于一個塊級元素 。 可以包含段落、標題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。在頁面效果上，使用 會自動換行，使用 就會保持同行。例例6.7 CSS設置圖片效果設置圖片效果邊框39例例6.8 制作圖文混排網頁制作圖文混排網頁圖文混排河馬，偶蹄目、河馬科，英文名hoppopotamus。原來遍布非洲所有深水的河流與溪流中，現(xiàn)在范圍已縮小，主要居住在

31、非洲熱帶的河流間。它們喜歡棲息在河流附近沼澤地和有蘆葦的地方。生活中的覓食、交配、產仔、哺乳也均在水中進行。河馬的特點是吻寬嘴大，四肢短粗、軀體象個粗圓桶。胃3室不反芻。鼻孔在吻端上面，與上方的眼睛和耳朵呈一條直線。這樣它全體潛伏水中只須將頭頂露出水面就能嗅、視、聽兼呼吸了。體長3.75-4.6米，尾長約56厘米，肩高約1.5米，體重3-4.6噸，下犬齒長約60厘米，可重達3公斤。河馬皮膚排出的液體含紅色色素，經皮膚反射顯得象是紅色的，引起了河馬出“血汗”的說法。河馬極善游泳，在受驚時，一般避入水中。每天大部分時間在水中，潛伏水下時一般每3、5分鐘把頭露出水面呼吸一次，但可潛伏約半小時不出水面

32、來換氣。它們的皮膚長時間離水會干裂。河馬成對或結成小群活動，老年雄性常單獨活動。夜行性：它們幾乎整個白天都在河水中或是河流附近睡覺或休息，晚上出來吃食，有時會順水游出30多公里覓食。主要以水生植物為食；偶食陸地作物，以草為主，有時到田地去吃莊稼，食物短缺時，它們也吃肉，據稱，河馬是路地上最大的食肉動物(雜食)。河馬無定居：不在一個地方長期停留，每隔數日便遷到新地方去。 河馬繁殖期不固定,全年均繁殖,每產一仔,孕期227-240天，仔獸出生時體重27-45公斤。在人為飼養(yǎng)下約3歲性成熟，在野外5、6歲成熟。壽命40-50年。河馬的皮下脂肪約5厘米厚。人們常獵殺它取其脂肪、肉和厚皮。脂肪可得90公

33、斤。當地人非常珍視它的肉，肉味略同于野豬肉。牙齒質量也很好,是珍貴的雕刻材料，可作為象牙替代品。例例6.9 設置背景顏色。設置背景顏色。在CSS中頁面的背景顏色就是簡單的通過設置“body”標簽的“background-color”屬性來實現(xiàn)的，幾乎所有HTML元素的背景色都可以通過它來設定。因此很多網頁都通過設定不同HTML元素的各種背景色來實現(xiàn)分塊的目的。利用背景顏色分塊 首頁分類討論談天說地精華區(qū)我的信箱休閑娛樂立即注冊離開本站正文內容. 例例6.10 設置背景圖片。設置背景圖片。背景圖片背景背景圖案圖案 豎直豎直方向上重復方向上重復例例6.11 設置按鈕效果的超級鏈接。設置按鈕效果的超

34、級鏈接。普通普通的超鏈接的超鏈接按鈕按鈕式超鏈接式超鏈接html按鈕超鏈接 首頁 一起走到 從明天起 紙飛機 下一站 其它例例6.12 CSS制作實用菜單制作實用菜單 作為一個成功的網站，導航菜單是永遠不可缺少的。導航菜單的樣式風格往往也決定了整個網站的樣式風格，因此很多設計者都會投入很多時間和精力來制作各式各樣的導航條，從而體現(xiàn)網站的整體構架。本例圍繞菜單的制作，介紹相關的項目列表、菜單變換、導航欄等內容。 當項目列表的項目符號可以通過”list-style-type”設置為“none”時，制作各式各樣的菜單、導航條成了項目列表的最大用處之一，通過各種CSS屬性變換可以達到很多意想不到的導航

35、效果。（1）建立HTML相關結構，將菜單的各個項目用項目列表表示，同時設置頁面的背景顏色。 bodybackground-color:#ffdee0;HomeMy BlogFriendsNext StationContact Me（2）設置整個”塊的寬度為固定像素，并設置文字的字體；設置項目列表的屬性，將項目符號設置為不顯示。#navigation width:200px;font-family:Arial;#navigation ul list-style-type:none; /* 不顯示項目符號 */margin:0px;padding:0px;（3）為標簽添加下劃線，以分割各個超鏈接，

36、并且對超鏈接標簽進行整體設計。#navigation li border-bottom:1px solid #ED9F9F;/* 添加下劃線 */#navigation li adisplay:block; /* 區(qū)塊顯示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515; /* 左邊的粗紅邊 */border-right:1px solid #711515; /* 右側陰影 */ 說明：通過“display:block”語句，超鏈接被設置成了塊元素，當鼠標進入該塊的任何部分時都會被激

37、活，而不是僅僅在文字上方時才被激活。（4）設置超鏈接的3個偽屬性，以實現(xiàn)動態(tài)菜單的效果。#navigation li a:link, #navigation li a:visitedbackground-color:#c11136;color:#FFFFFF;#navigation li a:hover/* 鼠標經過時 */background-color:#990020;/* 改變背景色 */color:#ffff00; /* 改變文字顏色 */說明：用IE6.0查看時，必須將鼠標移動到文字的上面才能激活菜單項，這是IE6.0存在的錯誤導致的，在IE7中修正了這個錯誤。為了避免這個錯誤，可以

38、將下面的代碼：#navigation li adisplay:block; /* 區(qū)塊顯示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515; /* 左邊的粗紅邊 */border-right:1px solid #711515; /* 右側陰影 */#navigation li adisplay:block; /* 區(qū)塊顯示 */padding:5px 5px 5px 0.5em; width:200px;text-decoration:none;border-left:12px s

39、olid #711515; /* 左邊的粗紅邊 */border-right:1px solid #711515; /* 右側陰影 */修改為：無需表格的菜單 HomeMy BlogFriendsNext StationContact Me例例6.13 用用DIV容器和容器和CSS樣式表實現(xiàn)結構與表現(xiàn)的分離。樣式表實現(xiàn)結構與表現(xiàn)的分離。當今的網頁制作講當今的網頁制作講究結構與表現(xiàn)的分究結構與表現(xiàn)的分離。離。所有的網頁元素都所有的網頁元素都用 一 個 一 個 的用 一 個 一 個 的容器包裝起容器包裝起來 ， 并 給 每 個來 ， 并 給 每 個容器一個容器一個ID標識符，這些標識符，這些按順序排列按順序排列構成網頁的結構。構成網頁的結構