使用样式表美化网页

项目1　使用CSS样式表美化网页

项目描述

CSS（Cascading Style Sheet，层叠样式表）是一项在网页制作中使用广泛、功能强大的技术。CSS是一系列格式设置规则，用于控制Web页内容的外观。通过使用CSS样式表，用户可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格、链接颜色及链接下画线；灵活地为元素设置各种效果的边框、背景；更加精确地控制网页中各元素的位置，从而美化页面设置。使用CSS样式表设置页面的格式，可将页面的内容与表现形式分离开，让网页的HTML代码更加简练，这样缩短了网页在浏览器中加载的时间。创建和使用CSS是学习网页制作必需掌握的知识。本项目通过CSS样式表制作淘宝网站的“宝贝类目”栏目来学习CSS样式表的创建和使用方法。

项目分析

首先分析比较网页中使用CSS效果和不使用CSS效果的区别，理解CSS样式表的作用，然后讲解如何创建CSS样式表，如何在网页中添加CSS样式表。因此，本项目可分解为以下任务：

任务1　使用CSS效果网页和原始网页进行对比分析

任务2　利用CSS样式表修饰网页

任务3　创建类样式表

任务4　在网页中添加类样式表

任务5　修改类样式表

项目目标

●了解CSS样式表在网页中的作用

●掌握CSS样式表的创建方法

●掌握CSS样式表的使用方法

任务1　使用CSS效果网页和原始网页进行对比分析

操作步骤

在F盘新建文件夹sitelx51，将“素材\单元5\5-1”文件夹下的内容拷贝到该文件夹下；打开美化的网页文件“tbaby-css.html”，预览效果如图5-1所示。

打开没有美化的网页文件“tbaby.html”，预览效果如图5-2所示。

通过对比可以看出使用CSS样式的网页中文字的大小、颜色进行了定义；商品类别的标题性文字被突出显示；栏目标签上的文字也进行了美化。

图5-1　美化的“宝贝类目”栏目效果

图5-2　没有美化的“宝贝类目”栏目效果

任务2　利用CSS样式表修饰网页

操作步骤

在打开的网页文件“tbaby.html”中，执行【窗口】→【CSS样式】命令，打开【CSS样式】面板，如图5-3所示。

在【CSS样式】面板中单击“新建CSS规则”按钮，在弹出的【新建CSS规则】对话框中，选择“标签（重新定义特定标签的外观）”单选框，在“标签”下拉列表框中选择“body”，在“定义在”选项中选择“仅对该文档”单选项，如图5-4所示。

图5-3　【CSS样式】面板

图5-4　【新建CSS规则】对话框

单击【确定】按钮，打开【body的CSS规则定义】对话框，在分类栏中选择“类型”类别，设置字体为宋体，大小为12像素，颜色为＃204EA1，如图5-5所示。

图5-5　【body的CSS规则定义】对话框

单击【确定】按钮，完成对整个页面文字字体、大小和颜色的修饰，效果如图5-6所示。

图5-6　定义body CSS规则后的网页

任务3　创建类样式表

操作步骤

在【CSS样式面板】中，单击“新建CSS规则”按钮，在弹出的【新建CSS规则】对话框中，设置“选择器类型”为“类（可应用于任何标签）”，设置标签名称为“.baby＿t1”，在“定义在”选项中，选中“仅对该文档”，如图5-7所示。

图5-7　【新建CSS规则】对话框

贴心提示

类样式表的名字必须以“.”开头，后面由字母或数字组合而成。

单击【确定】按钮，在弹出的【.baby＿t1的CSS规则定义】对话框中，在“分类”项的“类型”类别中，设置字体大小为14像素、粗体、颜色为＃FFFFFF，如图5-8所示。

图5-8　【.baby＿t1的CSS规则定义】对话框

单击【确定】按钮，即可创建“.baby＿t1”类样式表。采用同样方法创建类样式表“.baby＿t2”，设置字体大小为16像素。

同样方法，创建类样式表“.baby＿t3”，设置字体颜色为＃333333。至此，创建了3个类样式表，如图5-9所示。下面就可以在网页标题中应用创建的类样式表了。

图5-9　【CSS样式】面板中创建的类样式表

任务4　在网页中添加类样式表

操作步骤

在打开的网页文件“tbaby.html”中，选中文本“宝贝类目”，在【属性】面板的“样式”下拉列表中选择“.baby＿t1”，如图5-10所示。

图5-10　在【属性】面板中选择“.baby＿t1”类样式

用同样方法，依次选中文本“集市”“品牌商城”“二手闲置”“店铺”，在【属性】面板的“样式”栏中应用类样式表“.baby＿t3”。

用同样方法，将类样式表“.baby＿t2”应用到文本中的标题性文字部分，完成效果如图5-11所示。

图5-11　应用类样式的效果

任务5　修改类样式表

