第4章 旅游網(wǎng)站CSS樣式設(shè)置(免費下載)

1、Dreamweaver CS5網(wǎng)頁制作基礎(chǔ)教程 本章將介紹CSS樣式的基本知識和在Dreamweaver CS5中設(shè)置CSS樣式的基本方法。 第4章旅游網(wǎng)站CSS樣式設(shè)置學(xué)習(xí)目標(biāo)了解CSS速記規(guī)則與普通規(guī)則的區(qū)別。了解設(shè)置CSS樣式首選參數(shù)的方法。了解CSS類型等屬性的基本涵義的設(shè)置技巧。掌握創(chuàng)建、編輯、管理和應(yīng)用CSS樣式的方法。4.1設(shè)計思路本章將重點放在如何創(chuàng)建和設(shè)置CSS樣式上，即通過Dreamweaver CS5如何創(chuàng)建、編輯、管理和應(yīng)用CSS樣式。實際上，在第3章已或多或少地涉及了CSS樣式的使用，如設(shè)置頁面屬性和通過【屬性（CSS）】面板設(shè)置文本字體、大小和顏色等。本章將介紹通過

2、【CSS樣式】面板創(chuàng)建和設(shè)置CSS樣式的方法，例子仍然使用第3章制作的4個網(wǎng)頁“jianjie.htm”、“yanbian.htm”、“qihou.htm”和“zhibei.htm”。通過本章的操作，這些網(wǎng)頁將變得更加美觀。 4.2 關(guān)于CSS樣式CSS產(chǎn)生背景 CSS層疊次序 CSS速記格式 HTML的初衷是用于定義網(wǎng)頁內(nèi)容，即通過使用、等標(biāo)簽來表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”等信息。至于網(wǎng)頁布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。由于當(dāng)時盛行的兩種瀏覽器Netscape和Internet Explorer不斷將新的HTML標(biāo)簽和屬性（如字體標(biāo)簽和顏色屬性）添加到HTML規(guī)

3、范中，致使創(chuàng)建網(wǎng)頁內(nèi)容清晰地獨立于網(wǎng)頁表現(xiàn)層的站點變得越來越困難。 為了解決這個問題，非營利的標(biāo)準(zhǔn)化聯(lián)盟W3C（萬維網(wǎng)聯(lián)盟）肩負(fù)起了HTML標(biāo)準(zhǔn)化的使命，并在HTML 4.0之外創(chuàng)造出了樣式（Style）?，F(xiàn)在，所有的主流瀏覽器均支持CSS層疊樣式表。 4.2.1 CSS產(chǎn)生背景內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）擁有最高的優(yōu)先權(quán)，然后依次是內(nèi)部樣式表（位于標(biāo)簽內(nèi)部）、外部樣式表、瀏覽器默認(rèn)設(shè)置。 4.2.2 CSS層疊次序CSS規(guī)范支持使用速記CSS的簡略語法格式創(chuàng)建CSS樣式，可以用一個聲明指定多個屬性的值。h1 font-weight: bold;font-size: 16pt;line-he

4、ight: 18pt;font-family: Arial;font-variant: normal;font-style: normal;font-stretch: normal;font-size-adjust: none下面使用一個速記屬性重寫這一規(guī)則，可能的形式為h1 font: bold 16pt/18pt Arial 4.2.3 CSS速記格式4.3 創(chuàng)建CSS樣式使用【CSS樣式】面板 創(chuàng)建CSS樣式 編輯CSS樣式 使用【CSS樣式】面板可以查看、創(chuàng)建、編輯和刪除CSS樣式。 4.3.1 使用【CSS樣式】面板4.3.2 創(chuàng)建CSS樣式在【CSS樣式】面板中，可以創(chuàng)建CSS樣式

5、。 如果對創(chuàng)建的樣式不滿意，可以進(jìn)行修改。除了直接在【CSS樣式】面板中修改屬性值外，還可以直接雙擊樣式名稱打開規(guī)則定義對話框重新設(shè)置屬性，包括添加屬性、修改屬性或刪除屬性，不需要的屬性設(shè)置直接保留空白即可 。4.3.3 編輯CSS樣式4.4 應(yīng)用CSS樣式應(yīng)用CSS樣式 附加外部樣式表在Dreamweaver CS5中，可以通過多種途徑來應(yīng)用已經(jīng)創(chuàng)建好的CSS樣式。1、應(yīng)用類樣式：在【屬性（HTML）】面板的【類】下拉列表中選擇類樣式名稱，也可在【屬性（CSS）】面板的【目標(biāo)規(guī)則】下拉列表中選擇類樣式名稱。 4.4.1 應(yīng)用CSS樣式 在給文本應(yīng)用CSS類樣式時，在文檔中首先要選擇要應(yīng)用CS

