Créer des liens personnalisés

Quand on créé un site internet, il peut être intéressant d'avoir des liens de plusieurs sortes.
On peut personnaliser ces liens de la manière suivante (pour faire court) :

• liens internes au site --> par exemple le menu de navigation ou un lien pour rappeler à l'internaute où se trouve une page importante,
  
• liens externes qui pointent donc vers une page extérieure --> vers d'autres sites internet,
  
• liens permettant de télécharger des fichiers directement --> pour télécharger un fichier pdf ou une image (indépendamment du clic-droit --> enregistrer sous).
  

Quand on créé un lien dans une page internet, il ressemble à cela :


L'avantage est que ce type de liens se voit très facilement sur une page et se repère très facilement.
Le problème (mais ce n'en est peut être pas un pour certains internautes) est que ces liens peuvent plus attirer l'attention que le contenu même du texte, surtout s'il y en a beaucoup.
Remarque préliminaire :
pour insérer un commentaire dans une feuille de style CSS (ou dans la partie "style" d'une page HTML), il faut insérer ce commentaire entre les balises suivantes :
/*votre commentaire*/
Un exemple est juste ci-dessous dans la partie "code".
Vous pouvez les insérer à l'endroit que vous voulez (à la fin d'une condition par exemple).
Ce type de lien correspond à peu près à ceci en CSS : (les couleurs ne sont pas tout à fait exactes mais c'est pour montrer le principe)

Code:

/*on définit le lien : la couleur et le soulignement*/
a:link {
    color: #099;
    text-decoration: underline;
}
/*quand le lien est visité, la couleur devient plus claire et reste souligné*/
a:visited {
    text-decoration: underline;
    color: #0FF;
}
/*quand on passe le pointeur de la souris, il ne se passe rien, le soulignement est toujours là*/
a:hover {
    text-decoration: underline;
}
/*le lien est actif et reste souligné quand je clique dessus sans relâcher le bouton de la souris... faut suivre*/
a:active {
    text-decoration: underline;
}

Remarque sur cette portion de code :
en créant une page internet, vous ne verrez jamais ce code...
Mézalor ?????? Pourquoi nous parle-t-il de ça????????
Heu... seulement pour dire que c'est par défaut pour toutes les versions du HTML et qu'il n'apparaît donc pas sur la page ou dans la feuille de style...
mais c'est pour que vous puissiez suivre les différentes modifications que nous allons voir juste après! Et toi-même!

Nous allons créer un lien qui va avoir les présentations suivantes :

• lien visible :
  

• lien survolé :
  

• lien visité :
  

Bon, la couleur du lien visité est à déconseiller... car trop claire et plus tellement visible...
Mézalor????????? Pourquoi a-t-il mis cette couleur?
Pour avoir une grande différence de couleur entre le lien d'origine et le lien visité!
Redevenons sérieux quelques instants mais pas trop...

Spoiler:

Le choix des différentes couleurs est important. Il faut éviter certains "pièges" comme par exemple des liens de couleur rouge et des liens visités de couleur verte sur une même page.
Ce qu'on voit souvent, c'est un lien avec une couleur en rapport avec le thème de la page et un lien visité avec une nuance plus claire de cette même couleur.
On voit également des liens en gras qui apparaissent surlignés au survol mais nous y viendront plus tard.
De cette manière, il y a une certaine continuité.
Au fait, il y aura plusieurs types de liens sur la même page non?
Des liens internes, des liens vers des sites extérieur au votre, des liens vers des documents pdf et des liens vers des images.
Pour pouvoir paramétrer les différents liens dans une même page, nous allons utiliser des classes.
Il faudra donc définir chaque réglage (link, visited, hover et active) sous la forme suivante :

Code:

.lien-interne:link{
}
.lien-interne:visited{
}
.lien-interne:hover{
}
.lien-interne:active{
}


c'est à dire avec un point au début de la définition.
De même, pensez à utiliser des noms suffisamment "parlant" pour ne pas avoir à réfléchir pour attribuer les différentes classes de liens.
Si vous oubliez le "." au début, le lien fonctionnera mais sans les effets d'affichage voulus.
On attaque maintenant!
1) définissons l'aspect du lien tel qu'il va apparaître :

Code:

.lien-interne{
    text-decoration: none;/*je supprime le sur-lignage*/
    color: #00F;/*j'attribue une couleur que j'ai choisis*/
}

Au fait, j'ai dit qu'il fallait insérer les commentaires sous la forme /*commentaires*/. On peut les insérer où l'on veut (en dehors d’une définition de propriété).

2) définissons l'aspect du lien visité :

