|
|
 |
 |
 |
|
 |
|
 |
|
|
|
   |
|
 Définir
le style de tous vos liens hypertextes
Définir
des classes de liens
Exemples |
|
|
1. Définir
le style de tous vos liens hypertextes
En utilisant un style, vous avez la possibilité
de modifier l'apect de vos liens hypertextes.
Pour cela, il faut donner un style à
la balise <a></a>
Remarque : Par défaut, la
couleur attribuée par le navigateur
aux liens hypertextes est bleue.
Après avoir cliqué sur un
lien, celle-ci passe au violet !
Ces couleurs sont paramétrables dans
les options de votre navigateur.
Entre la balise <head></head>,
vous définissez un style pour la
balise <a>
:
<STYLE TYPE="text/css">
<!--
A {
color:#000000;
text-decoration:none;
}
A:hover {
color:#FF0000;
text-decoration:underline;
}
-->
</STYLE>
Dans cet exemple, tous les liens hypertextes seront de couleur
noire (000000) et sans soulignement.
Lors du passage de la souris sur ces liens, ils prendront la
couleur rouge (FF0000) et seront soulignés.
Exemple :
Cliquez sur ce lien
|
 |
2. Définir
des classes de liens
Reprenons le code précédent et rajoutons quelques
lignes :
<STYLE TYPE="text/css">
<!--
A {
color:#000000;
text-decoration:none;
}
A:hover {
color:#FF0000;
text-decoration:underline;
}
A.paragraphe {
color:#0000FF;
font-weight: bold;
text-decoration:none;
}
A:hover.paragraphe {
color:#Maroon;
font-weight: bold;
text-decoration:underline;
}
-->
</STYLE>
Nous venons de definir une nouvelle classe de lien, la classe
"paragraphe".
Cela signifie que tous les liens de votre pages garderont le
style que nous avons definit dans la premiere partie, sauf les
liens de la classe "paragraphe".
Pour definir un lien comme faisant partie d'une classe, il vous
suffit de rajouter quelques caractères dans votre code
HTML :
<a href="monfichier.html"
CLASS="paragraphe">Le
lien</a>
Et voila, ce lien sera bleu, en gras et non souligné
et passera au marron, gras et souligné au passage de
la souris !
Exemple :
Voici mon lien de classe paragraphe |
| |
|
3. Exemples
| Code |
Résultats |
<STYLE
TYPE="text/css">
<!--
a.moteur
{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
font-size: 12px;
color : #FF6000
}
a.moteur:hover
{
text-decoration : underline;
color : #FF6000;
background-color: #FFCB4A
}
-->
</STYLE>
|
Survol
du lien |
<STYLE
TYPE="text/css">
<!--
a.intpage
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color:#990000;
font-weight: normal
}
a.intpage:hover
{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
color:#990000;
font-weight: normal;
text-decoration:underline
}
-->
</STYLE> |
Survol
du lien |
<STYLE
TYPE="text/css">
<!--
a.titre
{
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
color: #990000;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: 18px
}
a.titre:hover
{
text-decoration: underline;
background-color: #FFCB4A;
line-height : 18px
}
-->
</STYLE> |
Survol
du lien |
<STYLE
TYPE="text/css">
<!--
a.sommaire
{
font-family: Arial, Verdana, Helvetica;
font-size: 12px;
color: #990000;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: 18px
}
a.sommaire:hover
{
text-decoration: underline overline
}
-->
</STYLE> |
Survol
du lien |
|
<STYLE TYPE="text/css">
<!--
a.menu
{color:#455A87;
text-decoration:none;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold
}
a:hover.menu
{color:#CC0000;
text-decoration:underline;
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
background-color : #FFCB4A
}
-->
</STYLE>
|
|
|
| |
|
|
|
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
