- HTML5+ CSS3+JavaScript 網頁設計實戰（視頻教學版）
- 常新峰
- 1215字
- 2019-12-12 17:09:07
2.6 引用CSS樣式文件
本節介紹引用CSS（層疊樣式表）文件的用法，看一看如何在HTML網頁頭部定義CSS樣式文件。
2.6.1 概述
CSS是英文名稱Cascading Style Sheets的縮寫，一般中文翻譯為“層疊樣式表”，是一種用來表現HTML網頁樣式的軟件技術。
CSS最初是作為W3C的一項標準推出的，從CSS 1.0版本開始，期間經過CSS 2和CSS 2.1版本的不斷完善，目前的CSS3版本已經被廣泛認可并使用。事實上，CSS已經成為一種事實上的Web設計標準。
2.6.2 功能用法
使用CSS語言設計網頁的優點是能夠真正做到將網頁內容與表現形式進行分離，這樣設計人員的分工更為細化，工作效率也會明顯提高。
具體來說，CSS語言能夠支持幾乎全部字體風格與字號大小，能夠對網頁中的對象位置進行像素級別的精確定位，能夠對網頁對象的樣式進行動態編輯，能夠進行簡單的人機交互設計，是目前基于網頁內容展示最優秀的表現類設計語言。
在HTML網頁上使用CSS語言的方法基本有三種形式，分別為外鏈式、嵌入式和內聯式，下面具體介紹。
1．外鏈式（Linking）
所謂外鏈式就是將外部CSS樣式表文件鏈接到HTML網頁中。一般如果頁面需要很多樣式的時候，外鏈式CSS是最合理的選擇，使用外鏈式CSS可以通過修改一個CSS文件來改變整個頁面或網站的樣式風格。外鏈式CSS的基本使用方法如下：
2．嵌入式（Embedding）
所謂嵌入式就是在網頁上創建嵌入的樣式表。一般如果單個頁面需要定制樣式時，嵌入式CSS是很好的方法。設計人員可以在HTML網頁頭部通過<style>標簽定義嵌入式CSS。嵌入式CSS的基本使用方法如下：
3．內聯式（Inline）
所謂內聯式就是在單個頁面元素中加入樣式表。只有當頁面中的個別元素需要單獨的樣式時，才推薦使用內聯式CSS。內聯式CSS的基本使用方法如下：
另外，目前應用CSS樣式表最為推薦的方式是DIV+CSS布局方式。原因很容易理解，頁面結構越簡單、通過修改CSS改變頁面風格也就越容易。對于大型站點來說，倘若頁面中使用的標簽元素種類繁多、結構復雜，那維護起來CSS簡直就是一場災難，可能需要手動修改很多頁面。而如果整個站點都使用DIV+CSS進行布局，可能僅僅需要修改CSS樣式表中的一段代碼就可以完成對整個站點頁面風格的修改。
2.6.3 簡單示例
下面看一段使用CSS樣式表創建HTML網頁的簡單示例代碼（參見源代碼ch02/ch02-html-css.html文件）。
【代碼2-7】
【代碼解析】
第04行代碼通過link標簽元素引用了一個外部CSS樣式文件（文件名稱style.css），該CSS樣式文件的代碼見下面的【代碼2-8】。
第07～08行代碼定義了<body>標簽元素的樣式，但此處沒有定義具體的樣式代碼，留在【代碼2-8】中進行了定義。
第10～14行代碼定義了<h1>標簽元素的樣式，具體包括了外邊距、內邊距和字體的樣式。
第16～19行代碼定義了<div>標簽元素的樣式，具體包括了外邊距和內邊距的樣式。
第21～25行代碼定義了<h3>標簽元素的樣式，具體包括了外邊距、內邊距和字體的樣式。
第27～31行代碼定義了<p>標簽元素的樣式，具體包括了外邊距、內邊距和字體的樣式。
下面是【代碼2-8】中定義的CSS樣式（參見源代碼目錄ch02/css/style.css文件）。
【代碼2-8】
【代碼2-8】的CSS代碼中，主要定義了<body>標簽元素的外邊距數值，其實也就是頁面邊距的尺寸大小。
運行測試網頁，效果如圖2.12所示。
圖2.12 CSS樣式表