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

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

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

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

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

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

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

7、部樣式表,單擊【CSS樣式】面板下方的【附加樣式表】按鈕 ，彈出【鏈接外部樣式表】對話框，單擊【文件/URL】后面的【瀏覽】按鈕，插入文件，選中【鏈接】單選項，單擊【確定】按鈕，即可完成添加外部鏈接樣式表的操作。,8.3 將CSS應(yīng)用到網(wǎng)頁,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、的標記中。,8.3.2 內(nèi)部樣式表,內(nèi)部樣式表是把樣式表放到頁面的區(qū)里，這些定義的樣式就應(yīng)用到頁面中，樣式表是用標記插入的。,8.3.3 外部樣式表,外部式樣式表是指將樣式表作為一個獨立的文件保存在計算機上，這個文件以“.css”作為文件的擴展名。樣式在樣式表文件中定義和在嵌入式樣式表中的定義是一樣的，只是不再需要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ī)則定義】對話框的【分類】區(qū)域，選擇【類型】選項，可以對文本的樣式進行設(shè)置。,8.4.2 設(shè)置背景樣式,啟動Dreamweaver CS5，在菜單欄中，選擇【文件】→【打開】菜單項，打開素材文件。在【CSS樣式】面板上，單擊【新建CSS規(guī)則】按鈕。彈出【新建CSS規(guī)則】對話框

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

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