《網頁設計與制作（第2版）》第7章 使用CSS樣式_第1頁
《網頁設計與制作（第2版）》第7章 使用CSS樣式_第2頁
《網頁設計與制作（第2版）》第7章 使用CSS樣式_第3頁
《網頁設計與制作（第2版）》第7章 使用CSS樣式_第4頁
《網頁設計與制作（第2版）》第7章 使用CSS樣式_第5頁
已閱讀5頁，還剩48頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

CSS是當前網頁設計中非常流行的樣式定義技術，主要用于控制網頁中的元素或區域的外觀格式。使用CSS可以將與外觀樣式有關的代碼從網頁文檔中分離出來，實現內容與樣式的分離，從而使文檔清晰簡潔。本章將介紹CSS樣式的基本知識以及設置CSS樣式的基本方法。第7章使用CSS樣式學習目標了解CSS速記規則與普通規則的區別。了解CSS樣式的基本類型和基本屬性。掌握創建和編輯CSS樣式的基本方法。掌握管理和應用CSS樣式的基本方法。7.1.1CSS主要功能7.1.2CSS樣式層疊優先次序7.1.3CSS速記格式7.1關于CSS樣式7.1.1CSS主要功能CSS（CascadingStyleSheet），可譯為“層疊樣式表”或“級聯樣式表”，是一組格式設置規則，用于控制Web頁面的外觀。通過使用CSS樣式設置頁面的格式，可將頁面的內容與表現形式分離。頁面內容存放在HTML文檔中，而用于定義表現形式的CSS樣式則存放在另一個獨立的樣式表文件中或HTML文檔的某一部分，通常為文件頭部分。將內容與表現形式分離，不僅可使維護站點的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。7.1.1CSS主要功能CSS樣式表的功能一般可以歸納為以下幾點。? 可以更加靈活地控制網頁中文本的字體、顏色、大小、行距等。? 可以靈活地為網頁中的元素設置各種邊框效果。? 可以方便地為網頁中的元素設置背景圖像、平鋪方式及背景位置。? 可以精確地控制網頁中各元素的位置，使元素在網頁中浮動。? 可以為網頁中的元素設置各種濾鏡，從而產生諸如陰影、輝光、模糊和透明等只有在一些圖像處理軟件中才能實現的效果。? 可以與腳本語言相結合，使網頁中的元素產生各種動態效果。7.1.2 CSS樣式層疊優先次序層疊是指瀏覽器最終為網頁上的特定元素顯示樣式的方式。3種不同的源決定了網頁上顯示的樣式：由頁面的作者創建的樣式表、用戶的自定義樣式選擇（如果有）和瀏覽器本身的默認樣式。除了作為網頁及附加到該頁的樣式表的作者來創建網頁的樣式外，瀏覽器也具有它們自己的默認樣式表來指定網頁的顯示方式，用戶還可以通過對瀏覽器進行自定義來調整網頁的顯示。網頁的最終外觀是由這3種源的規則共同作用（或者“層疊”）的結果，最后以最佳方式顯示網頁。當同一個HTML元素被不止一個樣式定義時，會優先使用哪個位置的樣式呢？一般而言，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中，其中位于HTML元素內部的內聯樣式擁有最高優先權，然后是位于<head>標簽內部的樣式，第三是外部樣式表，最后是瀏覽器的自身的默認設置。7.1.3 CSS速記格式CSS規范支持使用速記CSS的簡略語法格式創建CSS樣式，可以用一個聲明指定多個屬性的值。例如，font屬性可以在同一行中設置font-style、font-variant、font-weight、font-size、line-height以及font-family等多個屬性。但使用速記CSS的問題是速記CSS屬性省略的值會被指定為屬性的默認值。當兩個或多個CSS規則指定給同一標簽時，這可能會導致頁面無法正確顯示。下面顯示的“h1”規則使用了普通的CSS語法格式，其中已經為font-variant、font-style、font-stretch和font-size-adjust屬性分配了默認值。7.1.3 CSS速記格式h1{font-weight:bold;font-size:16pt;line-height:18pt;font-family:Arial;font-variant:normal;font-style:normal;font-stretch:normal;font-size-adjust:none}下面使用一個速記屬性重寫這一規則，可能的形式為：h1{font:bold16pt/18ptArial}上述速記示例省略了font-variant、font-style、font-stretch和font-size-adjust標簽。7.1.3 CSS速記格式在DreamweaverCS6中打開使用速記CSS符號編寫代碼的Web頁面時，DreamweaverCS6將使用普通形式創建新的CSS規則。可通過更改【首選參數】對話框【CSS樣式】類別中的CSS編輯參數，來指定DreamweaverCS6創建和編輯CSS規則的方式。DreamweaverCS6默認情況下使用CSS符號的普通形式撰寫語法，這樣可以防止能夠覆蓋普通規則的速記規則所引起的潛在問題。。7.2創建CSS樣式7.2.1

