什么是超链
在用HTML5编写一些网页时,我们通常会用到给一些文本或者是图片添加链接来实现跳转,使得整个小小页面却也内容丰富多彩。
例如:
<a href=“url” target=“_blank”>文本或<img src=“图片路径”/></a>
url:链接路径,比如百度,那么这里的url=www.baidu.com
target这个属性意思是打开方式,_self也是默认的在当前窗口打开,_blank在新窗口打开,framename是在指定名称的框架中打开。
使用伪类来设置样式
这里有个伪类的概念需要认识,伪类就是被选中的元素处于某种状态的时候。
超链的四种状态:
link | 初始状态,从未被访问过 |
---|---|
visited | 已经访问过 |
hover | 鼠标悬停于超链的上方 |
active | 鼠标左键点击下去,但是未释放的时候 |
实例:
<style>
a:link {color: red}
a:visited {color:green}
a:hover {color: yellow}
a:active {color: black}
</style>
<a href="http://www.baidu.com">百度</a>
初始状态
鼠标悬停时的状态
鼠标左键点击时状态
已经访问过状态
超链–下划线
超链在默认状态下,有下划线的,为了美观去掉下划线可以使用 text-decoration: none 文本修饰的样式来解决
<style>
a.no_underline {text-decoration: none}
</style>
<a href="http://www.baidu.com">百度</a>
<br>
<a class="no_underline" href="http://www.baidu.com">百度</a>
运行效果: