css樣式表詳解ppt課件(已修改)
2025-05-17 12:06 本頁面
【正文】 第 6章 CSS樣式表 ?CSS入門 ?CSS詳解 ?創(chuàng)建和應(yīng)用 CSS 開 始 CSS是 Cascading Style Sheets（層疊樣式表）的簡稱。 CSS的基本概念在于可將網(wǎng)頁要展示的內(nèi)容與樣式設(shè)定分開，也就是將網(wǎng)頁的外觀設(shè)定信息從網(wǎng)頁內(nèi)容獨(dú)立出來，并集中管理。這樣，當(dāng)要改變網(wǎng)頁外觀時，只需更改樣式設(shè)定的部分， HTML文件本身并不需要更改。 本章主要內(nèi)容： ? “CSS樣式 ” 面板 ? 定義 CSS樣式 ? 在網(wǎng)頁中應(yīng)用 CSS樣式 返回本章首頁 CSS入門述 CSS是 W3C定義和維護(hù)的標(biāo)準(zhǔn)，是一種用來為結(jié)構(gòu)化文檔（如 HTML文檔或 XML應(yīng)用）添加樣式（字體、間距和顏色等）的計(jì)算機(jī)語言。它可以使網(wǎng)頁制作者的工作更加輕松和靈活，現(xiàn)在越來越多的網(wǎng)站采用了 CSS技術(shù)。 “CSS樣式”面板 返回本節(jié) 在 Dreamweaver中，“ CSS樣式”面板是新建、編輯、管理CCS的主要工具。選擇“窗口” |“CSS樣式”命令可以打開或者關(guān)閉“ CSS樣式”面板。 在沒有定義 CSS前，“ CSS樣式”面板是空白的。如果在Dreamweaver中定義了 CSS，那么“ CSS樣式”面板中會顯示所定義好的 CSS規(guī)則。 樣式表文件名 CSS規(guī)則列表 屬性和屬性值列表 工具按鈕欄 圖 61 “CSS 樣式”面板 定義 CSS樣式 返回本節(jié) 在 【 CSS樣式 】 面板上，單擊 【 新建 CSS規(guī)則 】 按鈕，會打開如圖 63所示的 【 新建 CSS規(guī)則 】 對話框。 圖 63 【 新建 CSS規(guī)則 】 對話框 1． 【 定義在 】 選項(xiàng) 【 定義在 】 選項(xiàng)包括兩個單選項(xiàng)，分別介紹如下。 （ 1） 【 新建樣式表文件 】 ：此選項(xiàng)將會把設(shè)定的樣式最終保存在一個外部單獨(dú)的樣式表文件中，這個樣式表文件可以被其他 HTML文件共同使用，也就是說可以使站點(diǎn)內(nèi)的所有頁面文件使用同一個樣式表文件，甚至不同的站點(diǎn)只要是網(wǎng)頁就可以使用。 （ 2） 【 僅對該文檔 】 ：此選項(xiàng)將會把設(shè)定的樣式僅僅放在當(dāng)前文件的頭文件中，這些樣式只能在此文件中使用。 專家點(diǎn)撥： 根據(jù)運(yùn)用 CSS的范圍是局限于當(dāng)前網(wǎng)頁內(nèi)部還是可以運(yùn)用到其他網(wǎng)頁文件，可以分為“內(nèi)聯(lián)樣式表”和“外部樣式表”?！皟?nèi)聯(lián)樣式表”是將 CSS規(guī)則定義在HTML網(wǎng)頁文檔內(nèi)部。 “外部樣式表”是將 CSS規(guī)則定義在一個獨(dú)立的外部樣式表文件（擴(kuò)展名為 .css）中。 定義 CSS樣式 返回本節(jié) 【 選擇器類型 】 選項(xiàng)包括 3個單選項(xiàng)，分別介紹如下。 （ 1） 【 類（可應(yīng)用于任何標(biāo)簽） 】 ：選擇此類型后，需要在上方的 【 名稱 】 文本框中填入一個樣式名字，需要注意的是，此類名稱必須以“ .” 開頭。這種方式定義的樣式可以用來定義絕大多數(shù)的 HTML對象，可以使這些對象有統(tǒng)一的外觀。如圖64所示是創(chuàng)建一個 .mystyle的樣式。 圖 64 創(chuàng)建 mystyle樣式 定義 CSS樣式 返回本節(jié) 專家點(diǎn)撥： 如果在 【 定義在 】 選項(xiàng)中選擇的是 【 新建樣式表文件 】 ，那么單擊 【 確定 】 按鈕后會彈出 【 保存樣式表文件為 】 對話框，在其中選擇要保存到的目錄，輸入文件名，單擊 【 保存 】 按鈕后進(jìn)入 【 .mystyle的CSS規(guī)則定義 】 對話框。在其中可以定義 【 類型 】 、 【 背景 】 、 【 區(qū)塊 】 、【 方框 】 、 【 邊框 】 、 【 列表 】 、 【 定位 】 、 【 擴(kuò)展 】 等屬性。 （ 2） 【 標(biāo)簽（重新定義特定標(biāo)簽的外觀） 】 ：選擇此選項(xiàng)后，在 【 標(biāo)簽 】 下拉框里選擇需要重新定義的 HTML標(biāo)簽。 （ 3） 【 高級（ ID、偽類選擇器等） 】 ：重新定義特定元素組合的格式，或其他 CSS允許的選擇器表單的格式（例如，每當(dāng) h2標(biāo)題出現(xiàn)在表格單元格內(nèi)時，就會應(yīng)用選擇器 td h2）。還可以重定義包含特定 id屬性的標(biāo)簽的格式（例如，由 myStyle定義的樣式可以應(yīng)用于所有包含屬性 /值對id=myStyle的 HTML標(biāo)簽）。另外，這個選項(xiàng)還可以設(shè)定鏈接文本的樣式。 返回本節(jié) 定義完樣式表文件后，就可以在 Dreamweaver中套用這些樣式了。套用樣式表的方法主要有 3種，下面分別進(jìn)行介紹。 1．在 【 屬性 】 面板選擇應(yīng)用樣式 在網(wǎng)頁中選中需要應(yīng)用樣式的元素，打開 【 屬性 】 面板，單擊打開【 樣式 】 右邊的下拉列表框，里面列出了已經(jīng)定義的一些 CSS樣式。如圖68所示。 在網(wǎng)頁中應(yīng)用 CSS樣式 圖 68 【 屬性 】 面板中的 “樣式”列表框 2．利用 【 標(biāo)簽選擇器 】 選擇樣式
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1