教學案例━━梅蘭竹菊7.2.2

【CSS樣式】面板7.2.3

CSS樣式的選擇器類型7.2.4

CSS樣式的保存位置7.2.5

編輯CSS規則7.2.1

教學案例━━梅蘭竹菊將素材文檔復制到站點文件夾下，然后根據要求創建CSS樣式，在瀏覽器中的顯示效果如圖7-4所示。(1) 創建一個新文檔“7-2-1.htm”，將頁面字體設置為“宋體”，大小設置為“16px”，瀏覽器標題設置為“梅蘭竹菊”，然后輸入文本。(2) 將文檔標題“梅蘭竹菊”的格式設置為“標題1”，創建標簽類型的CSS樣式“p”，設置行高為“25px”，段前段后距離為“0”。(3) 創建類CSS樣式“.ptext”，設置文本顏色為紅色“#F00”，并具有下劃線效果，然后應用到正文第一段。(4) 插入圖像“images/hua.jpg”，設置其ID名稱為“hua”，寬度為“350px”，高度隨寬度自動變化，然后創建ID名稱類型的CSS樣式“#hua”，設置其邊框樣式為“solid”，邊框寬度為“5px”，邊框顏色為“#0F0”。7.2.1

教學案例━━梅蘭竹菊7.2.2

【CSS樣式】面板【CSS樣式】面板只有在網頁文檔或CSS文檔處于打開的狀態下，才可以使用。因此，需要新建或打開一個網頁文檔，然后選擇菜單命令【窗口】/【CSS樣式】，打開【CSS樣式】面板。7.2.3 CSS樣式的選擇器類型【新建CSS規則】對話框【選擇器類型】下拉列表主要用來設置選擇器類型，主要有4種：(1) 類（可應用于任何HTML元素）(2) ID（僅應用于一個HTML元素）(3) 標簽（重新定義HTML元素）(4) 復合內容（基于選擇的內容）7.2.4CSS樣式的保存位置【新建CSS規則】對話框的【規則定義】下拉列表主要用來設置所定義規則的保存位置，有“（僅限該文檔）”和“（新建樣式表文件）”兩個選項。7.2.5 編輯CSS規則如果對創建的樣式不滿意可以進行修改，主要有兩種方式：一種是直接在【CSS樣式】面板中修改屬性值，還可以根據需要添加新的屬性；第二種是在【CSS樣式】面板中直接雙擊樣式名稱或單擊【編輯】按鈕打開規則定義對話框重新編輯屬性，包括添加屬性、修改屬性或刪除屬性，不需要的屬性直接保留空白即可。7.3 應用CSS樣式7.3.1教學案例━━人生就像一條河7.3.2

創建CSS樣式表文件7.3.3

附加CSS樣式表

7.3.4

自動應用的CSS樣式

7.3.5單個CSS類的應用

7.3.6多個CSS類的應用

7.3.1教學案例━━人生就像一條河

