Formation I.S.N.

Mise en couleur

De nombreux éléments d'une page web peuvent être mis en couleur. Par exemple :

  • la propriété color modifie la couleur du texte écrit dans la «boîte» ;
  • la propriété background-color modifie la couleur d'arrière-plan. Pour une couleur d'arrière-plan avec dégradés, il faut utiliser la propriété background-image muni des valeurs linear-gradient ou radial-gradient ;
  • la propriété border-color modifie la couleur des bordures...

Les valeurs prises par ces propriétés peuvent être :

  • une couleur nommée. On trouvera 500 couleurs nommées en cliquant ici ;
  • une couleur représentée par un codage hexadécimal ;
  • ou une couleur représentée par un codage RGB sous forme RGB(r, v, b). On peut ajouter à cela le codage codage RGBa pour lequel on ajoute une composante d'opacité de la couleur.

Pour obtenir ces représentations hexadécimales ou RGB, on peut utiliser un «analyseur de couleur».
Par exemple, Just Color Picker pour les systèmes d'exploitation Windows et MacOS ou bien GColor2 pour Linux.
Signalons aussi l'extension ColorZilla de Firefox, petit outil très complet pour récupérer les couleurs utilisées dans une page web.

Bac à sable : Des couleurs partout

Ci-contre, on peut choisir la couleur de l'arrière-plan de cette boîte, la couleur du texte de base et celle des mots importants à mettre en valeur. Vous pouvez ensuite lire le code css correspondant dans le cadre ci-dessous.



Code Css :

p {                                 /* Mise en forme des paragraphes */
    background-color: #ffffff;      /* Couleur d'arrière-plan - Blanc */
    color: #000000;                 /* Couleur du texte - Noir */
    }
	
strong {                            /* Mise en forme des mots importants */
    color: #000000;                 /* Couleur du texte - Noir */
    }			

L'exercice suivant comportent trois fenêtres :

  • La première contient un extrait de fichier .html.
  • La deuxième contient une feuille .css agissant sur la mise en forme du fichier .html. Cette feuille est modifiable.
  • La troisième présente l'affichage obtenu avec les deux fichiers précédents.

Compléter le code Css ci-dessous pour que le paragraphe soit écrit en blanc sur fond noir et que le texte balisé par <strong> soit écrit en rouge sur fond jaune.

  • Affichage à obtenir ?
  • Une solution ?