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

小七 于 5-5 11:50 发表在  建站交流[高级] 7909
一)超链接的四种状态
搜外七街 www.SEOwhy7.com 超链接对SEO从业者是很重要的,在网页设计中也是经常使用的,这一节开始我们介绍关于超链接的CSS样式,先介绍一下网页中常用的四种状态控制方式:* C/ y) b( N6 D! R8 ?* y1 z/ |2 ?. M
1、a:link 是超级链接的初始状态5 \+ d/ U( o9 G, ~* y) w$ [' [' Z+ r. l; m) ?' _8 Q% J4 D0 ?7 b( m* h6 W* |& F2 p
2、a:hover 是把鼠标放上去时的状态: a5 H4 e. V2 W' |, k3 q" Z. f# B1 I4 F
3、a:active 是鼠标点击时的状态7 b3 W! o5 z* ~: T' \& P2 k4 Q% W6 h+ H1 f# l' h; f" O% {
4、a:visited 是访问过后的状态7 [. Z* r+ l' u1 |" i8 y, y2 q, s/ M. W2 X
根据单词的意义,其实也挺好记忆的, J) d) A5 }% E* b6 ~& w/ |# s3 t; c) ^' [
/ z1 s8 k. I/ }5 S% p5 q8 ^# ^: r
二)超链接代码- Q/ v6 U! _, [! e/ A- s6 [$ }
下面通过一个案例说明超链接的代码,这个知识点其实是其前面的教程里面已经使用了很多次;2 c' b+ _( x7 E: O( q# C1 H- Z) {+ Y; y! a) {! K; t4 M# O' r
<a href="http://www.seowhy7.com/" target="_blank" title="小七论坛首页">小七论坛</a>5 L# \: Y2 M1 S9 |# d& r8 m, C* x, [( J0 h' Q: l! k; O
这是一个最常见的超链接代码,里面没有引入任何CSS样式,常用属性解读一下:, M# w1 d3 n. Y1 c# o1 f6 J9 U+ O- n3 u4 r4 J  A7 L: E5 U8 o! \) d# Y4 T$ D- _  }
a标签定义超链接' g1 M: m. [! b* S8 ^. U$ Y5 j* R" A5 ~! Q$ s8 z' b. V' t: i/ _
href是a标签的最重要的一个属性,是指链接的目标地址/ F8 o1 \/ J# F% d4 C1 n! m: l, W  C9 b
target属性也比较常用,通常有这几种:
搜外七街 www.seowhy7.com _blank 在新窗口中打开链接 ; ~  D. a1 ^! k2 w8 S# I: v) L4 G! r: P' f1 w  {$ _: d" h: P$ s5 V$ Y, o8 s( u$ {, b" r* J5 b
_parent 在父窗口中打开链接也就是上一级5 y8 C+ S1 {3 S6 M5 j5 ^$ i1 T* V5 O, [) V. c: g0 y9 Y5 Z/ H, c) S5 e
_self 在当前窗口打开链接,也是不写属性的时候用的默认方式
搜外七街 www.seowhy7.com _top 在当前窗口打开链接,并替换当前的整个窗口(框架页)
搜外七街 www.seowhy7.com 2 V3 N3 E8 }. s5 d" m/ V( y. y6 J* B
title是链接目标说明,这点是seo经常会用到的,还有一个重要属性,rel,通常用法是rel=nofollow在seo里面也是比较重用的,告诉搜索引擎不要传递权重。
搜外七街 www.seowhy7.com 8 q% k5 R& M1 d8 e, y- t! i. N  @' g& b2 U; I3 r' _) h/ k7 L8 I( U
三)超链接常见的3种使用方法3 x2 I% ]' |; d* K; n1 i9 p0 n9 @2 H
3.1:全站统一控制法. k# Z# f6 w8 U4 C/ x  j0 K1 h  B
超链接代码:. N3 O* Y* k  Z1 T) ]3 T
<a href="http://www.seowhy7.com/">小七论坛</a>( I" b$ V- J8 p- q. m/ j; {8 a! f  ], F, q. f! @2 _
CSS样式:1 O, E4 I$ d' H! r! \8 {2 h7 e
a{color:#FF00FF;text-decoration:none;}
搜外七街 www.seowhy7.com a:hover{color:#0000FF;text-decoration:underline;}6 t& o  d) O7 d! I$ \2 U% o1 |# u- b2 Z$ p
a:active{color:#FF0000;text-decoration:underline;}4 H8 j2 A! q: o* [( ^$ O2 q
a:visited{color:#00FF00;text-decoration:underline;}; P# ?/ J" R$ b+ H+ N' }* P
上面分别定义超链接初始状态是紫色无修饰,鼠标放上去红色并添加下划线,点击时蓝色并添加下划线,点击后绿色并添加下划线。active通常用的比较少,hover和visited用的比较多。7 U5 K3 C; h2 w* Y! i  H2 p! r! C# [; G! K
7 [; l/ V$ N; L, w" k3 f2 {8 T# P. r' Q* `2 I: s/ P1 \
3.2:a标签内部控制法8 J' u" K; G  P+ S  ~$ `* i( T" L! J7 e
超链接代码:/ R* v* O8 Z+ }( L0 J" c& i7 k: @9 X9 ?$ v6 r" H& r* ^% H8 p
<a href="http://www.seowhy7.com/" class="test">小七论坛</a>$ ^5 E' N/ H/ _" {2 `9 v
CSS样式:% ]0 q5 J) }5 T" t# H$ v$ v/ @1 g0 s% {  q& E5 e% [5 R5 a, G/ K8 n9 y/ _. o7 G6 U
a.test{color:#FF00FF;text-decoration:none;}9 s8 Q/ X6 l) \: c  b% N8 I( M2 l5 O0 y6 m
a.test:hover{color:#0000FF;text-decoration:underline;}
搜外七街 www.seowhy7.com a.test:active{color:#FF0000;text-decoration:underline;}5 |- V7 d5 k5 ~8 G2 ?1 W" p% y/ g3 H* X- ^; r/ a7 w
a.test:visited{color:#00FF00;text-decoration:underline;}1 N" Q$ z6 R6 u$ t0 t, d, o% i7 c( p) [6 W0 }1 @8 Q/ O5 C- \9 S; v! H9 U$ @& A
效果与第一种是一样的/ e$ [1 G  t/ T0 {7 |2 L- p! |  a; h; F
; `( r& C' A& ~% l( u: v8 X. i
3.3:父级标签控制法# G9 }! v" a& j# ?" J/ }4 K8 W6 b: R4 f
超链接代码:+ a, O, P$ `1 c8 R  P2 G- E$ j. S! l& y& R5 o( P
<div class="test"><a href="http://www.seowhy7.com/">小七论坛</a></div>. ?$ R+ c9 u" \9 U, O2 \# P9 t' Y7 n# Q# z4 d! q( n7 y2 V' P! H# C& e, O0 c/ x; o6 c
CSS样式:" A; z5 S/ K9 n; q  _" M, s( m% l. c8 E: g: p+ W" ^7 x
与第二种一样的,只是引入方式在a标签的外部,也就是案例里面的div里面% H. B* a, B9 D/ `9 g! W+ R/ ~1 e2 J
3 o" p; f% j( l4 _/ M6 }! m0 l% i+ \$ U. _% s) T% s4 H, M: l
7 s1 a  Y  M& X: T# b- C6 v2 U( ~; P
 
个性签名玩转七街

评论 使用道具 举报

评论

帮你查询到 8 条优质的评论,通过实名认证可以查询更多优质的评论
  • fundown Lv.3 SEO池畔闲人 发表于 5-7 09:19
    看完了另外一篇,前来补补这篇的内容。感谢小七的分享。

    评论 使用道具 举报

您需要登录后才可以查看更多的评论 登录|立即注册 用QQ账号登录
搜外七街:SEO培训_SEO优化排名技术_网络营销推广建站培训
        搜外七街(SEOwhy7.COM)是互联网最大的搜索引擎优化排名技术、SEO培训、网络营销、网络推广、建站等综合bbs社区论坛站长学习培训网站,致力于培养学员。
七街事务:点击这里给我发消息
快速回复 返回顶部 返回列表