七章使用樣式修飾頁(yè)面-46頁(yè)精選

1、第七章 使用樣式修飾頁(yè)面本章學(xué)習(xí)目標(biāo) 熟悉CSS樣式面板 掌握創(chuàng)建和使用一些常用的CSS樣式的方法 掌握通過(guò)CSS樣式管理和修飾頁(yè)面的方法 1. CSS樣式的創(chuàng)建CSS的全稱是Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱樣式表。 CSS可以擴(kuò)展HTML的功能，美化頁(yè)面最基本的功能就是為了將樣式的定義與HTML文件分離開(kāi)來(lái)。 我們定義一個(gè)CSS文件，并讓所有HTML文件都調(diào)用這個(gè)CSS文件所定義的樣式，以后要更改HTML中某段落的樣式時(shí)，只要到CSS文件中，更改樣式的定義即可。在CSS里面可以使用四種方法，將樣式表添加到網(wǎng)頁(yè)里面。分別為：直接定義標(biāo)記的STYLE屬

2、性（不建議）定義內(nèi)部樣式表嵌入外部樣式表連接外部樣式表（1）直接定義標(biāo)記的STYLE屬性aaabbbccc ddd實(shí)例1css_zhijiedingyicss.htm（2）定義內(nèi)部樣式表在元素中定義，其語(yǔ)法為：實(shí)例201css_zidingyineibuyangshi.htm其中的樣式名稱可以放在一起，表示相同的樣式屬性。如樣式名稱1，樣式名稱2樣式屬性：屬性值；樣式屬性：屬性值；實(shí)例：202css_zidingyineibuyangshi.htm可以使用CLASS與ID選擇符，在CSS里定義樣式Clsss類(lèi)選擇符的使用語(yǔ)法：實(shí)例211css_zidingyineibuyangshi.htm利

3、用ID指定選擇符定義樣式用class時(shí) “標(biāo)記名稱.樣式名稱”用id定義時(shí) “標(biāo)記名稱#樣式名稱”（3）嵌入外部樣式表將樣式定義在獨(dú)立的CSS文件中，當(dāng)瀏覽器在進(jìn)行HTML文件的讀取時(shí)，將以嵌入的方式，復(fù)制一份樣式表到這個(gè)HTML文件中。嵌入外部樣式表的語(yǔ)法：實(shí)例213css_qianruwaibucss.css213css_qianruwaibucss.htm(4) 連接外部樣式表當(dāng)瀏覽器讀取到HTML文件內(nèi)設(shè)置格式的標(biāo)記時(shí)，將會(huì)向所連接的外部樣式表索取樣式。連接外部樣式表的語(yǔ)法：四種方法同時(shí)出現(xiàn)時(shí)的使用順序直接定義標(biāo)記的style屬性最為優(yōu)先。其他三種如果同時(shí)出現(xiàn)，且各方法定義的樣式又不相

4、同時(shí)，瀏覽器會(huì)選擇較后定義的樣式顯示。展開(kāi)“設(shè)計(jì)”面板，并選中“CSS樣式”標(biāo)簽，出現(xiàn) “CSS樣式”面板新建特定類(lèi)型的樣式“確定”，完成創(chuàng)建單擊面板右下角的“新建CSS樣式”按鈕 ，創(chuàng)建CSS樣式，彈出“新建CSS樣式”對(duì)話框。名稱：CSS樣式的命名類(lèi)型：自定義或HTML標(biāo)簽屬性、超鏈接屬性更改定義在：CSS樣式的作用范圍和保存位置2. CSS樣式對(duì)話框的設(shè)置 類(lèi) 型 背 景 區(qū) 塊 方 框 邊 框 列 表 定 位 擴(kuò) 展類(lèi)型：主要用于定義文字的屬性。 返回該節(jié)背景：主要用于設(shè)置CSS樣式的背景，包括背景顏色、背景圖像、背景圖像的控制等 。 返回該節(jié)重復(fù)：設(shè)置圖像作為背景時(shí)是否需要重復(fù)顯示。

