第10章 使用CSS樣式表美化布局網(wǎng)頁.ppt

《第10章 使用CSS樣式表美化布局網(wǎng)頁.ppt》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、第10章使用CSS樣式表美化布局網(wǎng)頁教學(xué)內(nèi)容：CSS是CascadingStyleSheet的縮寫，又稱為“層疊樣式表”，簡稱為樣式表。它是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)瀏覽器所支持，成為網(wǎng)頁設(shè)計必不可少的工具之一。教學(xué)重點了解CSS樣式表CSS基本語法添加CSS的方法設(shè)置CSS屬性10.1　了解CSS樣式表CSS（CascadingStyleSheet，層疊樣式表）是一種制作網(wǎng)頁的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)瀏覽器所支持，成為網(wǎng)頁設(shè)計必不可少的工具之一。10.2　CSS的使用掌握基于CSS的網(wǎng)頁布局方式，是實現(xiàn)Web標

2、準的基礎(chǔ)。在網(wǎng)頁制作時采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制。10.2.1CSS基本語法CSS的語法結(jié)構(gòu)僅由3部分組成，選擇符、樣式屬性和值，基本語法如下。選擇符{樣式屬性：取值；樣式屬性：取值；樣式屬性：取值；……}10.2.2添加CSS的方法添加CSS有4種方法：鏈接外部樣式表、內(nèi)部樣式表、導(dǎo)入外部樣式表和內(nèi)嵌樣式。控制網(wǎng)頁元素外觀的CSS樣式用來定義字體、顏色、邊距和字間距等屬性，可以使用Dreamweaver來對所有的CSS屬性進行設(shè)置。CSS屬性被分為【類型】、【背景】

3、、【區(qū)塊】、【方框】、【邊框】、【列表】、【定位】、【擴展】、【過渡】9大類。10.3　設(shè)置CSS屬性在CSS樣式定義對話框左側(cè)的【分類】列表框中選擇【類型】選項，在右側(cè)可以設(shè)置CSS樣式的類型參數(shù)，如圖10.1所示。10.3.1設(shè)置CSS類型屬性使用【CSS規(guī)則定義】對話框的【背景】類別可以定義CSS樣式的背景設(shè)置?？梢詫W(wǎng)頁中的任何元素應(yīng)用背景屬性，如圖10.2所示。10.3.2設(shè)置CSS背景屬性使用【CSS規(guī)則定義】對話框的【區(qū)塊】類別可以定義標簽和屬性的間距和對齊設(shè)置，對話框中左側(cè)的【分類】列表中選擇【區(qū)塊】選項，在

4、右側(cè)可以設(shè)置相應(yīng)的CSS樣式，如圖10.3所示。10.3.3設(shè)置CSS區(qū)塊屬性10.3.4設(shè)置CSS方框?qū)傩允褂谩綜SS規(guī)則定義】對話框的【方框】類別可以為用于控制元素在頁面上的放置方式的標簽和屬性定義設(shè)置。10.3.5設(shè)置CSS邊框?qū)傩訡SS的【邊框】類別可以定義元素周圍邊框的設(shè)置，如圖10.5所示。CSS的【列表】類別為列表標簽定義列表設(shè)置，如圖10.6所示。10.3.6設(shè)置CSS列表屬性10.3.7設(shè)置CSS定位屬性CSS的【定位】樣式屬性使用【層】首選參數(shù)中定義層的默認標簽，將標簽或所選文本塊更改為新層，如圖10.7

5、所示。10.3.8設(shè)置CSS擴展屬性【擴展】樣式屬性包含兩部分，如圖10.8所示。10.3.9設(shè)置過渡樣式【過渡】樣式屬性包含所有可動畫屬性，如圖10.9所示。10.4　實戰(zhàn)演練CSS可以說是一門語言，瀏覽器借助它來讀懂網(wǎng)頁設(shè)計，并準確地在頁面上顯示出來。10.4.1實例1——應(yīng)用CSS樣式定義字體大小利用CSS可以固定字體大小，使網(wǎng)頁中的文本始終不隨瀏覽器改變而發(fā)生變化，總是保持著原有的大小，CSS固定字體大小的效果如圖10.10所示。本例講述制作陰影文字效果如圖10.17所示。10.4.2實例2——應(yīng)用CSS樣式制作陰影

6、文字