第6章CSS樣式實(shí)驗(yàn)

1、第第6章章 css樣式表樣式表實(shí)驗(yàn)實(shí)驗(yàn) htmlhtml及及CSSCSS應(yīng)用應(yīng)用（1）設(shè)置文字效果）設(shè)置文字效果（2）設(shè)置行間距）設(shè)置行間距（3） CSS設(shè)置圖片效果設(shè)置圖片效果4制作制作首字下沉效果首字下沉效果（5）制作圖文混排網(wǎng)頁(yè)）制作圖文混排網(wǎng)頁(yè)2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)5本章內(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-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)66.1 CSS樣式概述樣式概

2、述 nCSS（Cascading Style Sheets）又稱(chēng)層疊樣式表層疊樣式表，它是一系列格式規(guī)則集合，它能夠定義網(wǎng)頁(yè)元素的樣式，如層、文本、表格、鏈接等元素的屬性，一種樣式信息與網(wǎng)頁(yè)內(nèi)容分離的標(biāo)記性語(yǔ)言。n在CSS樣式出現(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)化

3、了格式化網(wǎng)頁(yè)的工作。返回返回示例示例2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)7CSS樣式由三部分組成：選擇器、屬性和值選擇器、屬性和值。語(yǔ)法格式：語(yǔ)法格式：選擇器選擇器 屬性屬性1:1:值值1;1;屬性屬性2:2:值值2 2 說(shuō)明：說(shuō)明：n選擇器用來(lái)標(biāo)識(shí)格式元素，可分為3種基本類(lèi)型：標(biāo)簽（html）選擇器、ID選擇器、類(lèi)（class）選擇器。除了基本類(lèi)型外，還可把基本類(lèi)型的選擇器組合使用。n屬性和屬性值之間用冒號(hào)（:）隔開(kāi)，定義多個(gè)屬性時(shí)，屬性之間用分號(hào)（;）隔開(kāi)。n如: bodycolor:black 選擇器body指頁(yè)面主體部分，color顏色屬性名，black顏色屬性值，其效果是使頁(yè)面中的文字為黑

4、色。6.2 CSS樣式定義樣式定義例例6.16.1 在DW代碼視圖的編輯窗口輸入以下代碼，創(chuàng)建使用樣式頁(yè)面的文檔css6_1.html。在標(biāo)記符中直接嵌套樣式信息 一代人 黑夜給了我黑色的眼睛我卻用它尋找光明提示：style元素是HTML中的一個(gè)標(biāo)記元素，提供了 一 組 對(duì) 應(yīng) 于 瀏 覽 器 所 支 持 C S S 規(guī) 則 （ 如background 、font-size等），可以使用這個(gè)標(biāo)記元素訪問(wèn)CSS樣式屬性。2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)91.HTML1.HTML選擇器選擇器HTML選擇器是最典型的選擇器類(lèi)型，網(wǎng)頁(yè)設(shè)計(jì)者可為某個(gè)或某些HTML標(biāo)記元素應(yīng)用樣式定義。pHTMLHTML選

5、擇器的定義方法：選擇器的定義方法： tagproperty:value例如，例如，設(shè)置表格中單元格內(nèi)的文字大小為9pt，顏色為藍(lán)色的CSS代碼： td font-size: 9pt; color: bluepCSS可以在一條語(yǔ)句中定義多個(gè)選擇器 例如，例如，將段落文本和單元格內(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樣式定

6、義樣式定義102.class2.class選擇器（類(lèi)選擇器）選擇器（類(lèi)選擇器）獨(dú)立獨(dú)立classclass選擇器選擇器?？杀蝗魏蜨TML標(biāo)記元素所應(yīng)用。 語(yǔ)法格式：語(yǔ)法格式：.Classnameproperty:value 例如：例如： .blueonecolor:blue 應(yīng)用：應(yīng)用：需要引用該類(lèi)的任意標(biāo)記符內(nèi)使用class屬性 有雨的日子 不知是無(wú)意還是天意，有你的日子總有雨！不知是無(wú)意還是天意，有你的日子總有雨！ 6.2 CSS樣式定義樣式定義2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)113.ID3.ID選擇器選擇器p其實(shí)與獨(dú)立的class選擇器的功能一樣，區(qū)別在于語(yǔ)法和用法不同。p語(yǔ)法

