2009-08-28 6 views
1

Vous trouverez ci-dessous la css d'un lien de texte dans 4 états différents: lien, visité, stationnaire et actif. J'ai besoin de faire ce code CSS pour chaque type de classe de liaison que j'ai, certaines classes ne changent même pas l'apparence. (lien, visité, hover, actif) Si seulement l'apparence d'un lien de texte change pour le vol stationnaire et le lien, aurais-je seulement besoin des classes ci-dessous pour ces 2 ou devrais-je toujours utiliser les 4?CSS de base pour une question de lien de texte?

<style> 
a.comment_mod:link { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 
a.comment_mod:visited { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 
a.comment_mod:hover { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #000000; 
    border-bottom:1px dotted #000000; 
} 
a.comment_mod:active { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 
</style> 

Répondre

3

S'il n'y a pas de changement entre :link et :visited, vous pouvez omettre ce dernier. Idem si :hover et :active sont identiques. Ensuite, il suffit de définir les parties commeon dans :link et passer outre ce que vous voulez changé en :hover:

a.comment_mod:link { 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 

a.comment_mod:hover { 
    color: #000000; 
    border-bottom:1px dotted #000000; 
} 

Edit: si vous voulez :active (ce qui est le style lorsque le bouton de la souris est sur le lien) pour ressembler :link, puis spécifiez les deux ensemble. Si vous ne le spécifiez pas, cela ressemblera à :hover. Donc, pour correspondre à votre style original:

a.comment_mod:link, 
a.comment_mod:active 
{ 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    color: #003366; 
    text-decoration: none; 
} 

a.comment_mod:hover { 
    color: #000000; 
    border-bottom:1px dotted #000000; 
} 
1

Vous pouvez utiliser:

a.comment_mod { 
    ... defaults ... 
} 

a.comment_mod:active { 
    ... only things that change ... 
} 
2

Tout d'abord, si tous vos états partagent un style commun, vous pouvez simplement déclarer que le style comme si

a.comment_mod 
{ 
font-family: arial; 
font-size: 14px; 
font-weight: bold; 
text-decoration: none; 
} 

Si un état change le style de la norme, alors vous le déclarez.

a.comment_mod:hover 
{ 
color: #000; 
border-bottom:1px dotted #000000; 
} 

Vous pouvez déclarer le style de plusieurs éléments en même temps, si elles partagent les styles:

a.comment_mod:hover, a.other_mod:hover 
{ 
color: #000; 
}