6、S樣式的文本?？梢詫⒉迦朦c放在段落中，這樣可以將樣式應(yīng)用于整個段落。如果要指定要應(yīng)用CSS樣式的確切HTML標(biāo)簽，可在文檔窗口左下角的HTML標(biāo)簽選擇器中選擇相應(yīng)的標(biāo)簽。如果在單個段落中選擇了一個文本范圍，則CSS樣式只影響所選范圍。如果要對多個段落同時應(yīng)用一個類樣式，可以同時選中多個段落。除了通過【屬性】面板應(yīng)用類樣式外，還可以在【文本】/【CSS樣式】菜單命令中選擇類樣式名稱將其應(yīng)用到所選的內(nèi)容上，也可在文檔窗口中單擊右鍵，在彈出的快捷菜單中選擇【CSS樣式】命令，然后選擇要應(yīng)用的樣式。在【CSS樣式】面板的【全部】模式下，用鼠標(biāo)右鍵單擊要應(yīng)用的樣式名稱，然后從快捷菜單選擇【套用】命令也可

7、。如果要在文本或其他對象中刪除已應(yīng)用的類樣式，首先要選擇從中刪除樣式的文本或?qū)ο螅凇緦傩裕℉TML）】面板的【類】下拉列表中選擇“無”即可。 應(yīng)用ID名稱樣式：選中對象，然后將其ID名稱設(shè)置為創(chuàng)建的ID名稱樣式中的ID。在【CSS樣式】面板中單擊【附加樣式表】按鈕，鏈接外部樣式表。網(wǎng)頁文檔附加了外部樣式表并加以引用后，當(dāng)編輯外部樣式表時，鏈接到該樣式表的所有網(wǎng)頁文檔全部更新以反映所做的編輯。 4.4.2 附加外部樣式表4.5 管理CSS樣式將內(nèi)聯(lián)CSS轉(zhuǎn)換為規(guī)則 移動CSS規(guī)則 選擇包含要轉(zhuǎn)換的內(nèi)聯(lián)CSS的整個標(biāo)簽，在選中的標(biāo)簽上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【CSS樣式】/【將內(nèi)聯(lián)C

8、SS轉(zhuǎn)換為規(guī)則】命令，打開【轉(zhuǎn)換內(nèi)聯(lián)CSS】對話框，進(jìn)行相應(yīng)的設(shè)置即可。 4.5.1 將內(nèi)聯(lián)CSS轉(zhuǎn)換為規(guī)則在【CSS樣式】面板中，按住Ctrl鍵依次選擇要移動的規(guī)則，用鼠標(biāo)右鍵單擊選定的規(guī)則，在彈出的快捷菜單中選擇【移動CSS規(guī)則】命令，在【移至外部樣式表】對話框中根據(jù)需要設(shè)置即可。4.5.2 移動CSS規(guī)則4.6 設(shè)置CSS的屬性類型屬性背景屬性區(qū)塊屬性方框?qū)傩赃吙驅(qū)傩粤斜韺傩远ㄎ粚傩詳U展屬性4.6.1 類型屬性類型屬性主要用于定義網(wǎng)頁中文本的字體、大小、顏色、樣式、行高及文本鏈接的修飾效果等?？梢詫W(wǎng)頁中的任何元素應(yīng)用背景屬性。4.6.2 背景屬性區(qū)塊屬性主要用于控制網(wǎng)頁元素的間距、對齊方式等。4.6.3 區(qū)塊屬性4.6.4 方框?qū)傩訡SS將網(wǎng)頁中所有的塊元素都看作是包含在一個方框中的，使用【方框】屬性可以定義方框的相關(guān)設(shè)置。網(wǎng)頁元素邊框的效果是在【邊框】屬性中進(jìn)行設(shè)置。4.6.5 邊框?qū)傩?.6.6 列表屬性列表屬性用于控制列表內(nèi)的各項元素，列表屬性不僅可以修改列表符號的類型，還可以使用自定義的圖像來代替項目列表符號，這就使得文檔中的列表格式有了更多的外觀。定位屬性可以使網(wǎng)頁元素隨處浮動，這對于一些固定元素（如表格）來說，是一種功能的擴展，而對于一些浮動元素（如AP Div）來說，卻是有