标题:
调整CSS类型的顺序改变链接翻滚
[打印本页]
作者:
admin
时间:
2008-1-19 00:15
标题:
调整CSS类型的顺序改变链接翻滚
通过指定每一键接的不同风格以建立CSS翻滚效果，这些链接包括普通的链接link (normal), 访问，翻转，以及激活。并且，你可能也知道CSS类型的顺序可以产生效果上的差别，CSS代码后顺序的风格将会取代针对于相同元素的前顺序的风格。建立翻滚效果的类型顺序显得相当重要。
1 U, |$ I* _' S$ w9 g
0 b* n' P5 f# W2 t$ [' ?
现在让我们看看如何安排链接状态的类型在不产生冲突的情况下支持正常的翻滚效果，并且如何重新安排这些类型顺序以获得不同的翻滚效果。
) f/ Y5 f& a. J7 W$ q4 Y
4 g+ w9 }- U6 C7 l/ o
/ j) R, m8 l2 }/ n3 [/ }% h
链接状态
* l9 G% ^+ s7 f% {! \1 P1 Q& I5 t
4 a! `. y$ S0 m6 l% e8 [
# m/ N. O. B3 N7 R9 {
典型的CSS翻滚效果依赖于超链接中四个状态之一的独立类型。可以建立附带CSS预先类的(超链接)类型以指定链接状态:
$ j' m& ~& |4 i$ h3 o y
" o) p' v: h9 l: L
/ T# s; Q1 l6 O% b- n
a:link——常规，非访问超链接
* V- {2 I2 h# y' M+ h) {, Q; n
' U: X" j" G' Z+ _
( _2 b. F% E. m( z1 W
a:visited——访问超链接
& k8 k2 U+ X3 G% W4 \; w
% d& p# o. v" ?( @6 f
2 `# j# j( l% Y0 k" o
a:hover——访问者操作鼠标通过时的链接
2 Q* [! {1 g P- p& r0 Q
; `3 f2 l: n! u0 S0 j8 |
* M/ R3 @5 t, m# x; l U
a:active——点击链接
/ ]4 Q2 ?) o. a
& @7 @- @" N) q' L( S
& A v0 D/ r1 J# p, @* Q5 y
为了能够使典型的CSS翻滚效果正常工作，CSS代码中的CSS类型顺序显得非常重要，无论它是一个外部类型表格或者是嵌入在HIML页标题栏中的类型规则。
+ h9 j* e9 D7 @! F( [% n d
9 x3 x, d( T) ?3 Z! y% [8 L
) k8 J1 B1 U+ V5 g9 X
a:link类型出现的时间为最早，因为它可应用于所有的链接。a:visited类型排第二，它将取代任何链接的a:link格式。(如果a:link类型紧跟着的是a:visited，a:link可能会取代a:visited类型。)其次是a:hover类型，此类型只应用于访问鼠标下的链接。最后是a:active，所以，当链接被点击时，它可以取代所有其它的类型。
) d) i7 M& h* u
6 O: L& n; S) P
7 A- N9 k0 q' |* j- D& A d2 z) |
a:link {
0 |* H2 r$ _1 o
color: #0000FF;
& ]2 V! k% H J
text-decoration: underline;
& F/ D. F G8 I
font-weight: normal;
" p0 t0 ~# N1 [
font-style: normal;
( g& b+ t# y- K) Z$ o
}
6 o2 l5 p) \# Q9 e' V7 T9 B: _: Y
a:visited {
4 S4 b/ I2 M/ ^3 M
color: #3399FF;
4 o9 M+ j- k# D$ B) }7 R7 { p
text-decoration: underline;
! u9 p# i- r2 J6 L( T
background-color: #FFFFFF;
* L3 |7 H5 |% R5 l, I; D% ]
font-weight: normal;
1 U6 n6 u7 _ ~; x
font-style: italic;
4 A; _& D/ t! W
}
: `+ `& t- G1 A
a:hover {
5 q6 Z( E" z+ M9 K5 ]
color: #0000FF;
/ J7 o1 y6 K7 w4 N3 a
text-decoration: underline;
% W. g9 i7 g( O
background-color: #FFFF00;
& H R* K/ |) o% ], ~' ^
font-weight: bold;
+ U+ U& n, ~" s% m/ P8 L( |9 Y& v
font-style: normal;
" f* x2 B3 \5 t( l7 u2 l
}
2 F, O) j+ n+ s8 y, y: c
a:active {
3 b6 I {" s* z* M4 h4 U
color: #FF0000;
- H0 u7 u8 i. G$ K1 t _
text-decoration: none;
1 t) r% g' m) R8 v/ z" r' B5 R6 Z
background-color: #CCCCCC;
. H& ^+ {6 @9 y3 I' }5 H. n- O2 S3 L* m
font-weight: bold;
5 B9 [5 k0 ] [" t% k8 x; x
font-style: normal;
3 Y/ [& E- o) h
}
7 }3 b! }" e$ T V
$ m8 s& p: F) D, A7 M* L
$ c& ]+ @6 n5 f" r
在CSS代码中的类型顺序确定了每一种类型如何取代其它的类型，即更多的类型可以应用到特定的元素。正常情况下，a:hover类型处于a:link和a:visited类型之后，所以hover状态的类型可以应用于常规和访问的链接。但是，它也并非必须遵循这一方式，你可以改变类型顺序实现不同的效果。
( P0 _, I. I$ K0 U
2 ]' q. e, I; G( r+ {0 g$ ?
( w: I4 ~: ^' {. M4 o
假设你想在非访问链接中使用翻滚效果，但不想影响到其它访问链接，你或许想到通过代码来处理这种外形上改变，然而你所要做的是重新组织CSS代码。
2 J3 ]2 U' X8 H& Y
4 {( d& A6 k$ B! K/ f2 p% x9 A
5 r! l! X* }( f: h( G* G$ C
从访问链接中移除翻滚效果，可以通过很简单地移除a:visited类型。
$ ~3 H( }# n6 M
# O. j8 b. r3 v( {& t5 F
0 `7 r+ A6 v3 |1 {
注意，a:visited类型中包含指定所有与a:hover相同属性的规则，否则，当访问者的鼠标通过一个访问链接时，没有被a:visited类型取代的任何a:hover类型属性将会继续再现。
欢迎光临 捌玖网络工作室 (http://www.89w.org/)
Powered by Discuz! 7.2
