第9章CSS樣式表本章學(xué)習(xí)要點(diǎn)：創(chuàng)建CSS樣式設(shè)置CSS樣式屬性應(yīng)用CSS樣式第9章CSS樣式表本章學(xué)習(xí)要點(diǎn)：1CSS的全稱為CascadingStyleSheet，層疊樣式表。它是一組顯示規(guī)則的集合，其中每一條規(guī)則都規(guī)定了適用的對象以及應(yīng)用到該對象的顯示方案。CSS的全稱為CascadingStyleShee29.1創(chuàng)建CSS樣式★顯示CSS樣式面板執(zhí)行“窗口|CSS樣式”命令或按shift+F11鍵即可打開“CSS樣式”面板?！飫?chuàng)建方法單擊“CSS樣式表”面板右下角的“新建CSS樣式”按鈕，打開“新建CSS規(guī)則”對話框，在其中設(shè)置層疊樣式的類型及保存的樣式即可。9.1創(chuàng)建CSS樣式★顯示CSS樣式面板執(zhí)行“39.2設(shè)置CSS樣式屬性樣式表是通過其屬性來編輯樣式的。在CSS規(guī)則定義對話框中可定義的CSS規(guī)則很多，主要有8種類型。★類型

用來定義字體、大小、粗細(xì)、斜體、行高和顏色等設(shè)置。該設(shè)置主要針對網(wǎng)頁中的文字有效。9.2設(shè)置CSS樣式屬性樣式表是通過其屬性來編輯樣4★背景用來定義背景設(shè)置。它可以對網(wǎng)頁中的任何元素應(yīng)用背景屬性，還可以設(shè)置背景圖像的位置?！飬^(qū)塊用來定義文字的排列格式，是對文本段落控制的補(bǔ)充?！锓娇蛴脕砜刂圃卦陧撁嫔系姆胖梅绞揭约皩傩远x?！锉尘坝脕矶x背景設(shè)置。它可以對網(wǎng)頁中的任何元素應(yīng)5★邊框用來定義元素周圍邊框的設(shè)置，如邊框?qū)挾?、顏色和樣式?！锪斜碛脕頌榱斜順?biāo)簽定義列表設(shè)置(如項(xiàng)目符號(hào)外觀、自定義圖像和位置)?！镞吙蛴脕矶x元素周圍邊框的設(shè)置，如邊框?qū)挾?、顏?★定位主要針對層元素，也可以將頁面中已有的對象轉(zhuǎn)變?yōu)閷釉氐膬?nèi)容

★擴(kuò)展

用于設(shè)置CSS樣式的打印、濾鏡及鼠標(biāo)指針格式。

★定位主要針對層元素，也可以將頁面中已有的對象轉(zhuǎn)變79.3應(yīng)用CSS樣式當(dāng)創(chuàng)建好CSS樣式后，標(biāo)簽CSS樣式和偽類CSS樣式會(huì)自動(dòng)應(yīng)用到相應(yīng)的HTML標(biāo)簽和偽類上，但類CSS則需要手動(dòng)將其應(yīng)用到網(wǎng)頁元素上?！锸褂每旖莶藛螒?yīng)用CSS樣式

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單的“CSS樣式”選項(xiàng)中選擇要應(yīng)用的樣式即可。9.3應(yīng)用CSS樣式當(dāng)創(chuàng)建好CSS樣式后，標(biāo)簽C8★使用“CSS樣式”面板應(yīng)用CSS樣式

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，在“CSS樣式”面板的CSS樣式名稱上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“套用”命令即可?！锸褂谩皩傩浴泵姘鍛?yīng)用CSS樣式

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，在“屬性”面板的“樣式”下拉列表框中選擇需要的CSS樣式即可。★使用“CSS樣式”面板應(yīng)用CSS樣式方法：選中9★鏈接外部CSS樣式在網(wǎng)頁中要使用外部CSS樣式文件，可以通過鏈接將已經(jīng)建好的CSS樣式表文件鏈接到當(dāng)前頁面中。

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，在“CSS樣式”面板中，單擊附加樣式表按鈕，彈出“鏈接外部樣式表”對話框?！镦溄油獠緾SS樣式在網(wǎng)頁中要使用外部CSS樣式10

