Easy-Micro

LANGAGE Langage CSS
Liens hypertexte
Exemple de réalisation CSS

CSS Définition de feuilles de style de pseudo-éléments sur des liens hypertext

  • L'objectif est de réaliser une définition de feuilles de style de pseudo-éléments sur des liens hypertexte représentés en HTML par la balise "a".

    Des pseudo-éléments sont des éléments d'un fichier HTML qui ne se laissent pas décrire comme par exemple un "lien qui n'a pas encore été visité".

    Pour définir de tels pseudo-éléments il y a une syntaxe déterminée dans le langage des feuilles de style CSS (Cascading Style Sheet). Vous allez réaliser un style sur tous vos liens hypertext avec le code ci-dessous.

    Source à copier/coller dans votre code html entre les balises <head> et </head> :

    CSS
    <style type="text/css">
    /* www.easy-micro.org */

    a {
    color:#000088 ;
    text-decoration: none;
    }

    a:link {
    color:#000088 ;
    text-decoration: none;
    }

    a:hover {
    color:#ff0000 ;
    text-decoration: underline;
    text-transform: none;
    }
    </style>

    Voici l'effet

    Chaque lien hyper texte de votre page sera par défaut en bleu marine (color:#000088) et sans décoration (text-decoration: none). Au survol de la souris il deviendra rouge (color:#ff0000) et se transformera en souligné (text-decoration: underline).

CSS Explication

  • La balise a correspond au lien hyper text dans son état normal (a = ancre).
  • a:hover correspond au lien survolé (hover) par la souris.
  • text-decoration correspond à la décoration du texte et peu prendre les valeurs : none (sans), underline (souligné), overline (surligné) et line-through (barré).
  • text-transform correspond à la transformation du texte et peu prendre les valeurs : none (sans), uppercase (majuscule), lowercase (minuscule) et capitalize (force en majuscule le premier caractère).
  • font-weight correspond à l'épaisseur de police (font) et peut prendre les valeurs normal (sans), bold (gras) ou lighter (fin).
  • background-color : correspond à la couleur de fond (ex jaune: #ffff00). La couleur est ici exprimé en hexadécimale: les deux premier chiffres pour le Rouge, puis le Vert, puis le Bleu (de 00 à 99 puis de AA à FF pour chacun). Soit #RRVVBB [Plus d'infos...].

CSS Pour aller plus loin


< Page précédente LANGAGE CSS Page suivante >