7、格式語(yǔ)法格式：#IDnameproperty:valuep用法用法:在HTML標(biāo)記元素中應(yīng)用ID屬性引用CSS樣式。p例如：例如：#redonecolor:redp應(yīng)用：應(yīng)用：紅色熱情6.2 CSS樣式定義樣式定義綜合舉例綜合舉例6.26.2：在DW代碼視圖的編輯窗口輸入以下代碼，創(chuàng)建綜合幾種選擇器類(lèi)型的頁(yè)面css6_2.html：選擇器舉例選擇器舉例標(biāo)題標(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)系）這是黃河的水這是黃河的水這句話(huà)才使用了類(lèi)這句話(huà)才使用了類(lèi)“hello”的效果。的效果。這里危險(xiǎn)這里危險(xiǎn)c

8、ss6_2.htmlcss6_2.html2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)13返回返回2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)14一般情況下，CSS樣式使用有四種方式。 1.1.內(nèi)聯(lián)式樣式表內(nèi)聯(lián)式樣式表 在現(xiàn)有HTML元素的基礎(chǔ)上，用style屬性把特殊的樣式直接加入到那些標(biāo)記元素中。 例如：例如：內(nèi)聯(lián)式樣式表 說(shuō)明：說(shuō)明：這種樣式表只對(duì)使用它的元素起作用，而不會(huì)影響其它元素，通常用在需要特殊格式的某個(gè)網(wǎng)頁(yè)對(duì)象。這種樣式表將樣式和要展示的內(nèi)容混在一起，失去了樣式表的優(yōu)點(diǎn)，一般不采用。6.3 CSS樣式使用樣式使用2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)15 2. 2. 嵌入式樣式表嵌入式樣式表又稱(chēng)內(nèi)部樣式表，又稱(chēng)內(nèi)

9、部樣式表，包含在HTML文件頭部HEADHEAD的stylestyle標(biāo)簽內(nèi)的一系列CSS規(guī)則。書(shū)寫(xiě)格式：書(shū)寫(xiě)格式：6.3 CSS樣式使用樣式使用說(shuō)明：說(shuō)明：在此格式中，stylestyle的typetype屬性值須設(shè)為text/text/csscss，表示定義的是一個(gè)CSS。當(dāng)不支持CSS的瀏覽器讀到這個(gè)屬性時(shí)，自動(dòng)忽略這個(gè)樣式表。標(biāo)記內(nèi)定義的前后加上注釋符，其作用是使不支持CSS的瀏覽器忽略樣式表的定義。注意：注意：在定義嵌入式樣式表時(shí)，一定要放在和標(biāo)記之間。嵌入樣式表的作用范圍是在本HTML文檔內(nèi)。2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)163. 3. 鏈接外部樣式文件鏈接外部樣式文件p先將樣式表

10、寫(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)前文檔與其他文檔的鏈接信息 rel：表示其它文檔將以何種方式與HTML文檔結(jié)合 href：目標(biāo)文檔的URL6.3 CSS樣式使用樣式使用174. 4. 導(dǎo)入外部樣式文件導(dǎo)入外部樣式文件p這種方式是在HTML文件的頭部標(biāo)記之間，用CSS樣式表的import聲明引入外部樣式表文件。其格式： import URL(外部樣式文件名);p引入外部樣式表的使用與鏈接到外部樣式

11、表很相似，都是將樣式定義保存為單獨(dú)文件。p區(qū)別：區(qū)別：導(dǎo)入方式在瀏覽器下載HTML文件時(shí)將樣式文件的全部?jī)?nèi)容拷貝到import關(guān)鍵字位置，以替換該關(guān)鍵字；而鏈接外部樣式文件僅在HTML文件需要引用CSS樣式文件中的某個(gè)樣式時(shí)，瀏覽器才鏈接樣式文件，讀取需要的內(nèi)容并不進(jìn)行替換。6.3 CSS樣式使用樣式使用2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)18例例6.36.3 CSS CSS樣式文件應(yīng)用樣式文件應(yīng)用在DW的代碼視圖編輯窗口輸入以下代碼，創(chuàng)建外部樣式表文件sheet1.css、sheet2.css和頁(yè)面文件css6_3.html。sheet1.css代碼代碼/* CSS Document */h1fo

12、nt-size: 36px;font-family: 隸書(shū);font-weight: bold;color: #993366;h2 b color:blue.water font-family:隸書(shū); font-size:24px; text-align:righth3.hello font-family:隸書(shū); text-align:center; font-size:36px6.3 CSS樣式使用樣式使用2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)19sheet2.css代碼代碼/* CSS Document */#danger color:#990000;font-fam