說明：將兩個(gè)或多個(gè)CSS樣式應(yīng)用于同一網(wǎng)頁元素時(shí)，這些樣式可能會(huì)發(fā)生沖突，瀏覽器將按以下規(guī)則顯示：

①如果應(yīng)用于同一網(wǎng)頁元素的兩個(gè)樣式發(fā)生沖突，則瀏覽器顯示最里面的規(guī)則，即離元素本身最近的規(guī)則。

②如果外部樣式和內(nèi)部樣式同時(shí)影響元素時(shí)，則應(yīng)用內(nèi)部樣式表。

③如果有直接沖突，則自定義CSS規(guī)則中的屬性將覆蓋HTML標(biāo)簽樣式中的屬性。說明：將兩個(gè)或多個(gè)CSS樣式應(yīng)用于同一網(wǎng)頁元素時(shí)，這119.4編輯CSS樣式★修改CSS樣式表方法：

①在CSS規(guī)則定義對話框中進(jìn)行修改。②直接在“CSS樣式”面板中單擊編輯按鈕進(jìn)行修改。9.4編輯CSS樣式★修改CSS樣式表方法：12★刪除CSS樣式方法：

①在要?jiǎng)h除的CSS樣式上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除”命令。

②在“CSS樣式”面板中單擊刪除按鈕?！飫h除CSS樣式方法：139.5綜合實(shí)例★實(shí)例9-1設(shè)置文字樣式★實(shí)例9-2制作圖像翻轉(zhuǎn)效果★實(shí)例9-3制作超鏈接樣式9.5綜合實(shí)例★實(shí)例9-1設(shè)置文字樣式★實(shí)例9-214

舉例：設(shè)置超級鏈接樣式

a:link：設(shè)置在正常情況下超鏈接的顯示格式

a:visited：設(shè)置瀏覽過的超鏈接的顯示格式

a:hover：設(shè)置當(dāng)鼠標(biāo)移到超鏈接上時(shí)的顯示格式

a:active：設(shè)置在超鏈接上單擊時(shí)的顯示形式舉例：設(shè)置超級鏈接樣式15第9章CSS樣式表本章學(xué)習(xí)要點(diǎn)：創(chuàng)建CSS樣式設(shè)置CSS樣式屬性應(yīng)用CSS樣式第9章CSS樣式表本章學(xué)習(xí)要點(diǎn)：16CSS的全稱為CascadingStyleSheet，層疊樣式表。它是一組顯示規(guī)則的集合，其中每一條規(guī)則都規(guī)定了適用的對象以及應(yīng)用到該對象的顯示方案。CSS的全稱為CascadingStyleShee179.1創(chuàng)建CSS樣式★顯示CSS樣式面板執(zhí)行“窗口|CSS樣式”命令或按shift+F11鍵即可打開“CSS樣式”面板?！飫?chuàng)建方法單擊“CSS樣式表”面板右下角的“新建CSS樣式”按鈕，打開“新建CSS規(guī)則”對話框，在其中設(shè)置層疊樣式的類型及保存的樣式即可。9.1創(chuàng)建CSS樣式★顯示CSS樣式面板執(zhí)行“189.2設(shè)置CSS樣式屬性樣式表是通過其屬性來編輯樣式的。在CSS規(guī)則定義對話框中可定義的CSS規(guī)則很多，主要有8種類型?！镱愋?/p>

