CSS样式中超链接的4种状态控制方式和3种使用方法

小七 发表于:2017-05-05 11:50 复制链接 ?提问题 +写文章
阅读数:8099
一)超链接的四种状态
超链接对SEO从业者是很重要的,在网页设计中也是经常使用的,这一节开始我们介绍关于超链接的CSS样式,先介绍一下网页中常用的四种状态控制方式:
1、a:link 是超级链接的初始状态
2、a:hover 是把鼠标放上去时的状态
3、a:active 是鼠标点击时的状态
4、a:visited 是访问过后的状态
根据单词的意义,其实也挺好记忆的

二)超链接代码
下面通过一个案例说明超链接的代码,这个知识点其实是其前面的教程里面已经使用了很多次;
<a href="http://www.seowhy7.com/" target="_blank" title="七街首页">七街</a>
这是一个最常见的超链接代码,里面没有引入任何CSS样式,常用属性解读一下:
a标签定义超链接
href是a标签的最重要的一个属性,是指链接的目标地址
target属性也比较常用,通常有这几种:
_blank 在新窗口中打开链接
_parent 在父窗口中打开链接也就是上一级
_self 在当前窗口打开链接,也是不写属性的时候用的默认方式
_top 在当前窗口打开链接,并替换当前的整个窗口(框架页)

title是链接目标说明,这点是seo经常会用到的,还有一个重要属性,rel,通常用法是rel=nofollow在seo里面也是比较重用的,告诉搜索引擎不要传递权重。

三)超链接常见的3种使用方法
3.1:全站统一控制法
超链接代码:
<a href="http://www.seowhy7.com/">七街</a>
CSS样式:
a{color:#FF00FF;text-decoration:none;}
a:hover{color:#0000FF;text-decoration:underline;}
a:active{color:#FF0000;text-decoration:underline;}
a:visited{color:#00FF00;text-decoration:underline;}
上面分别定义超链接初始状态是紫色无修饰,鼠标放上去红色并添加下划线,点击时蓝色并添加下划线,点击后绿色并添加下划线。active通常用的比较少,hover和visited用的比较多。

3.2:a标签内部控制法
超链接代码:
<a href="http://www.seowhy7.com/" class="test">七街</a>
CSS样式:
a.test{color:#FF00FF;text-decoration:none;}
a.test:hover{color:#0000FF;text-decoration:underline;}
a.test:active{color:#FF0000;text-decoration:underline;}
a.test:visited{color:#00FF00;text-decoration:underline;}
效果与第一种是一样的

3.3:父级标签控制法
超链接代码:
<div class="test"><a href="http://www.seowhy7.com/">七街</a></div>
CSS样式:
与第二种一样的,只是引入方式在a标签的外部,也就是案例里面的div里面


返回列表 使用道具 举报
条评论
您需要登录后才可以回帖 登录 | 注册
高级
这教程写的不错,顶一下
使用道具 举报
回复
yaozhong6625 yaozhong6625 发表于 2017-05-05 22:30 | 阅读全部
楼主说得很好,支持了
使用道具 举报
回复
pertepan pertepan 发表于 2017-05-05 22:34 | 阅读全部
不错不错,支持一下
使用道具 举报
回复
fundown fundown 发表于 2017-05-07 09:19 | 阅读全部
看完了另外一篇,前来补补这篇的内容。感谢小七的分享。
使用道具 举报
回复
写的不错,不错,顶一下!
使用道具 举报
回复
加上动态配图就更好不过了
使用道具 举报
回复
xingcuide2 xingcuide2 发表于 2017-05-09 15:28 | 阅读全部
使用道具 举报
回复
jsh花花 jsh花花 发表于 2017-08-30 15:50 | 阅读全部
支持一下~~~
使用道具 举报
回复
相关推荐

您的等级不够,“高级及以上会员” 开启

您的等级不够,“vip会员”开启