Recherche pour :
Panier 0
  • Qui sommes-nous
    • Portfolio
    • Develop4fun.com
  • Tutoriel
    • Guide C#
    • Tuto HTML 5
    • Créer des jeux HTML5, le guide
  • Articles
    • Jeux Vidéo
      • Curiosité
      • Programmation
    • Programmation
      • HTML & CSS
      • C++
      • Java
      • Javascript
      • PHP
      • Python
      • Smarty
      • SQL
      • Swift
    • Web
      • CMS
  • Espace Membre
  • Formation en ligne

Se connecter

Mot de passe perdu ?

Vous n'êtes pas encore membre? inscrivez-vous
  • phone +33766664691
  • email contact@develop4fun.com
  • Tech & Gadget
  • Unity
  • Forums
  • Contact
0
Develop4fun
  • Qui sommes-nous
    • Portfolio
    • Develop4fun.com
  • Tutoriel
    • Guide C#
    • Tuto HTML 5
    • Créer des jeux HTML5, le guide
  • Articles
    • Jeux Vidéo
      • Curiosité
      • Programmation
    • Programmation
      • HTML & CSS
      • C++
      • Java
      • Javascript
      • PHP
      • Python
      • Smarty
      • SQL
      • Swift
    • Web
      • CMS
  • Espace Membre
  • Formation en ligne
perm_identity Commencer

Blog

Develop4fun > Programmation > HTML & CSS > La personnalisation des liens avec CSS3

La personnalisation des liens avec CSS3

access_time18 mai 2020
perm_identity Publié par Antonella "Lythande"
folder_open HTML & CSS, Programmation, Tuto CSS 3, Tutoriel
CSS3
(Dernière mise à jour: 6 avril 2020)

Nous avons déjà vu dans la première partie de ce tutoriel comment traiter les liens au sein d’une page HTML. Cette partie en est la suite, mais cette fois avec l’utilisation de CSS3. Ainsi le style de votre site reste cohérent. Le style que vous programmerez en CSS pourra ainsi s’appliquer à toutes vos balises a, vues dans la partie HTML.

La couleur des liens

Le but 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. Cette propriété vous permet de définir la couleur de vos liens.

Vous pouvez enlever le soulignement du lien avec text-decoration: none.

Dans l’exemple ci-dessous, le soulignement sur les liens est supprimé et la couleur de tous les liens est modifiée :

a:link {
  text-decoration: none;
  color: #084def;
  font-weight: bold;
}

Les infobulles sur les liens

Vous pouvez également utiliser l’attribut title avec du texte.

Cela permet d’ajouter une infobulle lorsque la souris passera au-dessus du lien. Tous les sites ne l’utilisent pas, cela dépend un peu de l’ergonomie, du design graphique que le webmaster a choisi.

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.

En l’utilisant, vous ajoutez à votre site un caractère accessible, car le contenu de title est lu pour les personnes mal-voyantes.

Les liens sur les blocs

Grâce à HTML5, si vous avez un bloc div avec du texte, des images, vous pouvez carrément intégrer un lien sur ce bloc div. Tout simplement dans le code source, vous utilisez la balise a et dedans vous mettez votre balise div. Avec votre bloc de texte, cela 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 permet de définir l’apparence d’un lien qui n’a pas encore été sélectionné. Vous pouvez définir une apparence différente quand le lien est visité, cliqué, non visité. Soit avec des tailles de polices différentes, soit avec une couleur différente, soit avec un text-decoration, souligner ou surligner ou barré.

En principe, les sites affichent un lien barré, un texte barré lorsque le lien a déjà été visité par l’internaute. Vous avez appris plus haut l’exemple a:link pour un lien qui n’a pas encore été parcouru par l’internaute.

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

