超链接在网页中用的是最多的了，有几个属性我们或许没有注意到，我们一般都用其中的2个左右，这里总结一下，先看一个网页
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style type="text/css">
6 a:link{text-decoration: none; color:blue; font-size: 18px; font-family: 微软雅黑;}
7 a:visited{ color:green;}
8 a:hover{text-decoration: underline; color:#09f; font-size: 19px;}
9 a:active{text-decoration: blink; color: yellow;}
10 </style>
11 </head>
12 <body>
13 <a href="">这是超链接</a>
14 </body>
15 </html>
简单的说一下，头部样式标签里面a:link是正常的未被访问过的链接样式，a:active是鼠标点下去到放开这个时间段内链接的样式，a:hover是鼠标移到超链接上超链接样式，a:visitend是已经点击过的超链接样式，常见的是百度搜索结果中我们点击一条条目之后，会发现默认颜色变了，这个是根据浏览器历史记录和缓存来的，清除痕迹之后又复原了
内部的样式：text-decoration是代表文字修饰效果，none是无下划线，underline是有下划线，blink是鼠标按下之后显示效果，overline是加上划线，line-through是加删除线，
当然还可以加颜色，字体，字号这样基本的属性，就不详细说了
有几点需要注意：a:active效果默认浏览器是鼠标点下瞬间是红色，这个我们自己可以按照上面设置；a:visited的样式和a:link相同并且除颜色外无法修改，一般我们只改变颜色；一旦a:link属性设置之后，其他属性默认都继承a:link中的效果，不用指定也可以，如果单独指出，按指出的显示；最后要知道CSS遵循先后顺序，后来的会覆盖前面的，根据这个规律布局的时候一定要考虑代码顺序，按照上面代码的属性顺序可以完整的表现超链接的四种样式，不要颠倒
根据以上几点，我们最常用的就是a默认属性和鼠标放上效果，这样代码可以精简成下面的：
a{text-decoration: none; color:blue; font-size: 18px; font-family: 微软雅黑;}
a:hover{color:#09f;font-size: 19px;}
这样的话只有默认与鼠标经过两种情况，并可以实现鼠标经过字体变大的效果，这种用的比较多
以上是超链接基本属性的设置，在这个基础上我们可以结合前端脚本实现更多的效果和功能
时间： 2024-08-29 06:33:47