13、ily:華文彩云;font-size:24pxa:linkcolor:red; text-decoration: none;/*未訪問(wèn)的鏈接*/a:visitedcolor:blue; text-decoration: none;/*已訪問(wèn)的鏈接*/a:activecolor:yellow;text-decoration: none;/*活動(dòng)鏈接*/a:hover color:#990000;text-decoration:underline/*鼠標(biāo)指針移到上面鏈接的顏色*/h2 b color:green6.3 CSS樣式使用樣式使用2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)20css6_3.html代

14、碼代碼 導(dǎo)入鏈接外部樣式表 標(biāo)題1的使用。測(cè)試上下選擇器（具有上下文）這是黃河的水這句話(huà)才使用了類(lèi)“hello”的效果。這里危險(xiǎn)。測(cè)試鏈接的顏色6.3 CSS樣式使用樣式使用2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)216.3 CSS樣式使用樣式使用2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)225. 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)聯(lián)式樣式表內(nèi)聯(lián)式樣式表 嵌入式樣式表嵌入式樣式表 外部式樣式表外部式樣式表 所以某個(gè)元素在挑選多層樣式表時(shí)，會(huì)首先選擇優(yōu)先級(jí)最高的

15、樣式，即就近原則就近原則。6.3 CSS樣式使用樣式使用返回返回2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)23n 字體屬性 n 文本屬性 n 顏色和背景屬性 n 容器屬性 n 列表屬性 n 鼠標(biāo)屬性 n 定位和顯示 n CSS濾鏡 6.4 CSS屬性屬性2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)246.4 CSS屬性屬性2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)256.4 CSS屬性屬性返回返回2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)261.1.創(chuàng)建創(chuàng)建CSSCSS樣式樣式p單擊“CSS樣式”面板右下角的“新建CSS規(guī)則”按鈕 6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式（1 1）定義的位置）定義的位置僅對(duì)該文檔僅對(duì)該文檔

16、：此時(shí)CSS樣式的 代 碼 會(huì) 嵌 套 在 網(wǎng) 頁(yè)和標(biāo)簽中。新建樣式表文件：新建樣式表文件：則彈出“保存樣式表文件為”對(duì)話(huà)框，選擇樣式文件的存儲(chǔ)路徑和文件名，將CSS樣式代碼單獨(dú)存放在一個(gè)CSS文件中。已有的某已有的某CSSCSS文件：文件：將新建的CSS樣式規(guī)則寫(xiě)入已有的CSS文件中。其代碼會(huì)嵌套在網(wǎng)頁(yè)和標(biāo)簽中。2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)27（2 2）選擇器的類(lèi)型）選擇器的類(lèi)型 類(lèi)類(lèi)自定義CSS規(guī)則，可應(yīng)用于網(wǎng)頁(yè)任何標(biāo)簽。在應(yīng)用時(shí)，它會(huì)在HTML標(biāo)簽內(nèi)加入一個(gè)類(lèi)（class）來(lái)規(guī)定標(biāo)簽中的格式。比如,將類(lèi)的樣式mystylemystyle定義于某個(gè)標(biāo)題，代碼：標(biāo)題1應(yīng)用自定義樣式 標(biāo)簽標(biāo)

17、簽重新定義特定標(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 空格隔開(kāi)），定義包含特定id屬性的標(biāo)簽的格式設(shè)置。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)28a:linka:link 鏈接文本普通狀態(tài)的外觀a:activea:active 當(dāng)前活動(dòng)的超級(jí)鏈接文本的外觀a:hovera:hover 鼠標(biāo)懸停狀態(tài)下超級(jí)鏈接文本的外觀a:visited a

18、:visited 已經(jīng)訪問(wèn)的超級(jí)鏈接文本的外觀 CSSCSS超級(jí)鏈接樣式超級(jí)鏈接樣式6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2. “CSSCSS”樣式面板樣式面板正在正在模式：只顯示當(dāng)前文檔中頁(yè)面元素CSS規(guī)則全部全部模式：顯示整個(gè)網(wǎng)頁(yè)文件所涉及的全部CSS規(guī)則“顯示類(lèi)別視圖顯示類(lèi)別視圖”按鈕按鈕 按類(lèi)別顯示DW所支持的所有CSS屬性“顯示列表視圖顯示列表視圖”按鈕按鈕 按字母順序顯示DW所支持的所有屬性“設(shè)置屬性視圖設(shè)置屬性視圖”按鈕按鈕 僅顯示已設(shè)置的屬性，默認(rèn)視圖“附加樣式表附加樣式表”銨鈕銨鈕 選擇要鏈接或?qū)氲疆?dāng)前文檔中的外 部樣式表“新建新建CSSCSS規(guī)則規(guī)則

