oujood.com

Mettre en forme un texte en CSS:les couleurs de police, la propriété CSS color

Les feuilles de styles CSS - Tutoriel pour mettre en forme un texte. Couleurs normalisés fondamentales et codes CSS des couleurs
Il existe plusieurs possibilités pour indiquer une couleur en css.
Pour cet effet nous utilisons la propriété CSS color .
La propriété color permet de changer la couleur du texte, nous avons déja vu cette propiété color dans des cours précédents.

chercher |

Les couleurs

HTML & CSS

Les couleurs CSS sont affichées en combinant ROUGE, VERT, BLEU.

Les valeurs des couleurs

Les couleurs CSS sont définies en utilisant un format hexadécimal (hex) ou la notation de la combinaison de couleur (RVB) pour indiquer les valeurs de rouge, vert, et bleu. La valeur la plus basse qui peut être donné à l'une des sources de lumière est 0 pour RVB ou 00 pour hexadécimal . La valeur la plus élevée est de 255 (FF hex).

Les valeurs hexadécimales sont écrites comme des numéros de 3 couples (doubles) de chiffres, commençant par le signe #.

Exemples de couleur

Couleur

Hexadécimal de la couleur

Couleur RGB

#000000

rgb (0,0,0)

#FF0000

rgb (255,0,0)

#00FF00

rgb (0,255,0)

#0000FF

rgb (0,0,255)

#FFFF00

rgb (255,255,0)

#00FFFF

rgb (0,255,255)

#FF00FF

rgb (255.0.255)

#C0C0C0

rgb (192,192,192)

#FFFFFF

rgb (255,255,255)

Exemple :       Copier le code 

	 h1{
	   text-align: center; 
	   font-family: Arial, "Arial Black", "Times New Roman", serif; 
	   text-decoration: underline; 
	   color: #00ff00; 
	}
	p{
	   text-indent: 20px; 
	   color: rgb (0,0,255); 
	}
	strong {
	   color: #FF0000; 
	   text-decoration: blink;
	}

Code : HTML

Exemple :       Copier le code 

	<h1>[Françoise Dolto]</h1>
	<p>Tout groupe humain prend sa richesse dans la communication, l'entraide et </p>
	<p>
	<strong>
	la solidarité visant à un but commun : 	
	l'épanouissement  <em>de chacun  </em> dans le
	</strong>
	<strong>respect </strong> des différences.</p>

La notation hexadécimale


16 couleurs, c'est peu quand on sait que les écrans peuvent en afficher 16 millions.
Mai, s'il fallait donner un nom à chacune des 16 millions de couleurs avec leur nom imaginez ça !!!...
Heureusement, il existe plusieurs manières en CSS pour choisir une couleur parmi celles existante.
La première est la notation hexadécimale.
Elle est souvent utilisée .
Un nom de couleur en hexadécimal, ça ressemble à ça : #FF5A28. C'est une combinaison de lettres et de chiffres qui indiquent une couleur.
Elle commence par un dièse (#), suivi de 6 lettres ou chiffres allant de 0 à 9 et de A à F.
Ces lettres ou chiffres fonctionnent deux par deux.Les 2 premiers indiquent une quantité de rouge, les 2 suivants une quantité de vert, et les 2 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 voulue.

Ainsi, #000000 correspond à la couleur noire et #FFFFFF à la couleur blanche.

Voici par exemple comment on fait pour appliquer la couleur blanche en hexadécimal :
color:#FFFFFF;



La méthode RGB


En anglais Red-Green-Blue, ce qui s'abrège en "RGB". Comme pour la notation hexadécimale, on doit définir une quantité de rouge, de vert et de bleu pour choisir une couleur.
Mais là c'est beaucoup plus pratique .Voici la marche à suivre :
1. Lancez le logiciel Paint depuis le menu Démarrer.
2. Rendez-vous dans le menu Couleurs / Modifier les couleurs :
3. Une fenêtre s'ouvre. Cliquez sur le bouton "Définir les couleurs personnalisées" en bas. Dans la zone qui apparaît à droite, faites bouger les curseurs pour sélectionner la couleur qui vous intéresse.
4. Je sélectionne la couleur dans la fenêtre, comme ceci :

image de couleur

5. On relève les quantités de Rouge-Vert-Bleu correspondantes indiquées en bas à droite de la fenêtre (ici 71-201-165). Je recopie ces valeurs dans cet ordre dans le fichier CSS, comme ceci :
Code : CSS


Exemple :       Copier le code 

	h1{
	   text-align: center; 
	   color: rgb(71,201,165); 
	}

Pour utiliser la méthode RGB il faut taper rgb(Rouge, Vert, Bleu) en remplaçant "Rouge, Vert, Bleu" par les nombres correspondants. Pour votre information, ces nombres vont de 0 à 255.

Des noms de couleurs prises en charge par tous les navigateurs

On peut aussi utiliser les noms de couleurs .

147 noms de couleurs sont définis dans la spécification de couleur pour le code HTML et CSS (les 17 couleurs standard plus 130 ).

Remarque : Les 17 couleurs standard sont: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.

Exemple utilisation des nom de couleurs

Exemple :       Copier le code 

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:SkyBlue;
}
h1{
color:SeaGreen ;
text-align:center;
}
p{
font-family:"Times New Roman";
font-size:20px;
color:blue;
}
</style>
</head>
 
<body>
 
<h1>Exemple CSS !</h1>
<p>Ceci et un paragraphe.</p>
 
</body>
</html>

Noms de couleur prédéfinis

Le tableau ci-dessous répertorie tous les noms prédéfinis, avec leurs valeurs hexadécimales.

Nom de couleur HEXA Couleur

