CSS美化網(wǎng)頁(yè)P(yáng)PT課件

1、用CCS美化網(wǎng)頁(yè)層 疊 樣 式 表 （ C a s c a d i n g S t y l e S h e e t s ， C S S ） 是 W 3 C 定 義 和 維 護(hù) 的 標(biāo) 準(zhǔn) ， 是 一 種 用 來(lái) 為結(jié) 構(gòu) 化 文 檔 （ 如 H T M L 文 檔 或 X M L 應(yīng) 用 ） 添 加 樣 式 （ 字 體 、 間 距 和 顏 色 等 ） 的 計(jì) 算 機(jī) 語(yǔ) 言 。第1頁(yè)/共19頁(yè)基礎(chǔ)CSS的基本概念在于可將網(wǎng)頁(yè)要展示的內(nèi)容與樣式設(shè)定分開，也就是將網(wǎng)頁(yè)的外觀設(shè)定信息從網(wǎng)頁(yè)內(nèi)容獨(dú)立出來(lái)，并集中管理。這樣，當(dāng)要改變網(wǎng)頁(yè)外觀時(shí)，只需更改樣式設(shè)定的部分，HTML文件本身并不需要更改。 第2

2、頁(yè)/共19頁(yè)認(rèn)識(shí)“CSS樣式”面板 選擇“窗口”|“CSS樣式”命令可以打開或者關(guān)閉“CSS樣式”面板。樣式表文件名CSS規(guī)則列表屬性和屬性值列表工具按鈕欄類別視圖第3頁(yè)/共19頁(yè)新建CSS規(guī)則（1）在“新建CSS規(guī)則”對(duì)話框中首先設(shè)置“選擇器類型”選項(xiàng)。（2）在“名稱”文本框中選擇或者輸入一個(gè)CSS規(guī)則名稱。（3）設(shè)置CSS規(guī)則定義在本文檔內(nèi)還是定義在外部樣式表文件中。（4）在“.mycss1的CSS規(guī)則定義”對(duì)話框中可以分類設(shè)置CSS規(guī)則的屬性。 （5）設(shè)置以后單擊“確定”按鈕即可完成一個(gè)CSS規(guī)則的定義，在“CSS樣式”面板中就可以看到定義好的CSS規(guī)則。（6）切換到“代碼”視圖，可以看

3、到在HTML代碼中新增了一段CSS樣式代碼。 第4頁(yè)/共19頁(yè)在網(wǎng)頁(yè)中應(yīng)用CSS樣式1在“屬性”面板選擇應(yīng)用特定的樣式2利用【標(biāo)簽選擇器】選擇樣式3使用右鍵快捷菜單4清除樣式5查看正在應(yīng)用的樣式屬性列表第5頁(yè)/共19頁(yè)6.2 創(chuàng)建CSS創(chuàng)建CSS樣式時(shí)，在“新建CSS規(guī)則”對(duì)話框中，設(shè)置不同的“選擇器類型”可以創(chuàng)建不同類型的CSS樣式。一般情況下，經(jīng)常創(chuàng)建的CSS樣式類型包括類選擇符、標(biāo)識(shí)選擇符、重定義HTML標(biāo)簽、超級(jí)鏈接的CSS樣式等。 第6頁(yè)/共19頁(yè)類選擇符1建立類選擇符CSS樣式2. CSS樣式應(yīng)用于文本3. CSS樣式應(yīng)用于圖片4. 理解類標(biāo)識(shí)符的CSS代碼運(yùn)行效果第7頁(yè)/共19頁(yè)

4、標(biāo)識(shí)選擇符1建立標(biāo)識(shí)選擇符樣式2在單元格中應(yīng)用樣式運(yùn)行效果第8頁(yè)/共19頁(yè)用CSS重新定義HTML標(biāo)簽1修改HTML標(biāo)簽2設(shè)置p標(biāo)簽的屬性運(yùn)行效果第9頁(yè)/共19頁(yè)超鏈接的CSS樣式1創(chuàng)建超級(jí)鏈接 （ 運(yùn)行效果 ）2用CSS樣式重新定義超級(jí)鏈接的外觀第10頁(yè)/共19頁(yè)基本應(yīng)用 本節(jié)將分門別類地對(duì)CSS樣式提供的各類屬性進(jìn)行討論，并通過(guò)一些實(shí)例講解CSS在網(wǎng)頁(yè)制作中的基本應(yīng)用。第11頁(yè)/共19頁(yè)用CSS格式化文本1創(chuàng)建內(nèi)部CSS規(guī)則2應(yīng)用CSS規(guī)則運(yùn)行效果第12頁(yè)/共19頁(yè)6.3.2 用CSS控制表格1控制表格邊框2左上角的單元格邊框 3右下角的單元格邊框 運(yùn)行效果第13頁(yè)/共19頁(yè)6.3.3 用

5、CSS控制列表 1建立段落列表2用CSS自定義段落列表注意：書中的標(biāo)簽應(yīng)該為運(yùn)行效果1運(yùn)行效果2第14頁(yè)/共19頁(yè)6.3.5 用CSS控制區(qū)塊 1創(chuàng)建CSS規(guī)則2應(yīng)用CSS規(guī)則到文本3應(yīng)用CSS規(guī)則到圖片運(yùn)行效果第15頁(yè)/共19頁(yè)6.3.6 CSS樣式濾鏡的應(yīng)用下面通過(guò)制作一個(gè)文字的模糊效果，講解利用CSS濾鏡增加網(wǎng)頁(yè)視覺(jué)效果的方法 運(yùn)行效果第16頁(yè)/共19頁(yè)6.4 鏈接外部CSS樣式文件CSS樣式不但可以直接嵌入在頁(yè)面中，而且可以保存為獨(dú)立的樣式文件（擴(kuò)展名為.css），需要引用樣式文件中的CSS樣式時(shí)，可以將其鏈接到網(wǎng)頁(yè)文檔中。多個(gè)網(wǎng)頁(yè)文件可以共享一個(gè).css樣式文件，對(duì).css樣式文件的修改將會(huì)影響所有以鏈接方式調(diào)用這個(gè).css樣式文件