Code:

.lien-interne:visited {
    text-decoration: none;/*je supprime de nouveau le sur-lignage sinon le lien visité est de nouveau sur-ligné*/
color: #999;/*je change la couleur*/
}

3) définissons l'aspect du lien quand on passe la souris dessus :

Code:

.lien-interne:hover {
    text-decoration: none;/*je supprime de nouveau le sur-lignage sinon le passage de la souris le refait apparaître*/
    color: #0CC;/*je change la couleur*/
    font-style: italic;/*pourquoi ne pas le mettre en italique pour faire remarquer qu'il s'agit d'un lien?
Au fait, pour changer le style, c'est "font-style"*/
    font-weight: bold;/*je mets le texte en gras*/
    font-size:18px;/*j'agrandis un peu la taille pour que le lien ressorte mieux*/
}

4) le lien est actif, en cliquant dessus, je ne veux pas de sur-lignage :

Code:

.lien-interne:active {
    text-decoration: none;/*je supprime de nouveau le sur-lignage*/
}

C'est dans cette dernière partie qu'on peut définir ce qui va se passer au moment où on clique sur le lien (avant de relâcher le bouton gauche de la souris).
Si on met "underline", le lien sera souligné au moment du clic.
Il y a néanmoins un inconvénient qui peut se révéler gênant :
au passage de la souris, la taille augmente légèrement, ce qui a pour effet de décaler légèrement le texte vers le bas.
S'il y a des liens à l'intérieur d'un texte de plusieurs lignes, cela peut gêner la lecture si on déplace la souris.
A vous de voir donc...

Nous allons créer un lien contenant une image (une flèche pour indiquer qu'on sort de votre site) et qui va avoir les réactions suivantes :

• lien visible :
  

• Lien survolé:
  

• Lien visité :
  

Avant de montrer le code, vous avez à votre disposition un grand nombre de sites proposant des images de taille réduite.
L'un d'entre eux est le suivant :
http://icones.pro/page/4?s=fleche
dans lequel je vais choisir cette icône de dimension 32px*32px :
http://icones.pro/fleche-droite-haut-image-png.html
Enregistrez la dans le dossier "images" de votre site.
Sur le même site, vous pouvez rechercher différentes icônes en tapant un mot-clef dans la barre de recherche.
Vous pouvez bien sûr créer vos propres icônes avec des logiciels de dessin.
Voici le code maintenant :
1) on définit l'aspect du lien :

Code:

/*deuxième type de lien : non souligné et qui passe en gras italique au survol avec ajout d'une image à la fin*/
/*définition du lien*/
.lien2:link {
    color: #00F;
    text-decoration: none;
    background-image: url(../images/fleche-droite-haut-icone-3760-32.png);/*l'image est définie en arrière plan*/
    background-repeat: no-repeat;/*l'image est affichée une seule fois et je ne veux pas de répétition*/
    background-position: right;    /*la position en arrière-plan est la droite car je veux l'image à droite*/
    text-align: left;/*le texte est donc aligné à gauche*/
    /*un marge pour le texte de 20px sinon l'image est sous le texte*/
    padding-right: 25px;
}


Détails supplémentaires :
background : permet de définir un arrière-plan à l'aide d'un couleur ou d'une image (ce qui est notre cas);
background-repeat : permet de dire si une image doit être répété pour couvrir la totalité de l'arrière-plan --> none car on ne veut l'image qu'une seule fois;
background-position : permet d'indiquer où notre image doit se positionner;
text-align : comme on veut l'image à droite, il vaut mieux définir l'alignement du texte à gauche... Ça paraît logique non?
l'image est à droite ET sous la partie droite du texte!

Spoiler:

c'est pour cela qu'on indique un décalage entre le texte et l'image :
padding-right : sert à définir une "marge", pour indiquer la valeur, j'ai fait des essais pour voir ce qui me convenait le mieux.

2) on définit l'aspect du lien visité :

Code:

/*lien visité : juste un changement de couleur*/
.lien2:visited {
    text-decoration: none;
    color: #333;
}

Pas la peine de remettre les paramétrages pour l'image en arrière plan vu que l'aspect général du lien est défini avant.
3) on définit l'aspect au survol de la souris :

Code:

/*passage au dessus du lien : changement de couleur, passe en gras et en italique*/
.lien2:hover {
    text-decoration: none;
    color: #0CC;
    font-style: italic;
    font-weight: bold;
}

4) au clic, je ne mets aucun réglage si ce n'est l'annulation du surlignement :

Code:

.lien2:active {
    text-decoration: none;
}