Biblioscript.com : Appliquer des styles aux liens

	<SCRIPT LANGUAGE=JavaScript> var nbre = Math.round(Math.random()10000); var chaine="<a href=http://www3.click-fr.com/clickj.cgi?a=1019-405664&b=" + nbre + " target=clickfr><img border=0 height=60 width=468 SRC=http://www3.click-fr.com/printj.cgi?a=1019-405664&b=" + nbre +" alt=\" Visitez notre Sponsor ! *\"></a>"; document.write(chaine); </SCRIPT> Membre de ClickFR, Reseau francophone Paie-Par-Click


- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]

	CSS 2

Le texte

Appliquer des styles aux liens

Compatibilite du script... a partir de :

Connexion ratee

	Fonction

		Par défaut, les liens sont bleus et soulignés. Pour correspondre à votre site, il peut être préférable de changer la couleur, voir de faire disparaître le soulignement, quitte à ce qu'il réapparaisse lors du passage de la souris (si-si, c'est possible sur Internet Explorer ;-). Ce qu'il faut bien comprendre c'est que pour un navigateur, un texte sur lequel on place un lien est toujours un texte mais dans un état particulier, d'où la nécessité de prévoir le cas spécifiquement dans votre feuille de style.

	Principe

Les attributs de style appliqué au texte 'normal' (sans lien) s'applique sur les liens sauf sur deux caractéristiques : la couleur et le soulignement. Les autres attributs (police, taille... sont conservés par défaut).

Pour gérer les liens avec les feuilles de style, deux possibilités :

les liens 'en général',
les liens au sein d'un style défini.

Attention : dans CSS, il y a 'C', c'est à dire 'Cascading', ce qui implique une notion d'héritage qui en l'espèce est appliquée différemment par Netscape et Internet Explorer. N'ayant pour ma part pas réussi à trouver des règles absolues, je ne vous en dirais pas plus, si ce n'est qu'il faut tester, et tester encore :-(.

Les liens disposent en feuilles de style de 5 'pseudo-classes' propres :

:link : s'applique pour un lien non-visité,
:visited : s'applique pour un lien visité,
:focus : s'applique pour un lien sélectionné (via le clavier par exemple),
:hover : s'applique pour un lien survolé par la souris,
:active : s'applique pour un lien en cours de 'clic'.

Note : Ces pseudo-classes ne sont pas reconnues par Netscape.

	La méthode

dans la partie <head>

<style>

/* 1er cas, application 'générale' */
A { color: #FF0000; text-decoration: none; }
A:link { color: #00CC00; text-decoration: none; }
A:visited { color: #FF9999; text-decoration: none; }
A:focus { background-color: #0000FF; text-decoration: none; }
A:hover { text-decoration: underline; }
A:active { color: #00FFFF; text-decoration: none; }

/* 2nd cas, application 'locale' */
.special { font-family: helvetica; font-size: 30px; }
.special A { color: #000000; text-decoration: underline; }

/* 3ème cas, application sur un lien déterminé */
A.unique { color: #FF0000; text-decoration: none; }
A.unique:hover { text-decoration: underline; }
</style>

dans la partie <body>

1er cas, application 'générale'
Ceci est un texte tout à fait normal avec un simple <a href="#">lien</a>

2nd cas, application 'locale'
<span class="special">Ceci est un texte spécial avec un simple <a href="#">lien</a></span>

3ème cas, application sur un lien déterminé
Ici, le <a href="#">lien</a> n'est pas touché.
Par contre, ici, le <a href="#" class="unique">lien</a> est touché.

	Démonstration


	Voir la démonstration

	Téléchargement

Cette feuille de style est disponible en deux versions :

le style est appliqué localement, dans la balise style de la page),

le style dans une feuille de style externe, commune à toutes les pages (fichier .css).

L'intérêt d'une feuille de style est de pouvoir partager le style entre plusieurs liens de la page.

Style local :

txt_liens.zip
2 Ko

Feuille de style :

txt_liens2.zip
3 Ko


	Recherche


	DHTML


	HTML 4


	Javascript 1.3


	Références


	Aide générale


	statistiques