Médiaforma

All posts tagged color

Dans cette rubrique, je vais vous montrer comment modifier les caractéristiques d’un lien hypertexte lorsqu’il a été visité. Pour cela, nous allons utiliser la pseudo-classe visited. Voici le code utilisé :

Ce document contient deux liens hypertextes. Le premier de classe vnv (c’est l’abréviation de visité, non visité), et le deuxième sans classe.

Pour modifier les caractéristiques d’un lien lorsqu’il est visité, il suffit de définir la pseudo-classe-visited. Ici, les caractères seront de couleur verte et l’arrière-plan légèrement gris. Voici le résultat :

Attention :
Les propriétés utilisables dans la pseudo-classe visited sont très limitées. Par exemple, il n’est pas possible de modifier la propriété text-decoration pour, par exemple, supprimer le soulignement une fois que le lien est cliqué !
Vous devrez vous limiter aux propriétés color, background-color, border-color et outline-color. Et là encore, la prise en compte de ces propriétés dépend du navigateur utilisé !


Pour définir une couleur, il est également possible de préciser ses composantes rouge, verte et bleue. Chacune de ces composantes est comprise entre 0 et 255. Plus le nombre est élevé, plus la quantité de rouge, vert ou bleu est importante. Par convention, ces trois valeurs sont codées en hexadécimal. Elles sont donc comprises entre #00 (l’équivalent du nombre décimal 0) et #FF (l’équivalent du nombre décimal 255). En accolant les trois composantes, on obtient un nombre compris entre #000000 et #FFFFFF. La valeur #000000 correspond à la couleur noire (pas de rouge, pas de vert, pas de bleu). La valeur #FFFFFF correspond à la couleur blanche (rouge, vert et bleu à 100%).

Pour trouver facilement la couleur de vos rêves, le plus simple consiste à utiliser un nuancier. Par exemple, celui proposé sur la page http://www.code-couleur.com/. Déplacez le curseur vertical pour choisir une couleur dominante puis le sélecteur pour ajuster les quantités de blanc et de noir. Vous obtenez immédiatement la couleur hexadécimale correspondante :

Il ne vous reste plus qu’à insérer ce code dans l’attribut color d’une balise <font> :

<font color=”#CB87CD” size=”6″>Ce texte a pour couleur #CB87CD</font>

Voici le résultat :


La couleur des caractères est définie en insérant un attribut color dans la balise font. Voici la syntaxe à utiliser :

<font color=”couleur”>texte concerné</font>

couleur représente la couleur à utiliser.

La couleur peut être spécifiée par son nom ou par un code hexadécimal. Les seize couleurs de base sont les suivantes : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Pour bien visualiser ces couleurs, nous allons les affecter tour à tour à seize lignes de texte :

Le document est sauvegardé avec le raccourci clavier Ctrl+S et affiché dans Internet Explorer avec le raccourci clavier Alt+Ctrl+Maj+I. Voici le résultat :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

La balise <blockquote></blockquote> permet de différentier un bloc de texte du texte courant. Il suffit d’entourer le bloc de texte concerné par les balises <blockquote> et </blockquote> pour le mettre en retrait :

Dans cet exemple, le document est constitué de deux paragraphes identiques. Le premier occupe toute la largeur de la fenêtre. Le deuxième, placé entre les balises <blockquote> et </blockquote> subit un retrait à droite et à gauche :

Si cette mise en forme n’est pas suffisante, vous pouvez la compléter par quelques instructions CSS.

Pour cela, il suffit de redéfinir le style blockquote. Vous pourriez par exemple :

  • augmenter les marges à gauche et à droite du texte en agissant sur les propriétés margin-left et margin-right (lignes 7 et 8) ;
  • ajouter une indentation sur la première ligne du bloc de texte (ligne 9) ;
  • modifier la couleur du texte (ligne 10) ;
  • afficher le texte en italique (ligne 11) ;
  • ajouter une bordure autour du texte (lignes 12 à 14). Ici, la bordure est solide, épaisse de 1 pixel et de couleur bleu ciel ;
  • ajouter une marge intérieure entre le texte et la bordure (ligne 15).