將素材文檔復制到站點文件夾下，然后根據要求創建和應用CSS樣式，在瀏覽器中的顯示效果如圖7-27所示。(1) 創建一個CSS文檔并保存為“rs.css”，然后在其中創建復合內容的CSS樣式“bodytd”，設置字體為“宋體”，大小為“16px”。(2) 打開網頁文檔“7-3-1.htm”，附加CSS樣式表文件“rs.css”。(3) 將文檔標題“人生就像一條河”的格式設置為“標題1”，然后在樣式表文件“rs.css”中創建類CSS樣式“.ptext”，設置行高為“25px”，段前段后距離為“0”，并應用到正文所有段落。(4) 設置圖像“images/river.jpg”的ID名稱為“tu”，然后在樣式表文件“rs.css”中創建標簽CSS樣式“#tu”，設置邊框樣式為“solid”，邊框寬度為“5px”，邊框顏色為“#0C0”。7.3.1教學案例━━人生就像一條河7.3.2 創建CSS樣式表文件在DreamweaverCS6中，創建外部樣式表文件主要有兩種方式。一種是在當前網頁文檔中創建CSS樣式時，在打開的【新建CSS規則】對話框的【規則定義】下拉列表中選擇【（新建樣式表文件）】，打開【將樣式表文件另存為】對話框來創建樣式表文件。此時創建的樣式表文件自動鏈接到當前打開的網頁文檔。7.3.2 創建CSS樣式表文件另一種是選擇菜單命令【文件】/【新建】，打開【新建文檔】對話框，依次選擇【空白頁】/【CSS】，單擊【創建】按鈕創建一個空白CSS文檔，然后選擇菜單命令【文件】/【保存】，打開【另存為】對話框，輸入文件名稱并保存文檔。此時創建的樣式表文件是一個空白文檔，需要創建相應的CSS樣式，可以直接在CSS文檔中創建，也可以將CSS文檔附加到網頁文檔后，根據網頁文檔需要再創建。7.3.3 附加CSS樣式表附加樣式表的方法是，在【CSS樣式】面板中單擊【附加樣式表】按鈕，打開【鏈接外部樣式表】對話框，單擊【文件/URL】列表框后面的【瀏覽】按鈕選擇要附加的樣式表文件。7.3.4 自動應用的CSS樣式在已經創建好的CSS樣式中，標簽CSS樣式、ID名稱CSS樣式和復合CSS樣式基本上都是自動應用的。重新定義了標簽的CSS樣式，凡是使用該標簽的內容將自動應用該標簽CSS樣式。例如，重新定義了段落標簽“p”的CSS樣式，凡是使用標簽<p>…</p>的內容都將應用其樣式。定義了ID名稱CSS樣式，擁有該ID名稱的對象將應用該樣式。復合內容CSS樣式將自動應用到所選擇的內容上。7.3.5 單個CSS類的應用一、 通過【屬性】面板首先選中要應用CSS樣式的內容，然后在【屬性（HTML）】面板的【類】下拉列表中，或者在【屬性（CSS）】面板的【目標規則】下拉列表中選擇已經創建好的樣式。7.3.5 單個CSS類的應用二、 通過菜單命令【格式】/【CSS樣式】首先選中要應用CSS樣式的內容，然后選擇菜單命令【格式】/【CSS樣式】，從下拉菜單中選擇預先設置好的樣式名稱，這樣就可以將被選擇的樣式應用到所選的內容上。7.3.5 單個CSS類的應用三、 通過【CSS樣式】面板下拉菜單中的【應用】命令首先選中要應用CSS樣式的內容，然后在【CSS樣式】面板中選中要應用的樣式，再在面板的右上角單擊按鈕，或者直接單擊鼠標右鍵，從彈出的快捷菜單中選擇【應用】命令即可應用樣式。7.3.6 多個CSS類的應用在DreamweaverCS6中，可以將多個CSS類應用于單個元素，方法如下。(1) 首先選擇一個要應用多個類的HTML標簽元素。(2) 使用以下任意一種方法打開【多類選區】對話框。? 在【屬性（HTML）】面板的【類】下拉列表中或【屬性（CSS）】面板的【目標規則】下拉列表中選擇【應用多個類】選項。? 用鼠標右鍵單擊文檔窗口底部要應用類的標簽選擇器，在彈出的快捷菜單中選擇【設置類】/【應用多個類】命令。(3) 選擇需要應用的類，單擊按鈕，將對所選擇的HTML標簽應用多個類，如此時的段落標簽<p>變成了<p.line.pstyle>。7.4 管理CSS樣式7.4.1

轉換CSS規則7.4.2

移動CSS規則7.4.1

轉換CSS規則通常在設置CSS樣式時不推薦使用內聯樣式，如果要使CSS更干凈整齊，可以將已有的內聯樣式轉換為駐留在網頁文檔頭或外部樣式表中的CSS規則。方法是，選擇包含要轉換的內聯CSS的整個<style>標簽。7.4.1

轉換CSS規則在選中的<style>標簽上單擊鼠標右鍵，在彈出的快捷菜單中選擇【CSS樣式】/【將內聯CSS轉換為規則】命令，打開【轉換內聯CSS】。在【轉換為】下拉列表框中選擇“新的CSS類”，然后在文本框中輸入新規則的類名稱“.tcolor”，在【在以下位置創建規則】選項中選擇要存放CSS規則的位置。7.4.1

