ch08-應(yīng)用css樣式美化網(wǎng)頁(yè)

1、Dreamweaver CS5網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)教程,第8章 應(yīng)用CSS樣式美化網(wǎng)頁(yè),8.1 認(rèn)識(shí)CSS樣式表,8.1.1 CSS的基本概念8.1.2 CSS樣式的類型8.1.3 CSS樣式基本語(yǔ)法,8.1.1 CSS的基本概念,CSS（Cascading Style Sheet），中文譯為【層疊樣式表】，是用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。簡(jiǎn)單的說CSS的引入就是為了使得HTML能夠更好的

2、適應(yīng)頁(yè)面的美工設(shè)計(jì)。,8.1.2 CSS樣式的類型,1.自定義CSS(類樣式)2.重定義標(biāo)簽的CSS3. CSS選擇器樣式(高級(jí)樣式),8.1.3 CSS樣式基本語(yǔ)法,CSS的基本語(yǔ)法由三部分構(gòu)成：選擇器（Selector）、屬性（Property）和屬性值（Value）三個(gè)部分。,8.2 創(chuàng)建CSS樣式,8.2.1 建立標(biāo)簽樣式8.2.2 建立類樣式8.2.3 建立復(fù)合內(nèi)容樣式8.2.4 建立ID樣式8

3、.2.5 鏈接外部樣式表,8.2.1 建立標(biāo)簽樣式,啟動(dòng)Dreamweaver CS5，在菜單欄中，選擇【文件】→【打開】菜單項(xiàng)，打開素材文件。在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕。彈出【新建CSS規(guī)則】對(duì)話框，單擊展開【選擇器類型】下拉按鈕，選擇【標(biāo)簽（重新定義HTML元素）】，單擊【確定】按鈕。彈出【CSS規(guī)則定義】對(duì)話框，在【分類】列表中，選擇各項(xiàng)進(jìn)行設(shè)置，單擊【確定】按鈕。切換至代碼視圖，可以看到在代碼

4、中，添加了相應(yīng)的代碼。保存文檔，按下鍵盤上的【F12】鍵，即可在瀏覽器中瀏覽到網(wǎng)頁(yè)的視覺效果。,8.2.2 建立類樣式,在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕 。彈出【新建CSS規(guī)則】對(duì)話框，單擊展開【選擇器類型】下拉按鈕，選擇【類（可應(yīng)用于任何HTML元素）】，單擊【確定】按鈕。彈出【CSS規(guī)則定義】對(duì)話框，在【分類】列表中，選擇各項(xiàng)進(jìn)行設(shè)置，單擊【確定】按鈕。切換至代碼視圖，可以看到在代碼中，添加了相應(yīng)的代碼。

5、保存文檔，按下鍵盤上的【F12】鍵，即可在瀏覽器中瀏覽到網(wǎng)頁(yè)的視覺效果。,8.2.3 建立復(fù)合內(nèi)容樣式,在【新建CSS規(guī)則】對(duì)話框中，單擊展開【選擇器類型】下拉按鈕，選擇【復(fù)合內(nèi)容（基于選擇的內(nèi)容）】選項(xiàng)，在【選擇器名稱】下拉選項(xiàng)中，包括了4個(gè)選項(xiàng)。,8.2.4 建立ID樣式,在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕 ，如圖8-13所示。彈出【新建CSS規(guī)則】對(duì)話框，單擊展開【選擇器類型】下拉按鈕，選擇【類（可應(yīng)用于任

6、何HTML元素）】，單擊【確定】按鈕。彈出【CSS規(guī)則定義】對(duì)話框，在【分類】列表中，選擇【方框】選項(xiàng)，設(shè)置參數(shù)，單擊【確定】按鈕。在【插入】面板中，單擊【插入Div標(biāo)簽】按鈕。彈出【插入Div標(biāo)簽】面板，單擊展開【插入】下拉選項(xiàng)，選擇【在結(jié)束標(biāo)簽之前】選項(xiàng)，單擊【ID】下拉選項(xiàng)，選擇【#top】選項(xiàng)下，單擊【確定】按鈕。此時(shí)，已經(jīng)插入ID名稱為top的Div，在頁(yè)面中看到剛剛創(chuàng)建的#top的CSS樣式表。,8.2.5 鏈接外

