web-dev-qa-db-fra.com

Liens de couleurs différentes sur la même page HTML

Bonjour, j'essaie d'avoir des liens de couleurs différentes sur la même page. Je veux que certains liens soient en bleu et certains liens en noir. Je suis nouveau sur html et CSS alors merci d'avance!

-Spencer

htmlcsscolorshyperlink
10
Spencer

CSS:

A.class1 {color:red;}
A.class1:link  {text-decoration: none; color: red;}
A.class1:visited {text-decoration: none; color: red;}
A.class1:hover {text-decoration: underline; color: red;}
A.class1:active {text-decoration: none; color: red;}


A.class2 {color:blue;}
A.class2:link {text-decoration: none; color: blue;}
A.class2:visited {text-decoration: none; color: blue;}
A.class2:hover {text-decoration: underline; color: blue;}
A.class2:active {text-decoration: none; color: blue;}

HTML:

<a href="http://www.google.com" class="class1">Google</a>
<a href="http://stackoverflow.com" class="class2">Stackoverflow</a>

Demo : http://cssdesk.com/qukaq

30
sv88erik

il suffit de définir un nom de classe sur ur hyper links <a> et d'écrire le code CSS en fonction de vos besoins

par exemple

CSS

<style>
.red { 
 color : #f00; text-decoration : none;
}

.green { 
 color : #0f0; text-decoration : none;
}

.blue { 
 color : #00f; text-decoration : none;
}

</style>

Balisage :

<a href="#" class="red" > Link0 </a>
<a href="#" class="green" > Link1 </a>
<a href="#" class="blue" > Link2 </a>

Une simple démonstration

2
user372551

Vous pouvez donner aux liens différentes classes comme:

<a href="..." class="internal">Link to some internal page</a>
<a href="..." class="external">Link to some external page</a>

Et écrivez des règles CSS comme:

a.internal {
    color: ...;
}

a.external {
    color: ...;
}

a.internal signifie sélectionne tous les a- éléments avec la classe internal.

En savoir plus sur CSS.

2
Felix Kling
<a href="http://" style="color: red">RED</a>

<a href="http://" style="color: blue">RED</a>

Comme indiqué ci-dessus, il vous suffit de saisir style = "color: ###" dans le paramètre href pour le définir sur ce que vous souhaitez si vous souhaitez définir chaque lien. :)

Pour plus générale, utilisez

<a href="http://" class="red">RED</a>

<a href="http://" class="blue">RED</a>

et dans l'état de votre fichier CSS

.red {
color: red;
}

.blue {
color: blue;
}
1
Mantar

Vous avez besoin d'un moyen de spécifier quels liens doivent avoir quel style, et vous avez le choix entre plusieurs choix. Quelques exemples:

Tous les liens qui se trouvent dans l'élément avec id="Main" sont en noir:

#Main a { color: #000; }

Tous les liens contenus dans un élément avec class="Message" sont en bleu:

.Message a { color: #00f; }

Tous les liens qui ont eux-mêmes class="command" sont en noir:

a.command { color: #000; }

Tous les liens contenus dans un élément li sont en bleu foncé:

li a { color: #009; }

Vous pouvez également spécifier le style directement pour un lien spécifique.

<a href="page.html" style="color:#000;">
1
Guffa