轉換CSS規則在【轉換為】下拉列表框中有3個選項，讀者可以根據需要選擇。在【在以下位置創建規則】中，如果要轉換到樣式文件中，應該選擇“樣式表”選項并定義樣式表文件位置，如果選擇文檔頭作為放置新CSS規則的位置，應該選擇第2項。單擊【確定】按鈕，轉換內聯CSS為文檔頭部CSS規則。7.4.2 移動CSS規則可以根據需要將CSS規則移動或導出到不同位置。例如，可以將CSS規則從文檔頭移動到外部樣式表，也可以在外部樣式表之間移動等。移動CSS規則的方法是，在【CSS樣式】面板中，選擇要移動的CSS規則，然后單擊鼠標右鍵，在彈出的快捷菜單中選擇【移動CSS規則】命令。7.4.2 移動CSS規則在打開的【移至外部樣式表】對話框的【樣式表】列表框中顯示所有鏈接到當前網頁文檔的樣式表，可以根據需要從中選擇樣式表文件，如果要移至沒有鏈接到當前文檔的樣式表，可以單擊【瀏覽】按鈕瀏覽選擇該文件。單擊【確定】按鈕，當前文檔頭中的規則將移至樣式表文件中。可以按住鼠標左鍵不放將剛移入的規則拖動到適當的位置。也可以在【CSS樣式】面板中將文檔頭中的規則直接拖動到現有樣式表中的適當位置。如果要移動的規則與目標樣式表中的規則沖突，Dreamweaver會顯示“存在同名規則”對話框。如果用戶選擇移動沖突的規則，Dreamweaver會將移動的規則放在目標樣式表中緊靠沖突規則的旁邊。7.5 設置CSS屬性7.5.1

教學案例━━神州散文欣賞7.5.2

類型7.5.3

背景7.5.4區塊7.5.5方框7.5.6邊框7.5.7列表7.5.8定位7.5.9擴展7.5.10過渡7.5.1教學案例━━神州散文欣賞將素材文檔復制到站點文件夾下，然后使用CSS樣式控制網頁外觀，在瀏覽器中的顯示效果如圖7-62所示。7.5.2 類型類型屬性主要用于定義網頁中文本的字體、大小、顏色、樣式、行高及文本鏈接的修飾效果等。7.5.3 背景背景屬性主要用于設置背景顏色或背景圖像。7.5.4 區塊區塊屬性主要用于控制網頁元素的間距、對齊方式等。7.5.5 方框CSS將網頁中所有的塊元素都看作是包含在一個方框中的。7.5.6 邊框網頁元素邊框的效果是在【邊框】分類中進行設置的。7.5.7 列表列表屬性用于控制列表內的各項元素。7.5.8 定位定位屬性可以使網頁元素隨處浮動，這對于一些固定元素（如表格）來說，是一種功能的擴展，而對于一些浮動元素（如APDiv）來說，卻是有效地、用于精確控制其位置的方法。7.5.9 擴展【擴展】分類包含兩部分。【分頁】選項組中兩個屬性的作用是為打印的頁面設置分頁符。【視覺效果】選項組中兩個屬性的作用是為網頁中的元素施加特殊效果。7.5.10 過渡【過渡】主要用于創建所有可動畫的屬性。7.6 CSS濾鏡7.6.1

靜態濾鏡7.6.2

動態濾鏡7.6.3可應用CSS濾鏡的HTML標簽7.6.1靜態濾鏡靜態濾鏡主要用于使被施加對象產生各種靜態的特殊效果。使用CSS靜態濾鏡可以直接在HTML中對圖像進行特效處理，這樣會大大提高網頁的瀏覽速度。一、 Alpha濾鏡二、 Blur濾鏡三、 Chroma濾鏡四、 DropShadow濾鏡五、 FlipH和FlipV濾鏡六、 Glow濾鏡七、 Gray濾鏡八、 Invert濾鏡九、 Light濾鏡十、 Mask濾鏡十一、Shadow濾鏡十二、Wave濾鏡十三、Xray濾鏡7.6.2動態濾鏡除了靜態濾鏡之外，CSS還包含兩種動態濾鏡。所謂動態濾鏡就是人們常說的轉換濾鏡，這種濾鏡是用來處理網頁或HTML元素對象的顯示效果的。在一些動畫GIF軟件中可以制作動態演示動畫，像書翻動的效果一樣，通過一頁一頁翻頁的效果將圖像逐漸顯示。這種動態演示效果使用CSS的動態濾鏡也可以做到，而且使用該方式制

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論