操作步骤

修改类样式表“.baby＿t2”。在【CSS样式】面板的“全部”模式中，双击样式“.baby＿t2”，在弹出的【.baby＿t2的CSS规则定义】对话框中，设置字体样式为斜体，字体颜色为＃6633FF，如图5-12所示。

图5-12　【.baby＿t2的CSS规则定义】对话框

单击【确定】按钮，所有应用“.baby＿t2”类样式的文本都随之改变，如图5-13所示。

图5-13　修改样式表后的效果

知识百科

CSS样式表功能很强大，对美化网页起着非常重要的作用。在网页中，根据应用CSS样式范围的不同，把CSS样式表分为内部样式表和外部样式表。内部样式表主要应用于当前页，只对当前页的元素起作用；外部样式表是独立于网页的.css文件，每个网页可以通过链接把.css文件应用于网页中。

1.创建CSS样式

创建CSS样式可以通过以下两种方法实现：

1）可视化操作法

打开【CSS样式】面板，单击“新建CSS规则”按钮，在弹出的【新建CSS规则】对话框中设置参数，如图5-14所示。

图5-14　【新建CSS规则】对话框

【新建CSS规则】对话框中参数含义如下：

（1）类：类样式适合于用户自定义，单独为元素设置个性化的样式。用户可以在文档的任何区域或文本中应用类样式。定义好的类样式能很方便地应用到网页元素中。

（2）标签：可以针对某一个标签来定义层叠样式表，也就是说，所定义的层叠样式表将只应用于选择的标签。例如为＜Body＞标签定义了层叠样式表，那么所有包含在＜Body＞和＜/Body＞标签范围内的内容将遵循所定义的层叠样式表。

（3）高级（ID、伪类选择器）：高级样式为特殊的组合标签定义层叠样式表，使用ID作为属性，以保证文档具有唯一可用的值。高级样式是一种特殊类型的样式，常用的有4种，分别为a：link、a：active、a：visited和a：hover。

●a：link：设定正常状态下链接文字的样式。

●a：active：设定鼠标单击时链接文字的外观。

●a：visited：设定访问过的链接文字的外观。

●a：hover：设定光标放置在链接文字之上时文字的外观。

（4）名称：定义样式的名字。

（5）定义在：“新建样式表文件”表示创建外部样式表；“仅对该文件”内部样式表，表示CSS仅对所对应的文档起作用。

单击【确定】按钮，在弹出的【CSS规则定义】对话框中设置属性，如图5-15所示。

图5-15　【CSS规则定义】对话框

【CSS规则定义】对话框中各分类的含义如下：

●类型：该类属性主要用于定义网页中文本的字体、大小、颜色、样式及文本链接的修饰线等。

●背景：定义网页中背景颜色或者设置背景图像等。

●区块：定义控制网页元素的间距、对齐方式等属性。

●方框：定义元素在网页中的布局位置。

●边框：定义元素的边框（如宽度、颜色和样式）。

●列表：定义文本列表的样式。

●定位：可以改变选定文本的标记或文本块，文本块变为新层，并使用在层参数中设置为默认标记。

●扩展：可以设置页面打印的分页效果和网页的视觉效果等。

2）直接输入代码法

在【代码】视图中直接输入代码如下：

＜style type＝″text/css″＞

.baby＿t1｛

　　font-size：14px；

　　font-weight：bold；

　　color：＃FFFFFF；

｝

……

＜/style＞

2.应用CSS样式

1）将创建好的CSS样式应用到文本中

方法1　选中文本，然后在文本【属性】面板的“样式”下拉列表框中选择所需样式表，如图5-16所示。

图5-16　文本【属性】面板

方法2　在代码视图中，直接插入样式表。常用格式如下：

＜标记名class＝″样式名称″＞……＜/标记名＞

例如：在＜span＞标记中应用″baby＿t1″类，对“宝贝类目”文本美化使用如下代码：

＜span class＝″baby＿t1″＞宝贝类目＜/span＞

2）编辑CSS样式

方法　选择【CSS样式】面板的“全部”模式，双击需要编辑的样式表名，在弹出的【规则定义】对话框中修改设置。或者在“全部”模式下，选中需要编辑的样式表名，然后单击“编辑样式”按钮，在弹出的【CSS规则定义】对话框中修改设置。修改后，所有应用该样式的文本都会随之改变。

3）删除CSS样式

方法　选择【CSS样式】面板的“全部”模式，单击需要删除的样式表名，右击鼠标，在弹出的快捷菜单中选择“删除”命令；或者单击“删除CSS规则”按钮，此时所有应用该样式的文本将恢复原样。

项目小结

通过创建和应用CSS样式表，美化了网页元素。使用CSS样式表将对元素的设置和元素本身分开，提高了网页的排版效率。通过使用CSS样式表还可以制作出个性化的网页。