- HTML5基礎與實踐教程
- 呂云翔 劉猛猛 歐陽植昊等編著
- 2901字
- 2020-09-18 17:50:49
2.4 CSS 3入門
層疊樣式表（Cascading Style Sheets，CSS）是一門描述HTML文檔風格樣式的語言，定義了每個HTML文檔內元素應當如何被瀏覽器顯示。
2.4.1 CSS引用方法
CSS語言可以有3種引用方法，它們分別是外部樣式表（External style sheet）、內部樣式表（Internal style sheet）以及內聯樣式（Inline style）。通過這3種的其中一種或幾種都可以實現CSS語言對HTML文檔內元素的描述。
1.外部樣式表
外部樣式表將CSS和HTML分隔開來，獨立形成CSS文檔，其擴展名為“.css”，在HTML文檔的<head>標簽內添加引用即可。引用方式如下，展示效果如圖2-5所示。
圖2-5 CSS外部樣式表
文件名：CSS外部樣式表.html
文件名：mystyle.css
2.內部樣式表
不同于外部樣式表，內部樣式表的CSS樣式被添加到文檔內。這種方法通過在<head>標簽內添加<style>標簽實現。在<style>標簽內編寫CSS語句即可完成對HTML文檔元素樣式的添加。具體使用方法如下。
文件名：CSS內部樣式表.html
3.內聯樣式
內聯樣式通過將CSS語句直接寫入HTML元素的style屬性內來實現樣式的添加，同一元素內的多個CSS屬性設置以分號相分隔。具體使用方式如下。
文件名：CSS內聯樣式.html
2.4.2 CSS語法
CSS規則由兩個主要的部分構成，分別是選擇器（selector）與聲明語句（declaration）。基本形式為：selector{declaration1;declaration2;...declarationN;}。一個CSS文檔中，可以設置多個選擇器和聲明語句組合。
1.聲明
CSS聲明語句出現在選擇器之后的大括號內，以屬性和值的組合形式出現，并以分號分隔不同的鍵值對。
2.選擇器
選擇器的作用是將CSS的屬性設置語句，即聲明語句，與HTML文檔內的元素建立聯系，這個過程就是“選擇”。選擇器本身是對被選擇的HTML文檔內元素的一種表示，通常有以下幾種常用的選擇方式，分別是元素選擇、id選擇、class選擇及組合選擇。
（1）元素選擇
元素選擇器以HTML文檔元素的名稱為選擇依據。例如，使用一個p作為選擇器的話，就會選擇HTML文檔內全部的段落元素作為被修飾的對象。
（2）id選擇
id選擇器以HTML文檔內元素的id作為選擇依據。一般來說，一個HTML文檔內元素所設定的id是唯一的。使用id選擇器，可以直接地定位單個想要修飾的元素。id選擇器由“#”符號與被選id命名組合而成。假設有一個<p>標簽，例如，<p>這是一個段落，這真的是一個段落，真的啊</p>。為這個元素添加樣式的方式如下：
（3）class選擇
class選擇器以HTML文檔內元素的class屬性值作為選擇依據。一般來說，多個相同或不同的元素可以設定相同的class命名，這樣就可以實現對HTML文檔內多個元素的選擇，并組合添加樣式。class選擇器由“.”符號與被選class命名組合而成，使用方式如下：
（4）組合選擇
組合選擇的方式將多個不同的HTML元素進行選擇并添加樣式。組合選擇器由多個元素組成，不同元素之間以“，”相互分隔，具體的形式如下：
3.CSS注釋
同樣，CSS中也可以編寫一些不會被瀏覽器識別解析的語句作為注釋，來便于開發人員之間的相互溝通。CSS文檔中的注釋以“/*”作為開始，以“*/”作為結束，可以為單行，也可以為多行。
2.4.3 盒模型
在HTML文檔中，每個的HTML元素都可以被視為一個盒子。使用盒模型（box-model）來定義一個HTML元素的顯示方式，它具體包含內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）這幾部分。
1.結構
盒模型的一般結構如圖2-6所示，簡單來說就是元素外有一個盒子，即邊框。這個“盒子”與外部邊界有一個距離，是外邊距。“盒子”與內容本身有一個距離，是內邊距。
（1）內容
內容區域，代表HTML元素本身，是文本信息或圖片等顯示的地方。一般HTML元素的width和height屬性作用的是這部分區域。HTML元素的長寬屬性并不完全決定一個元素在頁面中真實的大小，最終大小還會受到內邊距、外邊距以及邊框寬度的影響。
圖2-6 盒模型
（2）內邊距
內邊距代表邊框與元素內容之間的距離，有4個方向的距離可以設置調整。
（3）邊框
邊框是圍繞在內容外的邊界，與內容之間有內邊距分隔。邊框一般可以設置粗細、形式（實線、虛線）以及顏色。
（4）外邊距
外邊距是邊框與HTML元素的實際邊界的距離，如圖2-6中最外面的虛線部分。外邊距，同內邊距一樣有4個方向的距離可以進行設置調整。
2.使用
下面這個實例演示了如何對HTML元素的盒模型相關屬性進行設置。為了展示需要，該實例中包含兩個<div>元素，并為嵌套關系，外側<div>被設置了確定的寬度、高度，以及邊框樣式。其在瀏覽器中的展示效果如圖2-7所示。
圖2-7 盒模型的使用
文件名：盒模型.html
代碼中使用了縮略方式進行了相關屬性的定義，包括border、padding、margin三個屬性。實例中的border屬性是border-width、border-style和border-color的順序集合，依次代表邊框寬度、邊框形式和邊框顏色。類似的，padding屬性是padding-top、padding-right、padding-bottom和padding-left的順序集合，依次代表上、右、下、左4個方向上的內邊距，即從上內邊距開始順時針旋轉。同理，margin屬性是margin-top、margin-right、margin-bottom和margin-left的順序集合，依次代表上、右、下、左4個方向上的外邊距。
2.4.4 CSS定位
在HTML文檔中，開發者通常還需要決定每個元素的具體位置，進而可以為網頁的瀏覽者提供更好的視覺效果。在CSS中通過設定position屬性，可以對HTML元素進行定位。經常被使用的有如下3種定位方式：相對（relative）定位、絕對（absolute）定位和浮動（float）。
1.相對定位
通過設置position屬性為relative，就可以使用相對定位。所謂相對是相對于元素本應該顯示的位置。
通過設定top或left屬性，可以設置元素相對于原來位置上方或左側的距離，如圖2-8所示。
需要注意的是，在使用相對定位方式時，無論如何移動，元素仍然占據原來的空間，所以移動后的元素可能會覆蓋其他元素的內容。請看如下實例，其在瀏覽器中的展示效果如圖2-9所示。
文件名：相對定位.html
圖2-8 相對定位圖示
2.絕對定位
通過設置position屬性為absolute，就可以使用絕對定位。絕對定位方式相對于被定位元素最近的父級元素，例如，兩個嵌套的<div>元素，當使用絕對定位時，嵌套在內部的<div>元素相對于外部的<div>元素進行定位。而外部的<div>元素則會相對于<body>元素進行定位。絕對定位在瀏覽器中的展示效果如圖2-10所示。
圖2-9 相對定位
圖2-10 絕對定位
文件名：絕對定位.html
3.浮動
通過設定HTML元素的float屬性，就可以讓元素具有類似于浮動的特性。不同于元素被一一順序排列向下展開，HTML元素之間可以根據自身長寬大小向上浮動。請看如下實例，其在瀏覽器中的展示效果如圖2-11所示。
文件名：浮動.html
如果將代碼中的float屬性去掉的話，實例中的小方塊將由上而下顯示，即每個元素占據一行空間，如圖2-12所示。
圖2-11 浮動
圖2-12 沒有浮動
2.4.5 CSS 3簡介
CSS 3是最新的CSS標準，它是之前CSS技術的升級版本，并對之前的CSS兼容。CSS 3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜，所以把它分解為一些小的模塊，更多新的模塊也被加入進來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效和多欄布局等。CSS 3也是十分重要的Web技術，有興趣的讀者可以自行搜索學習CSS 3相關知識。
2.4.6 CSS入門實例
在2.4.4節中提及的浮動，可以讓HTML元素呈現浮動特性。但浮動屬性有時也會造成一定的煩擾，尤其當一個HTML文檔中還有其他非浮動元素同時存在時。因為浮動定位的方式使浮動元素脫離了文檔流，浮動元素本身并不占據空間，這就導致非浮動元素照常顯示，仿佛不存在這些浮動元素一樣，如圖2-13所示。
為了避免這種情況，需要為非浮動元素添加clear屬性，來消除浮動元素帶來的影響。clear屬性的值可以設置為left、right或both，即左側、右側或兩側不允許存在浮動元素，這樣HTML文檔中的非浮動元素就不會受到浮動元素的影響，進而造成顯示問題。具體情況參考如下實例，其在瀏覽器中的展示效果如圖2-14所示，讀者可對比不加clear屬性的效果。
圖2-13 沒有clear屬性
圖2-14 clear屬性
文件名：clear屬性.html
