CSS链接样式制作方法示例

发布时间:2020-02-01编辑:脚本学堂
本文介绍下,制作css链接样式的方法,学习下css多种链接样式的制作与引用方法,有需要的朋友参考下。

本节内容:
CSS链接样式

例子:
<html>
<head>
<title>CSS制作多种链接样式实例</title>
<style type="text/css">
<!--
a:link { color: #CC3399; text-decoration: none}
a:visited { color: #FF3399; text-decoration: none}
a:hover { color: #800080; text-decoration: underline}
a:active { color: #800080; text-decoration: underline}
a.red:link { color: #FF0000; text-decoration: none}
a.red:visited { color: #FF0000; text-decoration: none}
a.red:hover { color: #606060; text-decoration: underline}
a.red:active { color: #606060; text-decoration: underline}
a.ameth:link { color: #400040; text-decoration: none}
a.ameth:visited { color: #400040; text-decoration: none}
a.ameth:hover { color: #FF3399; text-decoration: underline}
a.ameth:active { color: #FF3399; text-decoration: underline}
div.other a:link { color: #004000; text-decoration: none}
div.other a:visited { color: #004000; text-decoration: none}
div.other a:hover { color: #008000; text-decoration: underline}
div.other a:active { color: #008000; text-decoration: underline}
-->
</style>
<!-- 链接样式表 -->
</head>
<body>
第一种样式(默认的) <a href="http://www.jb200.com">脚本编程</a> <br>
第二种样式 <a class="red" href="http://www.jb200.com">脚本编程</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.jb200.com">脚本编程</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.jb200.com">脚本编程</a></div><br>
</body>
</html>
 
当然,也完全可以将CSS代码写入一个CSS文件,好处在于代码简洁、效率提升,因为浏览器会缓存CSS文件。
另外,需要改变样式时只需要改变css样式表文件即可。

1)、css样式文件 default.css
 

复制代码 代码示例:
a:link { color: #CC3399; text-decoration: none}
a:visited { color: #FF3399; text-decoration: none}
a:hover { color: #800080; text-decoration: underline}
a:active { color: #800080; text-decoration: underline}
a.red:link { color: #FF0000; text-decoration: none}
a.red:visited { color: #FF0000; text-decoration: none}
a.red:hover { color: #606060; text-decoration: underline}
a.red:active { color: #606060; text-decoration: underline}
a.ameth:link { color: #400040; text-decoration: none}
a.ameth:visited { color: #400040; text-decoration: none}
a.ameth:hover { color: #FF3399; text-decoration: underline}
a.ameth:active { color: #FF3399; text-decoration: underline}
div.other a:link { color: #004000; text-decoration: none}
div.other a:visited { color: #004000; text-decoration: none}
div.other a:hover { color: #008000; text-decoration: underline}
div.other a:active { color: #008000; text-decoration: underline}

在页面index.htm中引入外部css文件:
 

复制代码 代码示例:
<html>
<head>
<title>CSS制作多种链接样式实例</title>
<link rel="stylesheet" type="text/css" href="default.css">
<!-- 链接样式表 -->
</head>
<body>
第一种样式(默认的) <a href="http://www.jb200.com">脚本编程</a> <br>
第二种样式 <a class="red" href="http://www.jb200.com">脚本编程</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.jb200.com">脚本编程</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.jb200.com">脚本编程</a></div><br>
</body>
</html>