Depuis l'invention du langage de balisage hypertexte, HTML, les concepts de mise en page et de mise en page des documents Web ont radicalement changé. Avec la prise en charge presque complète des navigateurs populaires pour les normes de feuilles de style en cascade CSS et CSS2, il est devenu possible d'influencer presque tous les aspects de la présentation visuelle d'un document. Par exemple, vous pouvez colorer l'arrière-plan d'un lien, le remplir d'une image et le modifier également en fonction des actions de l'utilisateur.
Nécessaire
- - la possibilité d'éditer le texte du document ou le texte des feuilles de style du document;
- - un éditeur de texte qui permet d'enregistrer le document dans l'encodage d'origine.
Instructions
Étape 1
Faites en sorte que l'arrière-plan du lien soit uniformément rempli d'une couleur aléatoire en ajoutant des informations de style en ligne à l'élément A. Ajoutez du style aux attributs de l'élément A correspondant au lien dont vous souhaitez modifier l'arrière-plan. Dans le contenu de l'attribut style, placez la propriété CSS background-color avec la valeur donnée, qui est l'identifiant correct de la couleur d'arrière-plan. Par exemple, cela pourrait ressembler à ceci:
texte du lien
Étape 2
Définissez l'arrière-plan du lien dans une feuille de style externe ou incorporée dans votre document. Dans la feuille de style appropriée, ajoutez un ensemble de règles adressées par un sélecteur d'un niveau de spécificité acceptable. Dans l'ensemble de règles, entrez la propriété background-color de la même manière qu'à l'étape précédente. Sélectionnez la spécificité du sélecteur en fonction des règles de cascade CSS2 et du périmètre souhaité. Ainsi, si vous devez définir la couleur d'un seul lien, il est judicieux d'utiliser un sélecteur d'ID, s'il existe plusieurs de ces liens, il est préférable d'utiliser un sélecteur d'attribut basé sur la valeur de la classe.
Par exemple, pour définir un fond vert pour un lien spécifique dans un document, vous pouvez ajouter un ensemble de règles à la feuille de style:
Un # ID_GREEN
{
couleur d'arrière-plan: # 00FF00;
}
Vous devez également définir l'attribut ID de l'élément A correspondant au lien souhaité sur ID_GREEN:
texte du lien
Étape 3
Remplissez le fond du lien avec une image. Suivez les méthodes décrites dans les étapes un et deux, mais au lieu de la propriété CSS background-color, utilisez background-image. Par exemple:
texte du lien
Si nécessaire, ajoutez une propriété background-repeat au jeu de règles CSS pour définir les options de duplication horizontale et verticale de l'image d'arrière-plan.
Étape 4
Modifiez l'arrière-plan du lien lorsque vous le survolez ou lorsque le focus se déplace. Ajoutez des ensembles de règles à une feuille de style de document externe ou incorporée qui définissent l'arrière-plan d'un lien ou d'un groupe de liens dans différents états. Utilisez des sélecteurs d'ID et d'attributs en conjonction avec les pseudo-classes dynamiques: hover,: active et: focus. Par exemple, pour que l'arrière-plan d'un lien avec une valeur d'attribut ID ID_DYNAMIC_BACKGROUND soit rouge à l'état inactif et vert à l'état sous le curseur de la souris, les ensembles de règles suivants doivent être ajoutés à la feuille de style:
Un # ID_DYNAMIC_BACKGROUND
{
couleur d'arrière-plan: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: survolez
{
couleur d'arrière-plan: # 00FF00;
}
Vous pouvez faire de même pour créer un arrière-plan avec une image changeant dynamiquement.
