英协网在我们平时浏览网页时，看到页面上的超链接样式并不是我们在DW中做出的那种蓝色带下划下的样式，而是样式很丰富、很美观的效果。今天我就来给大家介绍一下如何接样式多起来的技术。
同一页面上存在多个样式的超链接
1、这项技术需要用到CSS，所以首先我们在站点中创建一个CSS样式表文件。第一步，点击新建文件，选择CSS，点击创建按钮。
创建CSS文档
这时会打开一个未命名的文档，使用Ctrl+S保存该文档，命名为style.css文件（PS：一般站点中会创建一个名为CSS的文件夹，专门存放CSS文档）：
保存CSS文件，命名为style.css
在该文档中输入如下代码（代码涵义将在本文的“原理解释”部分说明）：
2、新建一个html页面，命名为hyperText.html。为了查看超链接效果，我们在页面中制作三段文本，并将其分别做成空链接。空链接就是在“链接”栏里填入一个#，这样文本虽然没有可以链接的内容，但是可呈现出超链接的外观，比较便于设计。
分别选择三段文本，在链接中填入#
3、在当前的页面hyperText.html，导入刚才做好的CSS文档。方法为：第一步，点击“文件”菜单中的“附加样式表”
第二步，在弹出的对话框中选择“浏览”，点选站点中的style.css文档，确定。
确定后，文件/URL框中显示的是CSS文档的路径。
确定后，打开hyperText.html的代码视图，如下图中红框圈住的即为导入CSS文件的代码，它们是写在<head>区域中的。
4、回到hyperText.html的设计视图，选择“第一种样式的超链接”文本，在属性栏的“类”中选择a1；选择“第二种样式的超链接”文本，在属性栏的“类”中选择a2。
设置好后，预览，即为下图所效果：
5、原理解释：我们知道在CSS中可以针对HTML标记设置样式，也可创建类来自定义样式。今天我们所说的让超链接样式多起来的技术就是利用类。类的命名规则为：.类名{属性名：属性值}（一定要在类名前加点哦）。这里我使用.a1命名类，是想让自己知道这是跟链接有关的类，因为我们知道链接的HTML标记是<a>。在类名的后面可以加状态名，用：连接。链接有四个状态，分别是link、visited、active、hover，分别指链接的挂起状态、访问过状态、激活状态和鼠标经过状态。这个案例中我只设置了link和hover状态，大家可以自己尝试其他两个状态。
6、设置超链接样式常用的属性有：文本大小、加粗/倾斜、颜色、有无下划线等。这个案例中我用了很简单的几个属性，解释如下。
后续的文章中，我将给大家分享一些常用的CSS属性及其说明与用法，敬请期待！今天的分享就是这些内容，希望对大家的学习有所帮助，感谢关注！如何有我没有说清楚的地方，请大家留言，我会尽量解释清楚^_^