19、”銨鈕銨鈕“編輯樣式編輯樣式”按鈕按鈕“刪除刪除CSSCSS規(guī)則規(guī)則”按鈕按鈕6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)30 3. CSS3. CSS樣式定義對(duì)話(huà)框（樣式定義對(duì)話(huà)框（CSSCSS屬性）屬性） 創(chuàng)建了新樣式后，即可在“CSS樣式定義”對(duì)話(huà)框中進(jìn)行設(shè)置，CSS樣式屬性的8大類(lèi)型。 6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)31CSSCSS屬性屬性8 8大類(lèi)型說(shuō)明：大類(lèi)型說(shuō)明：類(lèi)型格式：類(lèi)型格式：此類(lèi)屬性用于定義網(wǎng)頁(yè)中文本的字體、大小、顏色、文本鏈接的修飾線等格式。背景格式：背景格式：為整

20、段文字或其它頁(yè)面元素加入背景格式，如背景色或圖像。區(qū)塊格式：區(qū)塊格式：控制文本的間距、縮進(jìn)或?qū)R方式等。方框格式：方框格式：控制網(wǎng)頁(yè)中的塊元素，方框共分為4個(gè)部分：邊界、邊框、填充、方框內(nèi)容。邊框格式：邊框格式：為任何網(wǎng)頁(yè)元素加上邊框（如寬度、顏色和樣式），且邊框的樣式多樣（粗細(xì)、凹下等）。如寬度、顏色。列表格式：列表格式：可以設(shè)置項(xiàng)目符號(hào)的樣式（如項(xiàng)目符號(hào)大小和類(lèi)型），還可以用圖片來(lái)代替項(xiàng)目符號(hào)。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)32定位格式定位格式： 提供網(wǎng)頁(yè)元素的相對(duì)位置或絕對(duì)位置的設(shè)置，甚至可以將兩個(gè)元素重疊在一起。這對(duì)于一些固定

21、元素（如表格）來(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è)元素上要使用的光標(biāo)形狀，共有15種選擇方式，分別代表鼠標(biāo)指針的各種形狀?！緸V鏡濾鏡】：特殊效果有陰影、模糊、透明、光暈等。這些效果在DW的設(shè)計(jì)視圖中是顯現(xiàn)不出來(lái)的，只有在瀏覽器中瀏覽時(shí)才能看到。6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)33(1)(1)導(dǎo)出樣式表文件導(dǎo)出樣式表文

22、件在當(dāng)前文檔中設(shè)置的樣式只在該文檔中有效。要使當(dāng)前文檔中的樣式應(yīng)用到其他文檔，則可以考慮將其中的樣式導(dǎo)出為樣式表文件，這樣，DW就可以通過(guò)樣式表鏈接，使整個(gè)站點(diǎn)具有相同的樣式設(shè)置。 單擊“文件”的“導(dǎo)出”命令，選擇“CSS”樣式或在CSS樣式面板中，執(zhí)行“右鍵”菜單的“導(dǎo)出”命令。 在對(duì)話(huà)框中設(shè)置好保存的文件名及路徑。4.CSS4.CSS樣式導(dǎo)入與導(dǎo)出樣式導(dǎo)入與導(dǎo)出6.5 在在Dreamweaver中編輯中編輯CSS樣式樣式2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)34(2)(2)鏈接或?qū)胪獠繕邮奖砦募溄踊驅(qū)胪獠繕邮奖砦募邮奖砦募且粋€(gè)僅包含樣式規(guī)則的文本文件。通過(guò)“附加樣式表”命令可將其他頁(yè)面中

23、的樣式應(yīng)用到當(dāng)前頁(yè)面中，具體操作： 在“CSS樣式”面板中，單擊“附加樣式表”按鈕，打開(kāi)“鏈接外部樣式表”對(duì)話(huà)框。 在“選擇樣式表文件”對(duì)話(huà)框中，指定樣式表的路徑及名稱(chēng)，則創(chuàng)建的外部鏈接樣式表顯示在“CSS樣式”面板中。 注意：編輯外部樣式表將影響到所有鏈接引用它的文編輯外部樣式表將影響到所有鏈接引用它的文檔。用戶(hù)可以將檔。用戶(hù)可以將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-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)35設(shè)置文字效果

