任务1-6　超链接样式的设置与引用

超链接作用是实现用户页面导航功能，它有如下四种状态：

A：link：初始状态；

A：visited：已访问状态；

A：active：正访问状态；

A：hover：鼠标移入状态。

超链接样式设置主要有以下几个方面属性：

字体名：font-family；

字号：font-size；

字体加粗：font-weight；

下画线：text-decoration；

前景色：color；

背景色：background-color；

背景图像：background-image。

属性设置的一组示例如下：

font-size： 10pt；

color： #fff；

font-family： "ms shell dlg"，tahoma；

text-decoration： none；

font-weight： bold；

background-color： #000；

background-image：url（../images/hi.gif）。

需求：

按表1-1要求进行超链接样式的设计。

分析：

为了简化样式表的书写，提高可重用性，将前三个共同属性放在样式A中定义，其他样式只需定义出各自特有的样式即可。

实现：

定义超链接样式。样式定义见清单1-16。

清单1-16　超链接不同状态样式定义

说明

CSS样式引用有三种不同级别：

第一级别：在标记内设置style属性。只对本标记有效。

说明

第二级别：在＜head＞＜style＞…＜/style＞＜/head＞中定义。对本网页文件有效。

第三级别：在CSS文件中定义。可让多个网页文件共同使用。

CSS级别越高在统一界面风格方面和提高重用性方面就越好。

第一级别，做法虽然灵活、但不能做到界面风格的统一，在前面已多次使用；第二级别也较简单，只能做到页面内风格的统一。第三级别，以引用CSS文件的形式可以在最大程度上实现界面风格统一和代码可重用性。

VS 2013提供了可视化样式设计方式和智能提示编辑方式实现CSS样式的设置。选择标签，在图1-17所示的“属性”窗口的style属性栏右侧单击“ ”按钮后弹出图1-18所示的“样式生成器”窗口，利用它方便设计样式，并在下方预览到设计效果。