用CSS定义多个链接式样

最新推荐文章于 2021-09-24 08:20:38 发布

m1maomao

最新推荐文章于 2021-09-24 08:20:38 发布

阅读量276

点赞数 1

分类专栏： Html/Css 文章标签： CSS 浏览器 HTML

本文链接：https://blog.csdn.net/m1maomao/article/details/83367986

版权

Html/Css 专栏收录该内容

65 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>CSS制作多种链接样式实例</title>
<style type="text/css">

</style>

</head>
<body>
第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>
第二种样式 <a class="red" href="http://www.dayanmei.com">个人日志</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.dayanmei.com">个人日志</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.dayanmei.com">个人日志</a></div><br>
</body>
</html>

当然,你完全可以将CSS代码写入一个CSS文件,这样做的好处,不仅是你的网页HTML代码简洁了,而且你会发现速度也跟着提升了,因为浏览器会缓存你的CSS文件,更重要的是你要改变样式时只需要改变CSS样式表文件就可以了

这样写
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}

现在,你只需要将CSS包含进你的HTML文件就可以了
index.htm

<html>
<head>
<title>CSS制作多种链接样式实例</title>
<link rel="stylesheet" type="text/css" href="default.css">

</head>
<body>
第一种样式(默认的) <a href="http://www.dayanmei.com">个人日志</a> <br>
第二种样式 <a class="red" href="http://www.dayanmei.com">个人日志</a><br>
另外一种实现链接样式的方法 <a class="ameth" href="http://www.dayanmei.com">个人日志</a><br>
<div class="other">DIV容器实现链接样式的方法 <a class="other" href="http://www.dayanmei.com">个人日志</a></div><br>
</body>
</html>

m1maomao

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用CSS定义多个链接式样

CSS制作多种链接样式实例第一种样式(默认的) 个人日志第二种样式个人日志另外一种实现链接样式的方法个人日志 DIV容器实现链接样式的方法个人日志当然,你完全可以将CSS代码写入一个CSS文件,这样做的好处,不仅是你的网页HTML代码简洁了,而且你会发现速度也跟着提升了,因为浏览器会缓存你的CSS...
复制链接

扫一扫

专栏目录