/* lien déjà cliqué par l'internaute*/
a:visited { color:#FF8000; }

Vous avez également la balise a :hover qui 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 taille différente, une couleur différente…

Exemple :

/* passage de la souris au dessus du lien */
a:hover{
   text-decoration: underline;
   color: #def125;
}

Les possibilités sont infinies !

Vous avez a:active qui permet de définir l’apparence d’un lien au moment où il est cliqué. Vous pouvez définir l’apparence du lien dès que l’utilisateur clique sur le lien :

/* état quand l'utilisateur clique le lien */
a:active { color: #29088A; }

Compléments

La propriété a:hover peut être utilisée sur les liens quand l’utilisateur passe sur un lien avec sa souris et aussi sur d’autres balises, sur d’autres éléments que les liens, comme les div par exemple. Vous faites div:hover avec background-color et dès que la souris passe au-dessus de la div, la couleur de la div change.

Exemple :

/* passage de la souris au dessus de la div */
div: hover { background-color: #DF01A5; }

Conclusion

CSS est un langage qui vous permet de personnaliser votre site dans les moindres détails, les liens hypertextes y compris.

Il est vraiment très simple dès lors de modifier l’apparence des liens pour qu’ils s’intègrent parfaitement à votre ergonomie.


Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/categorie/formation/

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA

0 0 voter
Évaluation de l'article
Vues : 397
Mots clés: CSSCSS3style d'une baliseTuto CSS 3
À propos de Antonella "Lythande"

Lythande, la conceptrice du site : son histoire commence grâce à Marion Bradley Zimmer et Game Republic. Experte du secteur des jeux vidéo, elle a écrit pour les magazines les plus importants de l’Italie, tels que Game Republic, PS Mania et Pokémon Mania. @LythandeLister

Plus d'articles de Antonella "Lythande"
Précédent Les div CSS3 n’auront plus de secret pour vous !
Suivant Les balises CSS3 supplémentaires
S’abonner
Notifier de
guest
guest

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

0 Commentaires
Inline Feedbacks
Voir tous les commentaires
Articles récents
  • L’histoire des jeux vidéo : les années 2000
  • [Programmation] 2020: les évolutions techniques et technologiques
  • Dell XPS 17 : luxe et sobriété pour un PC en grand format
  • Surface Laptop GO : un produit surface à tarif serré
  • Radeon RX 6800 XT enfin au niveau de Nvidia
Le blog d’Antonella
  • Une liste d’outils, de ressources et d’applications gratuites pour développeurs

    Aujourd’hui on fait chauffer les marques-pages car je te propose une liste d’outils, de […]

  • Le travail à distance, la productivité et la pression

    Aujourd’hui on va parler de travail à distance, de productivité et de pression. Je vois les […]

  • Space Invaders avec Love2D

    Space Invaders est surement l’un des jeux qu’on code dès le début de notre parcours de […]

Commentaires récents
  • Adr dans 2. C# vs VB .NET
  • What is champ de type time en in HTML – Advertisments dans Trois techniques pour les nouveaux formulaires HTML 5
  • Etienne dans Quel avenir pour un développeur web face à l’intelligence artificielle?
  • Antonella "Lythande" dans C’est quoi un éditeur de texte ?
  • Stas dans C’est quoi un éditeur de texte ?
Game Universe
  • La mise à jour de l’inventaire de Fallout 76

    La mise à jour de l’inventaire de Fallout 76 sera publiée régulièrement le 26 janvier 2021, […]

  • Une démo console de Little Nightmares 2 sur Xbox One, PlayStation 4 et Nintendo Switch

    Bandai Namco Entertainment et Tarsier Studios ont publié aujourd’hui une démo console […]

  • Cyberpunk 2077: le nombre de joueurs sur PC a chuté de près de 80%

    Pour le lancement de Cyberpunk 2077, il y avait plus d’un million de joueurs simultanés sur […]

Comportementaliste animalier
    Étiquettes
    Aligner du texte ASCII balise HTML balises HTML classe css Concepts avancés Cours HTML 5 CSS CSS3 CSS 3 Développeur Développeur Web feuilles de styles feuilles de styles en cascades fichier CSS hexadécimal Histoire des Jeux Vidéo HTML 5 HTMLOptionElement id css IDE introduction Intégrateur JavaScript la taille du texte liste HTML Microsoft navigateur programmation orientée objet Responsive Responsive Web Design RGB smartphones Structure du langage style d'une balise texte html Tuto CSS 3 Tuto HTML 5 Unity Visual Studio Web-designer windows 10 WordPress WordPress 5 XHTML
    • Develop4fun IT
    • Création de sites web
    • Game Universe
    • Comportementaliste Animalier Grenoble
    • Luxury Costa Rica
    • Dourceurs d’aquarelle
    Sécurité du site Web
    Game Universe
    • La mise à jour de l’inventaire de Fallout 76

      La mise à jour de l’inventaire de Fallout 76 sera publiée régulièrement le 26 janvier 2021, […]

    • Une démo console de Little Nightmares 2 sur Xbox One, PlayStation 4 et Nintendo Switch

      Bandai Namco Entertainment et Tarsier Studios ont publié aujourd’hui une démo console […]

    • Cyberpunk 2077: le nombre de joueurs sur PC a chuté de près de 80%

      Pour le lancement de Cyberpunk 2077, il y avait plus d’un million de joueurs simultanés sur […]

    © 2021 Develop4fun. Tous droits réservés
    keyboard_arrow_up wpDiscuz
    0
    0
    Nous aimerions avoir votre avis, veuillez laisser un commentaire.x
    ()
    x
    | Reply