5、附件：設(shè)置背景圖像是否跟隨內(nèi)容滾動(dòng)。 區(qū)塊：主要用于設(shè)置文本的文字間距、對(duì)齊方式、排列方式、文字縮進(jìn)等。 返回該節(jié)垂直對(duì)齊：應(yīng)用于圖像，可以設(shè)置圖文的對(duì)齊方式 方框：主要用于設(shè)置元素在頁(yè)面中的位置。包括元素的邊界、寬度、高度和浮動(dòng)方式等。 返回該節(jié)注： 方框（盒子）屬性把對(duì)象作為一個(gè)整體看待，裝在一盒子里邊框：主要用于設(shè)置邊框的樣式。 返回該節(jié)列表：主要用于設(shè)置文本列表的類(lèi)型、列表項(xiàng)圖片等。 返回該節(jié)定位：主要設(shè)置對(duì)象在網(wǎng)頁(yè)中的具體位置。 返回該節(jié)擴(kuò)展：主要用于制作鼠標(biāo)樣式、圖片特殊效果返回該節(jié)3. CSS樣式的管理新建樣式應(yīng)用樣式編輯樣式刪除樣式附加樣式套用：選擇希望應(yīng)用所選樣式的對(duì)象，右鍵

6、點(diǎn)擊樣式名稱，在菜單中選擇”套用”編輯 ：修改、添加樣式的具體內(nèi)容刪除 ：刪除選擇的樣式附加 ：鏈接外部樣式表 實(shí)例1：重定義特定標(biāo)簽定義“source/7”目錄下的文件夾“7-2-1” 為站點(diǎn)目錄。打開(kāi)7-2-1.htm頁(yè)面。 新建CSS樣式，保存樣式在text1.css樣式文件中設(shè)置CSS樣式內(nèi)容應(yīng)用樣式實(shí)例2：使用CSS選擇器定義文件夾“7-2-2” 為站點(diǎn)目錄。打開(kāi)7-2-2.htm頁(yè)面。 新建CSS樣式，選擇“高級(jí)（ID、上下文選擇器等）” 類(lèi)型。設(shè)置a:link 無(wú)下劃線，顏色為#333366 設(shè)置a:visited 無(wú)下劃線，顏色為#009999 設(shè)置a:hover 有下劃線，顏

7、色為#ff9900選中文本“我的第一個(gè)鏈接”，然后在屬性面板中設(shè)置其鏈接為“#”。新建CSS樣式，選擇“高級(jí)（ID、上下文選擇器等）” 類(lèi)型。在選擇器欄中直接輸入a2:link 同樣設(shè)置其他三種狀態(tài)：a2:visited、a2:hover、 a2:active 的顏色和效果選中文本“我的第二個(gè)鏈接”，然后在屬性面板中設(shè)置其鏈接為“#”。實(shí)例3：CSS控制網(wǎng)頁(yè)背景定義文件夾“7-2-3” 為站點(diǎn)目錄。打開(kāi)7-2-3.htm頁(yè)面。新建CSS樣式，命名為textback，僅對(duì)該文檔生效。選擇“背景”類(lèi)別，設(shè)置顏色為CCFF66單擊上面一個(gè)單元格，應(yīng)用該樣式新建tdback樣式，設(shè)置“背景”類(lèi)別下的背

8、景圖像，選擇“重復(fù)”，并應(yīng)用到下面一個(gè)單元格中。實(shí)例4：CSS區(qū)塊排列文本定義文件夾“7-2-4” 為站點(diǎn)目錄。打開(kāi)7-2-4.htm頁(yè)面。新建CSS樣式，命名為block1，保存在font.css樣式文件中。設(shè)置“類(lèi)型”為宋體，大小14px，行高2em區(qū)塊設(shè)置 如圖所示 對(duì)中文文本應(yīng)用該樣式。新建block2樣式， “類(lèi)型” 中設(shè)置字體為Verdana，大小為16px。在“區(qū)塊” 中設(shè)置文本對(duì)齊為兩端對(duì)齊。對(duì)英文文本應(yīng)用該樣式。實(shí)例5：CSS方框?qū)R對(duì)象 定義文件夾“7-2-5” 為站點(diǎn)目錄。打開(kāi)7-2-5.htm頁(yè)面。新建CSS樣式，命名為box1，僅對(duì)該文檔生效。設(shè)置 “方框”屬性。對(duì)圖片應(yīng)用該樣式。實(shí)例6：CSS邊框創(chuàng)建漂亮按鈕定義文件夾“7-2-6” 為站點(diǎn)目錄。打開(kāi)7-2-6.htm頁(yè)面。新建CSS樣式，命名為border1，僅對(duì)該文檔生效。設(shè)置 “邊框” 屬性以同樣的