第6章CSS樣式應(yīng)用

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

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

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

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

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

6、:value例如：例如： h1.redcolor:red應(yīng)用：應(yīng)用：在網(wǎng)頁(yè)中需要使用該類的“h1標(biāo)記元素內(nèi)”用class屬性引用 吉林省明日科技有限責(zé)任公司吉林省明日科技有限責(zé)任公司 獨(dú)立獨(dú)立classclass選擇器選擇器?？杀蝗魏蜨TML標(biāo)記元素所應(yīng)用。 語(yǔ)法格式：語(yǔ)法格式：.Classnameproperty:value 例如：例如： .blueonecolor:blue 應(yīng)用：應(yīng)用：需要引用該類的任意標(biāo)記符內(nèi)使用class屬性 有雨的日子 不知是無(wú)意還是天意，有你的日子總有雨！不知是無(wú)意還是天意，有你的日子總有雨！ 6.2 CSS樣式定義樣式定義2022-3-5網(wǎng)頁(yè)設(shè)計(jì)技術(shù)2022-3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、樣（粗細(xì)、凹下等）。如寬度、顏色。列表格式：列表格式：可以設(shè)置項(xiàng)目符號(hào)的樣式（如項(xiàng)目符號(hào)大小和類型），還可以用圖片來(lái)代替項(xiàng)目符號(hào)。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網(wǎng)頁(yè)設(shè)計(jì)技術(shù)29定位格式定位格式： 提供網(wǎng)頁(yè)元素的相對(duì)位置或絕對(duì)位置的設(shè)置，甚至可以將兩個(gè)元素重疊在一起。這對(duì)于一些固定元素（如表格）來(lái)說(shuō)，是一種功能的擴(kuò)展，而對(duì)于浮動(dòng)元素來(lái)說(shuō)，卻是有效的、用于精確控制其位置的方法。擴(kuò)展格式：擴(kuò)展格式： 設(shè)置頁(yè)面打印的分頁(yè)效果和網(wǎng)頁(yè)視覺(jué)效果，其屬性包含兩部分：分頁(yè)分頁(yè)為打印的頁(yè)面設(shè)置分頁(yè)符；視覺(jué)視覺(jué)效果效果為網(wǎng)頁(yè)元素施加特殊效果?！竟鈽?biāo)光標(biāo)】 ：可指定在某個(gè)

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

23、命令。 在對(duì)話框中設(shè)置好保存的文件名及路徑。4.CSS4.CSS樣式導(dǎo)入與導(dǎo)出樣式導(dǎo)入與導(dǎo)出6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-3-5網(wǎng)頁(yè)設(shè)計(jì)技術(shù)31(2)(2)鏈接鏈接或?qū)胪獠繕邮奖砦募驅(qū)胪獠繕邮奖砦募邮奖砦募且粋€(gè)僅包含樣式規(guī)則的文本文件。通過(guò)“附加樣式表”命令可將其他頁(yè)面中的樣式應(yīng)用到當(dāng)前頁(yè)面中，具體操作： 在“CSS樣式”面板中，單擊“附加樣式表”按鈕，打開(kāi)“鏈接外部樣式表”對(duì)話框。 在“選擇樣式表文件”對(duì)話框中，指定樣式表的路徑及名稱，則創(chuàng)建的外部鏈接樣式表顯示在“CSS樣式”面板中。 注意：編輯外部樣式表將影響到所有鏈接引用它的文編輯外部樣

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

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

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

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

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

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

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

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

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

33、斤。當(dāng)?shù)厝朔浅Ｕ湟曀娜猓馕堵酝谝柏i肉。牙齒質(zhì)量也很好,是珍貴的雕刻材料，可作為象牙替代品。例例6.9 設(shè)置背景顏色。設(shè)置背景顏色。在CSS中頁(yè)面的背景顏色就是簡(jiǎn)單的通過(guò)設(shè)置“body”標(biāo)簽的“background-color”屬性來(lái)實(shí)現(xiàn)的，幾乎所有HTML元素的背景色都可以通過(guò)它來(lái)設(shè)定。因此很多網(wǎng)頁(yè)都通過(guò)設(shè)定不同HTML元素的各種背景色來(lái)實(shí)現(xiàn)分塊的目的。利用背景顏色分塊 首頁(yè)分類討論談天說(shuō)地精華區(qū)我的信箱休閑娛樂(lè)立即注冊(cè)離開(kāi)本站正文內(nèi)容. 例例6.10 設(shè)置背景圖片。設(shè)置背景圖片。背景圖片背景背景圖案圖案 豎直豎直方向上重復(fù)方向上重復(fù)例例6.11 設(shè)置按鈕效果的超級(jí)鏈接。設(shè)置按鈕效果的超

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

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

36、并且對(duì)超鏈接標(biāo)簽進(jìn)行整體設(shè)計(jì)。#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; /* 右側(cè)陰影 */ 說(shuō)明：通過(guò)“display:block”語(yǔ)句，超鏈接被設(shè)置成了塊元素，當(dāng)鼠標(biāo)進(jìn)入該塊的任何部分時(shí)都會(huì)被激

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

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; /* 右側(cè)陰影 */#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; /* 右側(cè)陰影 */修改為：無(wú)需表格的菜單 HomeMy BlogFriendsNext StationContact Me例例6.13 用用DIV容器和容器和CSS樣式表實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。樣式表實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。當(dāng)今的網(wǎng)頁(yè)制作講當(dāng)今的網(wǎng)頁(yè)制作講究結(jié)構(gòu)與表現(xiàn)的分究結(jié)構(gòu)與表現(xiàn)的分離。離。所有的網(wǎng)頁(yè)元素都所有的網(wǎng)頁(yè)元素都用 一 個(gè) 一 個(gè) 的用 一 個(gè) 一 個(gè) 的容器包裝起容器包裝起來(lái) ， 并 給 每 個(gè)來(lái) ， 并 給 每 個(gè)容器一個(gè)容器一個(gè)ID標(biāo)識(shí)符，這些標(biāo)識(shí)符，這些按順序排列按順序排列構(gòu)成網(wǎng)頁(yè)的結(jié)構(gòu)。構(gòu)成網(wǎng)頁(yè)的結(jié)構(gòu)