AliceBlue 

#F0F8FF

AntiqueWhite 

#FAEBD7

Aqua 

#00FFFF

Aquamarine 

#7FFFD4

Azure 

#F0FFFF

Beige 

#F5F5DC

Bisque 

#FFE4C4

Black 

#000000

BlanchedAlmond 

#FFEBCD

Blue 

#0000FF

BlueViolet 

#8A2BE2

Brown 

#A52A2A

BurlyWood 

#DEB887

CadetBlue 

#5F9EA0

Chartreuse 

#7FFF00

Chocolate 

#D2691E

Coral 

#FF7F50

CornflowerBlue 

#6495ED

Cornsilk 

#FFF8DC

Crimson 

#DC143C

Cyan 

#00FFFF

DarkBlue 

#00008B

DarkCyan 

#008B8B

DarkGoldenRod 

#B8860B

DarkGray 

#A9A9A9

DarkGreen 

#006400

DarkKhaki 

#BDB76B

DarkMagenta 

#8B008B

DarkOliveGreen 

#556B2F

Darkorange 

#FF8C00

DarkOrchid 

#9932CC

DarkRed 

#8B0000

DarkSalmon 

#E9967A

DarkSeaGreen 

#8FBC8F

DarkSlateBlue 

#483D8B

DarkSlateGray 

#2F4F4F

DarkSlateGrey 

#2F4F4F

DarkTurquoise 

#00CED1

DarkViolet 

#9400D3

DeepPink 

#FF1493

DeepSkyBlue 

#00BFFF

DimGray 

#696969

DimGrey 

#696969

DodgerBlue 

#1E90FF

FireBrick 

#B22222

FloralWhite 

#FFFAF0

ForestGreen 

#228B22

Fuchsia 

#FF00FF

Gainsboro 

#DCDCDC

GhostWhite 

#F8F8FF

Gold 

#FFD700

GoldenRod 

#DAA520

Gray 

#808080

Grey 

#808080

Green 

#008000

GreenYellow 

#ADFF2F

HoneyDew 

#F0FFF0

HotPink 

#FF69B4

IndianRed  

#CD5C5C

Indigo  

#4B0082

Ivory 

#FFFFF0

Khaki 

#F0E68C

Lavender 

#E6E6FA

LavenderBlush 

#FFF0F5

LawnGreen 

#7CFC00

LemonChiffon 

#FFFACD

LightBlue 

#ADD8E6

LightCoral 

#F08080

LightCyan 

#E0FFFF

LightGoldenRodYellow 

#FAFAD2

LightGray 

#D3D3D3

LightGrey 

#D3D3D3

LightGreen 

#90EE90

LightPink 

#FFB6C1

LightSalmon 

#FFA07A

LightSeaGreen 

#20B2AA

LightSkyBlue 

#87CEFA

LightSlateGray 

#778899

LightSlateGrey 

#778899

LightSteelBlue 

#B0C4DE

LightYellow 

#FFFFE0

Lime 

#00FF00

LimeGreen 

#32CD32

Linen 

#FAF0E6

Magenta 

#FF00FF

Maroon 

#800000

MediumAquaMarine 

#66CDAA

MediumBlue 

#0000CD

MediumOrchid 

#BA55D3

MediumPurple 

#9370DB

MediumSeaGreen 

#3CB371

MediumSlateBlue 

#7B68EE

MediumSpringGreen 

#00FA9A

MediumTurquoise 

#48D1CC

MediumVioletRed 

#C71585

MidnightBlue 

#191970

MintCream 

#F5FFFA

MistyRose 

#FFE4E1

Moccasin 

#FFE4B5

NavajoWhite 

#FFDEAD

Navy 

#000080

OldLace 

#FDF5E6

Olive 

#808000

OliveDrab 

#6B8E23

Orange 

#FFA500

OrangeRed 

#FF4500

Orchid 

#DA70D6

PaleGoldenRod 

#EEE8AA

PaleGreen 

#98FB98

PaleTurquoise 

#AFEEEE

PaleVioletRed 

#DB7093

PapayaWhip 

#FFEFD5

PeachPuff 

#FFDAB9

Peru 

#CD853F

Pink 

#FFC0CB

Plum 

#DDA0DD

PowderBlue 

#B0E0E6

Purple 

#800080

Red 

#FF0000

RosyBrown 

#BC8F8F

RoyalBlue 

#4169E1

SaddleBrown 

#8B4513

Salmon 

#FA8072

SandyBrown 

#F4A460

SeaGreen 

#2E8B57

SeaShell 

#FFF5EE

Sienna 

#A0522D

Silver 

#C0C0C0

SkyBlue 

#87CEEB

SlateBlue 

#6A5ACD

SlateGray 

#708090

SlateGrey 

#708090

Snow 

#FFFAFA

SpringGreen 

#00FF7F

SteelBlue 

#4682B4

Tan 

#D2B48C

Teal 

#008080

Thistle 

#D8BFD8

Tomato 

#FF6347

Turquoise 

#40E0D0

Violet 

#EE82EE

Wheat 

#F5DEB3

White 

#FFFFFF

WhiteSmoke 

#F5F5F5

Yellow 

#FFFF00

YellowGreen 

#9ACD32
Par carabde 10 mars 2014

chapitre précédent    chapitre suivant


Voir aussi nos tutoriel :

Les Glyphicons de Bootstrap

Les Glyphicons peuventt être utilisés dans le texte, boutons, barres d'outils, navigation, formulaires, etc..
Voici quelques exemples de glyphicons :
Glyphicon de l’impression :
Glyphicon de l’acccueil :

Balise paragraphe p

Définit un paragraphe

background-position

Définit la position de départ d'une image de fond