7、部樣式表,單擊【CSS樣式】面板下方的【附加樣式表】按鈕 ，彈出【鏈接外部樣式表】對(duì)話框，單擊【文件/URL】后面的【瀏覽】按鈕，插入文件，選中【鏈接】單選項(xiàng)，單擊【確定】按鈕，即可完成添加外部鏈接樣式表的操作。,8.3 將CSS應(yīng)用到網(wǎng)頁(yè),8.3.1 內(nèi)聯(lián)樣式表8.3.2 內(nèi)部樣式表8.3.3 外部樣式表,8.3.1 內(nèi)聯(lián)樣式表,內(nèi)聯(lián)式樣式表是在現(xiàn)有HTML元素的基礎(chǔ)上，用style屬性把特殊的樣式直接加入到那些控制信息

8、的標(biāo)記中。,8.3.2 內(nèi)部樣式表,內(nèi)部樣式表是把樣式表放到頁(yè)面的區(qū)里，這些定義的樣式就應(yīng)用到頁(yè)面中，樣式表是用標(biāo)記插入的。,8.3.3 外部樣式表,外部式樣式表是指將樣式表作為一個(gè)獨(dú)立的文件保存在計(jì)算機(jī)上，這個(gè)文件以“.css”作為文件的擴(kuò)展名。樣式在樣式表文件中定義和在嵌入式樣式表中的定義是一樣的，只是不再需要style元素。,8.4 設(shè)置CSS樣式,8.4.1 設(shè)置文本樣式8.4.2 設(shè)置背景樣式8.4.3 設(shè)置區(qū)

9、塊樣式8.4.4 設(shè)置方框樣式8.4.5 設(shè)置邊框樣式8.4.6 設(shè)置列表樣式8.4.7 設(shè)置定位樣式,8.4.1 設(shè)置文本樣式,在【CSS規(guī)則定義】對(duì)話框的【分類】區(qū)域，選擇【類型】選項(xiàng)，可以對(duì)文本的樣式進(jìn)行設(shè)置。,8.4.2 設(shè)置背景樣式,啟動(dòng)Dreamweaver CS5，在菜單欄中，選擇【文件】→【打開】菜單項(xiàng)，打開素材文件。在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕。彈出【新建CSS規(guī)則】對(duì)話框

10、，單擊展開【選擇器類型】下拉按鈕，選擇【類（可應(yīng)用于任何HTML元素）】，在【選擇器名稱】文本框輸入文本，單擊【確定】按鈕。彈出【CSS規(guī)則定義】對(duì)話框，在【分類】列表中，選擇【背景】選項(xiàng)，設(shè)置參數(shù)，單擊【確定】按鈕。在頁(yè)面中選中需要應(yīng)用背景樣式的內(nèi)容，在【屬性】面板中，單擊展開【類】下拉按鈕，選擇剛剛定義的CSS樣式。此時(shí)，在頁(yè)面中，即可看到剛剛定義的背景樣式效果，通過以上步驟即可完成操作。,8.4.3 設(shè)置區(qū)塊樣式,使用【區(qū)

11、塊】類別可以定義段落文本中文字的字距、對(duì)齊方式等格式，在【CSS規(guī)則定義】對(duì)話框左側(cè)，選擇【區(qū)塊】選項(xiàng)，即可進(jìn)行相應(yīng)的設(shè)置。,8.4.4 設(shè)置方框樣式,在圖像的屬性面板上，可以設(shè)置圖像的大小、圖像水平和垂直方向上的空白區(qū)域等，方框樣式完善并豐富了這些屬性設(shè)置，定義特定元素的大小及其與周圍元素間距等屬性。,8.4.5 設(shè)置邊框樣式,在Dreamweaver CS5中，使用【邊框】類別可以定義元素周圍的邊框的寬度、顏色和樣式等設(shè)置。,8