24、p font-family:黑體; /* 文字字體 */ font-size:35px; /* 文字大小 */ color:#0033CC; /* 顏色 */ font-weight:bold; /* 粗體 */ font-style:italic; /* 斜體 */ text-decoration:line-through; /* 刪除線 */CSS設(shè)置文字效果2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)366.6 CSS應(yīng)用示例應(yīng)用示例 l段落是由一個(gè)個(gè)文字組合而成的，同樣是網(wǎng)頁(yè)中最重要的組成部分之一，因此前面提到的文字屬性，對(duì)于段落同樣適用。但CSS針對(duì)段落也提供了很多樣式屬性。l在使用Word編輯文

25、檔時(shí)，可以很輕松的設(shè)置行間距，在CSS中通過(guò)“l(fā)ine-heightline-height”屬性同樣可以輕松地實(shí)現(xiàn)行距的設(shè)置。在CSS中“l(fā)ine-height”的值表示的是兩行文字之間基線的距離。如果給文字加上下劃線，那么下劃線的位置就是文字的基線。l “l(fā)ine-height”的值跟CSS中所有設(shè)定具體數(shù)值的屬性一樣，可以設(shè)定為相對(duì)數(shù)值，也可以設(shè)定為絕對(duì)數(shù)值。在靜態(tài)頁(yè)面中，文字大小固定時(shí)常常使用絕對(duì)數(shù)值，達(dá)到統(tǒng)一的效果。而對(duì)于論壇、博客這些可以由用戶(hù)自定義字體大小的頁(yè)面，通常設(shè)定為相對(duì)數(shù)值，可以隨著用戶(hù)自定義的字體大小而改變相應(yīng)的行距。CSS文字段落文字段落例例6.5 設(shè)置文字段落設(shè)置文字

26、段落 行間距l(xiāng)ine-height 冬至，是我國(guó)農(nóng)歷中一個(gè)非常重要的節(jié)氣，也是一個(gè)傳統(tǒng)節(jié)日，至今仍有不少地方有過(guò)冬至節(jié)的習(xí)俗。冬至俗稱(chēng)“冬節(jié)”、“長(zhǎng)至節(jié)”、“亞歲”等。早在二千五百多年前的春秋時(shí)代，我國(guó)已經(jīng)用土圭觀測(cè)太陽(yáng)測(cè)定出冬至來(lái)了，它是二十四節(jié)氣中最早制訂出的一個(gè)。時(shí)間在每年的陽(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ì)冬至很

27、重視，冬至被當(dāng)作一個(gè)較大節(jié)日，曾有“冬至大如年”的說(shuō)法，而且有慶賀冬至的習(xí)俗。漢書(shū)中說(shuō)：“冬至陽(yáng)氣起，君道長(zhǎng)，故賀。”人們認(rèn)為：過(guò)了冬至，白晝一天比一天長(zhǎng)，陽(yáng)氣回升，是一個(gè)節(jié)氣循環(huán)的開(kāi)始，也是一個(gè)吉日，應(yīng)該慶賀。晉書(shū)上記載有“魏晉冬至日受萬(wàn)國(guó)及百僚稱(chēng)賀其儀亞于正旦?！闭f(shuō)明古代對(duì)冬至日的重視。2022-4-20網(wǎng)頁(yè)設(shè)計(jì)技術(shù)38行間距示例行間距示例 例例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é)日，始于中

28、國(guó)的春秋戰(zhàn)國(guó)時(shí)期，至今已有2000多年歷史。據(jù)史記“屈原賈生列傳”記載，屈原，是春秋時(shí)期楚懷王的大臣。他倡導(dǎo)舉賢授能，富國(guó)強(qiáng)兵，力主聯(lián)齊抗秦，遭到貴族子蘭等人的強(qiáng)烈反對(duì)，屈原遭饞去職，被趕出都城，流放到沅、湘流域。他在流放中，寫(xiě)下了憂(yōu)國(guó)憂(yōu)民的離騷、天問(wèn)、九歌等不朽詩(shī)篇，獨(dú)具風(fēng)貌，影響深遠(yuǎn)（因而，端午節(jié)也稱(chēng)詩(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ā)展成棕子。說(shuō)明： 在CSS定義中屬于一個(gè)行內(nèi)元素,在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被 劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。 本身沒(méi)有任何屬性。 在p span 的 css規(guī)則定義：分類(lèi)方框-浮動(dòng)-左對(duì)齊 在CSS定義中屬于一個(gè)塊級(jí)元素 。 可以包含段落、標(biāo)題、表格