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 导航区域