Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

1 LA COULEUR ET LE FOND Continuons notre tour d'horizon des propriétés CSS exis

1 LA COULEUR ET LE FOND Continuons notre tour d'horizon des propriétés CSS existantes. Nous allons nous intéresser ici aux propriétés liées de près ou de loin à la couleur. Nous verrons entre autres : comment changer la couleur du texte ; comment mettre une couleur ou une image d'arrière- plan ; comment ajouter des ombres ; comment jouer avec les niveaux de transparence. Le CSS n'a pas fini de nous étonner ! Couleur du texte Passons maintenant au vaste sujet de la couleur. Comment ça, « vaste » ? Vous connaissez déjà la propriété qui permet de modifier la couleur du texte : il s'agit de color. Nous allons nous intéresser aux différentes façons d'indiquer la couleur, car il y en a plusieurs. Indiquer le nom de la couleur La méthode la plus simple et la plus pratique pour choisir une couleur consiste à taper son nom (in english, of course). Le seul défaut de cette méthode est qu'il n'existe que seize couleurs dites « standard ». D'autres couleurs officieuses existent mais, comme elles ne fonctionneront 1 2 pas forcément de la même manière sur tous les navigateurs, je vais éviter de vous les montrer. La figure suivante vous montre les seize couleurs que vous pouvez utiliser en tapant simplement leur nom. Les seize noms de couleurs utilisables en CSS Vous pouvez les apprendre par cœur si cela vous chante, en plus cela vous fera réviser votre anglais. Pour passer tous les titres en marron, on peut donc écrire : 3 h1 { color: maroon; } Vous trouverez le résultat à la figure suivante. Le titre est écrit en marron La notation hexadécimale Seize couleurs, c'est quand même un peu limite quand on sait que la plupart des écrans peuvent en afficher seize millions. D'un autre côté, remarquez, s'il avait fallu donner un nom à chacune des seize millions de couleurs… 4 Heureusement, il existe en CSS plusieurs façons de choisir une couleur parmi toutes celles qui existent. La première que je vais vous montrer est la notation hexadécimale. Elle est couramment utilisée sur le Web mais il existe aussi une autre méthode que nous verrons plus loin. Un nom de couleur en hexadécimal, cela ressemble à : #FF5A28. Pour faire simple, c'est une combinaison de lettres et de chiffres qui indiquent une couleur. On doit toujours commencer par écrire un dièse (#), suivi de six lettres ou chiffres allant de 0 à 9 et de A à F. Ces lettres ou chiffres fonctionnent deux par deux. Les deux premiers indiquent une quantité de rouge, les deux suivants une quantité de vert et les deux derniers une quantité de bleu. En mélangeant ces quantités (qui sont les composantes Rouge-Vert-Bleu de la couleur) on peut obtenir la couleur qu'on veut. Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche. Mais maintenant, ne me demandez pas quelle est la combinaison qui produit de l'orange couleur « coucher de soleil », je n'en sais strictement rien. Certains logiciels de dessin, comme Photoshop, Gimp et Paint.NET, vous indiquent les couleurs en hexadécimal. Il vous est alors facile de copier-coller le code hexadécimal d'une couleur dans votre fichier CSS. Voici par exemple comment on fait pour appliquer aux paragraphes la couleur blanche en hexadécimal : 5 p { color: #FFFFFF; } Notez qu'il existe une notation raccourcie : on peut écrire une couleur avec seulement trois caractères. Par exemple : #FA3 équivaut à écrire #FFAA33. La méthode RGB Que signifie RGB ? En anglais, Rouge-Vert-Bleu s'écrit Red-Green-Blue, ce qui s'abrège en « RGB ». Comme avec la notation hexadécimale, pour choisir une couleur, on doit définir une quantité de rouge, de vert et de bleu. Encore cette histoire tordue de quantités de rouge-vert- bleu ? Oui mais là, vous allez voir que c'est beaucoup plus pratique et qu'avec un logiciel de dessin tout simple comme Paint, vous pouvez trouver la couleur que vous désirez. Voici la marche à suivre : 1. Lancez le logiciel Paint depuis le menu Démarrer. 2. Rendez-vous dans la section Modifier les couleurs, comme indiqué à la figure suivante. 3. Une fenêtre s'ouvre. Dans la zone qui apparaît à droite, faites bouger les curseurs pour sélectionner la couleur qui vous intéresse. Supposons que vous soyez pris d'une envie folle d'écrire vos titres <h1> en rose bonbon (supposons seulement). Sélectionnez la couleur dans la fenêtre, comme à la figure suivante. 6 4. Relevez les quantités de Rouge-Vert-Bleu correspondantes, indiquées en bas à droite de la fenêtre (ici 240-96-204). Recopiez ces valeurs dans cet ordre dans le fichier CSS, comme dans le code ci-dessous. p { color: rgb(240,96,204); } Modification des couleurs sous Paint 7 Sélection d'une couleur dans Paint Comme vous avez pu le constater dans l'exemple, pour utiliser la méthode RGB, il faut taper rgb(Rouge, Vert, Bleu) en remplaçant « Rouge, Vert, Bleu » par les nombres correspondants. Pour information, ces quantités sont toujours comprises entre 0 et 255. Et en Bonus Track… Je vous conseille de taper "Color Picker" sur Google et vous trouverez plusieurs outils et sites qui vous aident à choisir une couleur. Par exemple, http://www.colorpicker.com permet de trouver la valeur hexadécimale d'une couleur très facilement : 8 Le site ColorPicker.com C'est tout simple, mais ça fait le travail ! Vous pouvez aussi trouver des extensions de navigateur qui permettent de "récupérer" n'importe quelle couleur qui vous plaît sur un site web : ColorPicker pour Firefox ColorZilla pour Chrome Couleur de fond Pour indiquer une couleur de fond, on utilise la propriété CSS background-color. Elle s'utilise de la même manière que la propriété color, c'est-à-dire que vous pouvez taper le nom d'une couleur, l'écrire en notation hexadécimale ou encore utiliser la méthode RGB. Pour indiquer la couleur de fond de la page web, il faut travailler sur la balise <body>. Eh oui, <body> correspond à l'ensemble de la page web, c'est donc en modifiant sa couleur de fond que l'on changera la couleur d'arrière- plan de la page. 9 Regardez très attentivement ce fichier CSS : /* On travaille sur la balise body, donc sur TOUTE la page */ body { background-color: black; /* Le fond de la page sera noir */ color: white; /* Le texte de la page sera blanc */ } Voici le rendu de ce code : Texte en blanc sur fond noir Eh mais tu as demandé à ce que le texte de la balise <body> soit écrit en blanc, et tous les paragraphes <p> et 10 titres <h1> ont pris cette couleur. Comment cela se fait- il ? Je voulais justement profiter de l'occasion pour vous en parler. Ce phénomène s'appelle l'héritage. Je vous rassure tout de suite, personne n'est mort. Le CSS et l'héritage En CSS, si vous appliquez un style à une balise, toutes les balises qui se trouvent à l'intérieur prendront le même style. C'est en fait simple à comprendre et intuitif. La balise <body>, vous le savez, contient entre autres les balises de paragraphe <p> et de titre <h1>. Si j'applique une couleur de fond noire et une couleur de texte blanche à la balise <body>, tous mes titres et paragraphes auront eux aussi un arrière-plan de couleur noire et un texte de couleur blanche… C'est ce phénomène qu'on appelle l'héritage : on dit que les balises qui se trouvent à l'intérieur d'une autre balise « héritent » de ses propriétés. C'est d'ailleurs de là que vient le nom « CSS », qui signifie « Cascading Style Sheets », c'est-à-dire « Feuilles de style en cascade ». Les propriétés CSS sont héritées en cascade : si vous donnez un style à un élément, tous les sous-éléments auront le même style. Cela veut dire que TOUT le texte de ma page web sera forcément écrit en blanc ? Non, pas obligatoirement. Si vous dites par la suite que vous voulez vos titres en rouge, ce style aura la priorité et 11 vos titres seront donc en rouge. En revanche, si vous n'indiquez rien de particulier (comme on l'a fait tout à l'heure), alors vos titres hériteront de la couleur blanche. Cela ne fonctionne pas uniquement pour la couleur, entendons-nous bien. Toutes les propriétés CSS seront héritées : vous pouvez par exemple demander une mise en gras dans la balise <body> et tous vos titres et paragraphes seront en gras. Exemple d'héritage avec la balise <mark> On a tendance à croire qu'on ne peut modifier que la couleur de fond de la page. C'est faux : vous pouvez changer le fond de n'importe quel élément : vos titres, vos paragraphes, certains mots… Dans ce cas, ils apparaîtront surlignés (comme si on avait mis un coup de marqueur dessus). Vous vous souvenez par exemple de la balise <mark> qui permet de mettre en valeur certains mots ? Utilisons-la à nouveau ici : <h1>Qui a éteint la lumière ?</h1> <p>Brr, il fait tout noir sur ce site, c'est un peu <mark>inquiétant</mark> comme ambiance non vous trouvez pas ?</p> Par défaut, le texte s'affiche sur un fond jaune. uploads/s3/ la-couleur-et-le-fond-3.pdf