Tout sur la personnalisation des liens avec CSS3

Et voici la suite des cours dédié aux nouveautés CSS3.

Apprenez à personnaliser rapidement vos liens avec les balises CSS3.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Tout sur la personnalisation des liens avec CSS3

Bonjour à tous et bienvenu sur Développement Facile.

On continue les cours dédiés à HTML 5, rappelez-vous dans les cours précédents il y a quelques semaines, ou plusieurs jours, en tout cas, une dizaine de jours, vous avez eu un premier cours sur les liens avec HTML 5. Donc j’ai décidé de rajouter une deuxième partie sur les liens avec HTML 5, pour vous permettre de continuer à les personnaliser et à utiliser vraiment une multitude de possibilités grâce à HTML 5 pour gérer vos liens.

La couleur des liens

Le but c’est de combiner les balises HTML 5 aux propriétés CSS 3. Pour définir la propriété de style, vous avez la propriété de style color, ça va vous permette de définir la couleur de vos liens, je vous ai déjà expliqué comment fonctionne cette balise donc je vais aller très vite. Pareil, vous pouvez enlever le soulignement du lien avec text-decoration : none, rappelez-vous le cours sur CSS 3 qui traitait de ces balises, text-decoration-color.

Je vais assez vite je vous montre un exemple rapide avec text-decoration on enlève le soulignement sur les liens, et on personnalise la couleur de tous les liens. Je vous invite à reprendre cet exemple de code source et à l’utiliser dans vos documents HTML.

Les infobulles sur les liens

Vous pouvez également rajouter l’attribut title avec du texte, en fait ça va ajouter une info bulle lorsque la souris passera au-dessus du lien, vous aurez une infobulle qui s’affiche. Tous les sites ne l’utilise pas, ça dépend un peu de l’ergonomie, du design graphique que le webmaster a choisie, en tout cas vous avez cet attribut title qui vous permet de rajouter une infobulle sur votre lien, pensez à l’utiliser, en sachant que vous pouvez personnaliser title avec CSS, après.

Les liens sur les blocs

Vous pouvez définir grâce à HTML 5 … la possibilité … vous avez un bloc div avec du texte, des images, vous pouvez carrément intégrer un lien sur un bloc div, tout simplement comme sur le code source, vous utilisez la balise a, entrante, fermante, et dedans vous mettez votre balise div, avec votre bloc de texte et tout ça, ça va transformer votre bloc div avec votre texte en lien HTML, très pratique aussi, vous allez sûrement l’utiliser très souvent.

Les différentes couleurs des liens

a.link ça permet de définir l’apparence d’un lien qui n’a pas encore été sélectionné, donc ce qu’on fait, ce que font les sites, ils définissent une apparence différente quand le lien est visité, cliqué, non visité, donc avec des tailles de polices différentes, avec une couleur différente, avec un texte décoration, souligner ou surligner ou barré, en principe on met un lien barré, un texte barré lorsque le lien a déjà été visité par l’internaute, je vous ai mis un exemple de code source a.link, ça va vous permettre de définir l’apparence d’un lien, qui n’a pas été encore cliqué par votre internaute.

Au contraire la balise a.visited ça va vous permettre de définir l’apparence d’un lien qui déjà été cliqué.

Vous avez également la balise a :hover ça vous permet de définir l’apparence du lien lorsque l’utilisateur avec sa souris passe au-dessus du lien, vous pouvez définir une apparence avec une telle différente, une couleur différent. Après les possibilités sont infinies donc c’est à vous de voir, je vous ai mis des exemples de code, à vous de tester.

Vous avez a :active, ça permets de définir l’apparence d’un lien au moment où il est cliqué, dès qu’il est cliqué vous pouvez définir l’apparence du lien, dès que l’utilisateur clique sur le lien, vous avez également un exemple de code source.

Compléments

A :hover, cette propriété a :hover peut être utilisée sur les liens, quand l’utilisateur avec sa souris passe sur un lien, mais également sur d’autres balises, sur d’autres éléments que les liens, comme les divs, par exemple vous faites div :hover avec background-color, vous avez votre div normale, largeur 250 pixels width, avec hauteur 150 pixels, une bordure 1 pixel rouge, voici un bloc de texte avec un paragraphe complet, la div, et dès que la souris passe au-dessus, vous pouvez rajouter div :hover background-color, la couleur de la div change, et mettre un lien ou quelque chose, à vous de vous amuser.

Votre plan d’actions !

Vraiment utilisez toutes les possibilités des liens dans vos pages Web, retournez au cours précédent, la première partie sur les liens si vous avez oublié, ou besoin de rappel sur certains trucs, vous allez retrouver un exemple de code source à télécharger directement sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source CSS3

Et voici un exemple de code commenté avec CSS3.

Et vous, comment personnalisez-vous vos liens ?

Partagez dans les commentaires votre code CSS3 pour créer des liens sympas.