f
  • A 首页
  • F 发现
  • G 手机版
  • J 更多
  • 注册
  • QQ登录

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

知道啦!

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

知道啦!
  • 社区
  • 门户
  • 咨询 ›
  • 学习 ›
  • 站长那点事儿
  • 征文
  • 互联网资讯
  • 投稿
  • 帮助中心
  • 发现
  • 七街号

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

小七 发表于 2017-05-05 11:50 复制链接
阅读数:8281
一)超链接的四种状态
超链接对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里面


返回列表
8 条评论
您需要登录后才可以评论 登录 | 注册
新乡振动筛优化 2 发表于 2017-05-05 15:38 | 阅读全部
这教程写的不错,顶一下
yaozhong6625 3 发表于 2017-05-05 22:30 | 阅读全部
楼主说得很好,支持了
pertepan 4 发表于 2017-05-05 22:34 | 阅读全部
不错不错,支持一下
fundown 5 发表于 2017-05-07 09:19 | 阅读全部
看完了另外一篇,前来补补这篇的内容。感谢小七的分享。
新乡振动筛优化 6 发表于 2017-05-08 07:57 | 阅读全部
写的不错,不错,顶一下!
爱推站-竹溪路 7 发表于 2017-05-08 10:21 | 阅读全部
加上动态配图就更好不过了
xingcuide2 8 发表于 2017-05-09 15:28 | 阅读全部
jsh花花 9 发表于 2017-08-30 15:50 | 阅读全部
支持一下~~~
相关推荐