4.2　容器的作用

在介紹更多的CSS樣式之前，我們先來看兩個特別重要的標簽，它們在HTML中出現的頻率非常高。

容器，顧名思義，就是用來存放物品的。在網頁中，容器就是用來設置網頁內容的，但不同之處是它自身是不可見的。就是說，如果容器中不放任何內容，你將根本意識不到它的存在。但是，它又是存在的，它的存在是以一種塊標記的格式出現，也就是它規定了它內部的標簽內容與前后元素之間有一定的間距。

本節介紹兩個特殊的容器標簽：＜div＞和＜span＞。它們的特殊性在于自身沒有繼承任何樣式，但可以使用CSS定義任何需要的樣式。＜div＞標簽表示內容塊，前后都有換行；＜span＞標簽在一行內使用，是段落的一部分。

4.2.1　兩個最常用的容器：div和span

圖4.5給出了div和span這兩個容器的實例。span和div標簽都包裹著文字，根據文字的寬度和高度不同，可以想象成這些文字被一個隱形的盒子包圍著（圖4.5中隱形的含義用虛線表示。），這個盒子就是容器。這兩個標簽與其他HTML標簽不同，它們沒有實際的意義，只是為了配合CSS為其內部的內容定義顯示的規則。

特別說明

span和div作為容器元素還是有一定區別的。

其中，span用于控制在一行內元素的樣式，span容器的寬度會隨包裹內容的長度而改變，內容少，則寬度小，內容多，則寬度大。

div則用于控制一塊區域的整體樣式。div容器的寬度默認是占滿整個頁面的寬度（由顯示器的寬度決定），無論每一個段落文字是否占滿一行，div的寬度都是一樣的，就是撐滿整個頁面。另外，它內部的文字默認是靠左對齊的。

思考時間

基于以上特性，如果你想要給一大段文字中的個別詞語添加特殊樣式，你覺得應該用哪一個容器呢？如果你想給整個段落設置一個樣式，又應該用哪一個呢？想好了之后，來看一個具體案例。

4.2.2　容器的實際應用：添加樣式

任務描述：對雷雨的介紹文字添加樣式，效果如圖4.6所示。從現在開始，我們使用HBuilderX，這么做是為了減輕你記憶標簽和屬性的負擔。

操作步驟：打開HBuiderX，新建一個HTML頁面，取名為css_container.html，輸入主體代碼如圖4.7所示，用Chrome瀏覽器打開并查看效果。

代碼解析：通過在標簽對的開始標簽內部添加了控制樣式的屬性，關鍵字是style，其中定義了以下樣式：

（1）margin：0 auto；讓元素本身自動水平居中，這里它應用在最外層的div容器，使用這個樣式時，一定要同時指定div寬度屬性；否則，div默認只會撐滿整個屏幕，看不出居中的效果。注意，這個樣式很有用，一般就是默認放在最外層元素（比如body，div）樣式定義中，這樣可以讓整個頁面具有一定的寬度，且居中顯示；

（2）width：960px/80％；元素寬度的取值可以是px，也可以是百分數，它表示整個寬度的百分比；

（3）color：#808080；設置所有的文字顏色為灰色；

（4）text-align：center；讓標簽內部的元素水平居中對齊。注意：text-align常用于控制塊級元素包裹的內部元素居中對齊，它對內聯元素或行內元素（img、a、b、span等）本身無效，因此如果你想讓某個內聯元素居中顯示，一定要將text-align屬性放在一個塊級元素中，比如p、div等。具體見如下代碼：

（5）font-size：24px;設置文字的大小為24像素；

（6）background-color：red/#3388ff；設置元素的背景顏色，可以采用顏色的英文單詞，或者采用6位十六進制數，這個值不需要記憶，可以通過屏幕拾色器工具來自動獲取任意網頁中現有的顏色，建議自行下載小工具。

容器樣式的使用秘籍

如果雷雨的第一行用＜p＞標簽，那么背景顏色將適用于整個第一行，而不是任務中的“雷雨”兩個字。＜h1＞標簽的效果同＜p＞一樣，也是獨立一行。因此，＜span＞的特殊意義就在于可以只對其包裹的內容給出特殊樣式。另外，＜div＞在Web開發中也經常使用，它們主要用于做大段落元素的整體頁面布局，更重要的用法是，利用嵌套的div精準地定義樣式和控制布局。

4.2.3　CSS樣式的基本用法

上一節的案例中提到了一種定義樣式的基本用法，即在HTML標簽中，樣式的定義方法為：

其中，樣式聲明的屬性關鍵字是style，跟在其后的是樣式聲明，其位置是在開始標簽的內部。每一個聲明由一個屬性和一個值組成（屬性：值）。如果有多個樣式聲明，則采用“；”隔開。最終的效果就是為該標簽代表的元素聲明了CSS樣式。這只是一種聲明樣式的方式，不是很推薦，后面還會介紹更多的常用方式。

不算錯誤的bug

由于CSS沒有特別嚴謹的語法規范，所以無論最后一個屬性樣式聲明是否以；結尾都不會報錯。瀏覽器會在解析樣式時表現出一定的大度性，直接忽略這種小錯誤。但是，為了謹慎起見，參考其他嚴謹的編程語言，比如JavaScript，對于元素內聲明的樣式屬性，最后一個不要加“;”。