Exemple: lien actif, CSS - CSS. DOCTYPE html>
Pour tout effet de rollover (c'est dire de changement d'aspect d'un lment au survol de la souris), la pseudo-classe CSS utiliser est:hover. On fait tout avec a: changements d'apparence de texte, de couleur de fond, d'apparition (ou de disparition) d'image, de zoom d'image, etc. Les liens HTML. Enfin, en thorie... Car hlas MSIE n'implmente cette proprit qu' partir de sa version 7 pour autre chose que des liens. Ce tutoriel va donc passer en revue diffrentes options les plus recherches et quelques petites choses plus "exotiques" en matire de rollover. Effets Rollover l'aide de:hover Sommaire Transformer l'apparence d'un lien Changer la couleur de fond du lien Faire apparatre une image de fond au survol du lien Changer une image de fond au survol du lien Cumuler image de fond et caractre:hover et plus si affinits Fonctionne avec: Tous les navigateurs graphiques Attributs utiliss: color text-decoration background-color background-image Transformation d'apparence d'un lien Le B. A-BA du langage CSS: le lien qui change d'apparence au survol de la souris.
Note: Pour les systèmes qui utilisent une souris avec plusieurs boutons, CSS 3 spécifie que la pseudo-classe:active ne doit s'appliquer qu'au bouton principal. Pour les souris de droitiers, c'est généralement le bouton le plus à gauche. Lien actif css block. Syntax Exemples Liens actifs CSS a:link { color: blue;} a:visited { color: purple;} a:hover { background: yellow;} a:active { color: red;} p:active { background: #eee;} HTML < p > Ce paragraphe contient un lien: < a href = " # " > Ce lien devient rouge quand vous cliquez dessus. a > Le paragraphe sera sur un fond gris quand vous cliquerez dessus ou sur le lien. p > Résultat Éléments de formulaire actifs CSS form:active { form button { background: white;} < form > < label for = " mon-button " > Un bouton: label > < button id = " mon-button " type = " button " > Cliquez sur moi ou sur mon libellé! button > form > Résultat Spécifications Compatibilité des navigateurs BCD tables only load in the browser Voir aussi
Pour définir la priorité, il suffit de placer en dernier les déclarations prioritaires. L'ordre classique (par priorité croissante) est le suivant: link < visited < hover < focus < active. Personnaliser la couleur des liens avec les CSS [Tuto] – Outils-web.fr. Il est souvent désigné par le petit truc mnémotechnique «LoVe HAte», qui en code CSS donne ceci: a:link {color: black;} a:visited {color: gray;} a:hover {color: red;} a:active {color: red;} On notera que dans cet exemple: 1) on utilise la même apparence pour les liens survolés et cliqués, et 2) on a ommis la pseudo-classe:focus, pourtant très utile! On peut factoriser notre code et rajouter la pseudo-classe manquante, en utilisant le même style pour les liens survolés, navigués au clavier ou cliqués: a:hover, a:focus, a:active {color: red;} On peut encore simplifier en se passant de la pseudo-classe:link. Voici un exemple avec un style commun à tous les liens, puis quelques pseudo-classes pour modifier l'aspect des liens suivant leur état: a { text-decoration: underline; color: #a00;} a:visited { color: #844;} a:hover, a:focus, a:active { text-decoration: none; color: white; background: #800;} Notons enfin que la présence d'un style différent pour les liens visités, une convention autrefois très bien établie (elle fait partie des styles par défaut des navigateurs, qui affichent les liens visités en mauve à la place du bleu par défaut), est de moins en moins courante sur les sites web modernes.
Pour donner des couleurs différentes aux liens selon leur état, on utiliser la feuilles de style suivante: L'ordre dans lequel ces attributs sont déclarés doit être respecté. Les couleurs sont codées ici en hexadécimal, il suffit de les adapter pour votre usage. Pour intéger ces CSS dans une page HTML, plusieurs méthodes sont disponibles: Insérer des css dans HTML Le lien concerné sera de la forme: Lien dont les couleurs du texte sont personnalisées Voici un exemple du code précédent: Lien dont les couleurs du texte sont personnalisées D'autres attributs peuvent être personnalisé comme la couleur de fond, background ou background-color. Lien actif css file. Pour ce faire, il suffit d'ajouter background-color:couleur; dans l'accolade après le point virgule. Voici un exemple: a: link {color:#FF0000;background-color:#FF7F7F;} /* Lien non visité */ a: visited {color:#FF0000;background-color:#FF7F7F;} /* Lien visité */ a: hover {color:#FFFF00;background-color:#FF00FF;} /* Lien survolé */ a: active {color:#0000FF;background-color:#FF7F7F;} /* Lien sélectionné */ Voici ce que cela donne avec l'exemple juste ci-dessus: Lien dont les couleurs de fond sont personnalisées Le problème avec cette façon de faire, c'est que tous les liens des balises seront affectés par ces CSS.
< a href = " target = "_blank" > a > L'attribut ID L'attribut id est utilisé pour créer un identifiant unique pour la partie du document afin de pouvoir y accéder. Pour rediriger un utilisateur vers une partie spécifique du texte sur la même page Web, on doit: Créez un identifiant unique pour cette partie du texte. L'identifiant peut être un mot ou une phrase (si vous utilisez une phrase, on ne doit pas mettre un espace entre les mots, on peut utiliser le soulignement en bas). Exemple. Voici la partie du texte avec l'identifiant unique "exemple", où l'utilisateur sera redirigé après avoir cliqué sur le lien. Lien actif css download. Créez un hyperlien avec un identifiant, précédé d'un #. Exemple. En cliquant sur ce lien, nous serons redirigés vers la partie du texte avec l'identifiant unique "exemple" Maintenant voyons, comment ça se passe dans le code HTML. < h2 > Exemple de lien avec l'attribut id h2 > < a id = "exemple" > Voici la partie du texte avec l'identifiant "exemple", où l'utilisateur sera redirigé après avoir cliqué sur le lien a > < a href = "#exemple" > En cliquant sur le lien, nous serons redirigés vers la partie du texte avec l'identifiant unique "exemple" a > Comment ajouter un hyperlien à l'image Pour pouvoir faire un clic sur une image, on doit ajouter une image au tag .