用來定義字體、大小、粗細(xì)、斜體、行高和顏色等設(shè)置。該設(shè)置主要針對網(wǎng)頁中的文字有效。9.2設(shè)置CSS樣式屬性樣式表是通過其屬性來編輯樣19★背景用來定義背景設(shè)置。它可以對網(wǎng)頁中的任何元素應(yīng)用背景屬性，還可以設(shè)置背景圖像的位置?！飬^(qū)塊用來定義文字的排列格式，是對文本段落控制的補(bǔ)充?！锓娇蛴脕砜刂圃卦陧撁嫔系姆胖梅绞揭约皩傩远x。★背景用來定義背景設(shè)置。它可以對網(wǎng)頁中的任何元素應(yīng)20★邊框用來定義元素周圍邊框的設(shè)置，如邊框?qū)挾?、顏色和樣式?！锪斜碛脕頌榱斜順?biāo)簽定義列表設(shè)置(如項(xiàng)目符號(hào)外觀、自定義圖像和位置)。★邊框用來定義元素周圍邊框的設(shè)置，如邊框?qū)挾?、顏?1★定位主要針對層元素，也可以將頁面中已有的對象轉(zhuǎn)變?yōu)閷釉氐膬?nèi)容

★擴(kuò)展

用于設(shè)置CSS樣式的打印、濾鏡及鼠標(biāo)指針格式。

★定位主要針對層元素，也可以將頁面中已有的對象轉(zhuǎn)變229.3應(yīng)用CSS樣式當(dāng)創(chuàng)建好CSS樣式后，標(biāo)簽CSS樣式和偽類CSS樣式會(huì)自動(dòng)應(yīng)用到相應(yīng)的HTML標(biāo)簽和偽類上，但類CSS則需要手動(dòng)將其應(yīng)用到網(wǎng)頁元素上?！锸褂每旖莶藛螒?yīng)用CSS樣式

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，單擊鼠標(biāo)右鍵，在彈出的快捷菜單的“CSS樣式”選項(xiàng)中選擇要應(yīng)用的樣式即可。9.3應(yīng)用CSS樣式當(dāng)創(chuàng)建好CSS樣式后，標(biāo)簽C23★使用“CSS樣式”面板應(yīng)用CSS樣式

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，在“CSS樣式”面板的CSS樣式名稱上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“套用”命令即可。★使用“屬性”面板應(yīng)用CSS樣式

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，在“屬性”面板的“樣式”下拉列表框中選擇需要的CSS樣式即可?！锸褂谩癈SS樣式”面板應(yīng)用CSS樣式方法：選中24★鏈接外部CSS樣式在網(wǎng)頁中要使用外部CSS樣式文件，可以通過鏈接將已經(jīng)建好的CSS樣式表文件鏈接到當(dāng)前頁面中。

方法：選中要應(yīng)用樣式的網(wǎng)頁元素后，在“CSS樣式”面板中，單擊附加樣式表按鈕，彈出“鏈接外部樣式表”對話框?！镦溄油獠緾SS樣式在網(wǎng)頁中要使用外部CSS樣式25

說明：將兩個(gè)或多個(gè)CSS樣式應(yīng)用于同一網(wǎng)頁元素時(shí)，這些樣式可能會(huì)發(fā)生沖突，瀏覽器將按以下規(guī)則顯示：

①如果應(yīng)用于同一網(wǎng)頁元素的兩個(gè)樣式發(fā)生沖突，則瀏覽器顯示最里面的規(guī)則，即離元素本身最近的規(guī)則。

②如果外部樣式和內(nèi)部樣式同時(shí)影響元素時(shí)，則應(yīng)用內(nèi)部樣式表。

③如果有直接沖突，則自定義CSS規(guī)則中的屬性將覆蓋HTML標(biāo)簽樣式中的屬性。說明：將兩個(gè)或多個(gè)CSS樣式應(yīng)用于同一網(wǎng)頁元素時(shí)，這269.4編輯CSS樣式★修改CSS樣式表方法：

①在CSS規(guī)則定義對話框中進(jìn)行修改。②直接在“CSS樣式”面板中單擊編輯按鈕進(jìn)行修改。9.4編輯CSS樣式★修改CSS樣式表方法：27★刪除CSS樣式方法：

①在要?jiǎng)h除的CSS樣式上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“刪除”命令。

②在“CSS樣式”面板中單擊刪除按鈕?！飫h除CSS樣式方法：289.5綜合實(shí)例★實(shí)例9-1設(shè)置文字樣式★實(shí)例9-2制作圖像翻轉(zhuǎn)效果