1.3 HTML5與CSS樣式表

1.在HTML5網頁中插入CSS樣式表

CSS（層疊樣式表）主要用來展現HTML網頁的文檔樣式，在制作HTML5網頁時CSS樣式表是不可缺少的。樣式表一般分為兩種：外部樣式表和內部樣式表。

外部樣式表的插入在HTML5文檔的頭部標記＜head＞中實現，代碼如下：

＜head＞

＜link href="css/main.css"rel="stylesheet"type="text/css"/＞

＜/head＞

其中href="css/main.css"顯示鏈接的樣式表名稱和目錄地址，外部樣式表保存格式為“*.css”。

下例所示為樣式表實例：

.h1{

width：60%；/*元素的寬度設定*/

margin：0 auto；/*元素的外邊距設定，左右居中*/

}

內部樣式表可寫在HTML文檔內部，代碼如下：

＜head＞

＜style type="text/css"＞

.center{

text-align：center；

}

.main{

margin-top：30px；

}

＜/head＞

2.HTML5與樣式表實例介紹

在實際的網頁中制作種，通常使用HTML5標記描述網頁結構，使用CSS樣式表修飾網頁元素。

【例1-11】制作HTML5與CSS3相結合的網頁。該例主要描述的是網頁中＜body＞部分的＜header＞區域，使用＜nav＞標記制作正文的導航區域，用＜ul＞標記制作無序列表，＜li＞標記制作具體的列表項，并通過href="style.css"語句引用外部樣式表來修飾該頁面。該例在瀏覽器中顯示如圖1-14所示。

圖1-14 HTML5與CSS3的結合

代碼如下：

CSS代碼如下：

在該例的CSS樣式表中使用background-color：pink語句設置頁面背景顏色；border-color：red語句設置邊框顏色；display：block語句設置nav標記為區塊；list-style：none語句清除列表標識。該網頁在瀏覽器中顯示如圖1-14所示。

想一想：怎樣為文字部分加上背景？

想一想：怎樣設置文字的字體大小？

練一練

制作網頁頁面導航部分。

代碼如下：

CSS3部分代碼如下：

效果如圖1-15所示。

圖1-15 導航區域