Voici le résultat dans Internet Explorer :


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à modifier le contenu d’une zone de texte en utilisant la fonction JavaScript getElementById(). Dans cette rubrique, je vais vous apprendre à modifier une propriété CSS avec cette même instruction.

Dans cet exemple, nous allons modifier la couleur d’arrière-plan d’une balise <div>. Pour cela, l’utilisateur entrera une couleur codée en hexadécimal codée ainsi :

#rrvvbb

rr représente la quantité de rouge (entre 0 et FF), vv la quantité de vert (entre 0 et FF) et bb la quantité de bleu (entre 0 et FF) de la couleur à utiliser.

Une fois la couleur entrée, il lui suffira de cliquer sur un bouton de commande pour modifier la couleur de la balise <div>.

Examinons le code HTML.

  • Le corps du document est défini entre les lignes 22 et 31.
  • La ligne 23 définit une balise <div> d’identifiant div1 ;
  • La ligne 24 affiche un texte pour inviter l’utilisateur à saisir une couleur codée en hexadécimal.
  • Les lignes 25 à 28 mettent en place un formulaire pour héberger la zone de texte et le bouton de commande ;
  • La ligne 26 définit la zone de texte d’identifiant saisie ;
  • Enfin, la ligne 27 définit le bouton de commande. Le texte affiché dans le bouton est “Modifier la couleur”. Lorsque le bouton est cliqué, la fonction JavaScript couleur() est exécutée.

L’allure de la balise <div> est définie avec du code CSS, entre les lignes 4 et 11 :

  • Ligne 7, la couleur de l’arrière-plan par défaut est définie à #000000. A l’ouverture de la page, la balise <div> aura donc un arrière-plan noir ;
  • Les dimensions de la balise <div> sont définies lignes 8 et 9. La largeur et la hauteur sont fixées à 200 pixels.

Pour que le code soit complet, il ne reste plus qu’à définir la fonction JavaScript couleur(),entre les lignes 12 et 19 :

  • La ligne 15 crée l’objet objet1 et l’initialise avec l’élément saisie, c’est-à-dire avec la zone de texte dans laquelle est saisi le code de couleur hexadécimal.
  • La ligne 16 crée l’objet objet2 et l’initialise avec l’élément div1, c’est-à-dire avec la balise <div> qui a été mise en place dans le début du document.
  • Quant à la ligne 17, elle affecte à la propriété backgroundColor de la balise <div> le code de couleur hexadécimal qui se trouve dans la zone de texte. A droite du signe “=“, objet1.value récupère le contenu de la zone de texte. Remarquez la syntaxe utilisée à gauche du signe “=” : objet2.style.backgroundColor.
    • objet2 correspond à l’objet lié à la balise <div> div1 ;
    • style indique que l’on s’intéresse à une propriété CSS ;
    • backgroundColor correspond à la propriété CSS background-color.

Remarque
La syntaxe de la ligne 17 n’a rien d’extraordinaire. Cependant, notez que l’accès à la propriété CSS background-color se fait via le mot clé backgroundColor. Le tiret a disparu entre les mots background et color et la première lettre du mot color est en majuscules. Une grande partie de la difficulté à accéder aux propriétés CSS en JavaScript viendra de la syntaxe à utiliser. Cependant, ne vous en faites pas trop, vous verrez que l’utilisation des bons mots clés devient vite machinale pourvu que vous pratiquiez régulièrement.

Exécutons ce code dans un navigateur. A l’ouverture de la page, la balise <div> a un arrière-plan noir. Pour le modifier, il suffit d’entrer un code hexadécimal dans la zone de texte et de cliquer sur le bouton de commande.

Pour trouver facilement le code de couleur hexadécimal d’une couleur donnée, je vous suggère d’utiliser le site http://www.code-couleur.com/.