CSS Des liens

❮ Précédent Chapitre suivant ❯

Avec CSS, les liens peuvent être décorés de différentes manières.

Texte Lien Lien texte Lien Bouton Bouton de lien

Coiffure Liens

Les liens peuvent être décorés avec une propriété CSS (par exemple la color , font-family , background , etc.).

Exemple

a {
color: hotpink;
}

Essayez - le vous - même »

En outre, des liens peuvent être décorés différemment selon quel état ils sont.

Les quatre liens états sont:

a:link -, un lien unvisited normale
a:visited - un lien que l'utilisateur a visité
a:hover - un lien lorsque l'utilisateur passe la souris sur elle
a:active - un lien pour le moment il est cliqué

Exemple

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Essayez - le vous - même »

Lors du réglage du style pour plusieurs états de liaison, il y a quelques règles d'ordre:

a:hover doit venir après a:link et a:visited
a:active doit venir après a:hover

Décoration texte

Le text-decoration propriété est principalement utilisé pour enlever soulignement à partir de liens:

Exemple

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

Essayez - le vous - même »

Couleur de fond

Le background-color propriété peut être utilisée pour spécifier une couleur d'arrière - plan pour les liens:

Exemple

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

Essayez - le vous - même »

Avancé - Lien Boutons

Cet exemple montre un exemple plus avancé où nous combinons plusieurs propriétés CSS à afficher des liens comme des boîtes / boutons:

Exemple

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

Essayez - le vous - même »