HTML, CSS Accueil
Chapitres :
HTML et CSS Chapitre 8
Couleurs et habillage du texte avec CSS
8.1 Couleur de texte : propriété color.
La propriété color vous permet de fixer la couleur d'un élément de texte, comme vu précédemment. 3 méthodes différentes vous permettent d'assigner une valeur à ce paramètre :
8.1.1 Les noms de couleur
16 couleurs basiques sont adressables par leur nom anglais :
• White
• Silver
• Gray
• Black
• Red
• Maroon
• Lime
• Green
• Yellow
• Olive
• Blue
• Navy
• Fuchsia
• purple
• aqua
• teal
p { color: aqua; }
8.1.2 La notation hexadécimale
Elle est du type #RRVVBB, où les deux premiers chiffres indiquent en hexadécimal (entre 00 et FF) la quantité de Rouge, les deux suivants le Vert, et les deux derniers le Bleu.
Ainsi,
– #000000 est noir,
– #FFFFFF est blanc,
– #00FF00 est vert, etc …
Exemple :
p { color: #007700; } // ici on a un vert intermédiaire
8.1.3 La notation RGB
Identique à la précédente, mais en décimal (entre 0 et 255), la notation est la suivante :
p { color: rgb(240,96,204);}
Ici, le rouge vaut 240, le vert 96 et le bleu 204 (valeurs décimales).
8.2 Couleur de fond : propriété background-color
Pour indiquer la couleur de fond de notre page, on utilise la propriété backgroud-color associée à la balise <body> :
body
{
background-color: black; /* Le fond de la page sera noir */
color: white; /* Le texte de la page sera blanc */
}
8.3 Image de fond : propriété background-image
Pour définir une image de fond sur notre page, on utilise la propriété backgroud-image associée à la balise <body> :
body
{
background-image: url("neige.png");
}
Autres propriétés pouvant venir complémenter notre image :
• background-attachment :
1. fixed : l'image sera fixe
2. scroll : (par défaut) l'image de fond « roule » sous le texte (avec les ascenseurs)
• background-repeat :
1. no-repeat : image unique sur le fond.
2. repeat-x
3. repeat-y
4. repeat : (par défaut) mosaïque. L’image est dupliquée pour remplir toute la page.
• background-position :
1. top, bottom, left, right, center (ou des combinaisons de tout cela)
2. 30px, 50px : à 30 pixels de la gauche et 50 pixels du haut
8.4 Transparences
8.4.1 opacity : la propriété de la transparence
La propriété opacity permet de jouer avec les effets de transparences sur les éléments de ma page :
On lui attribue une valeur entre 0 (totalement transparent) et 1 (totalement opaque).
Exemple :
p { opacity:0.5;}
8.4.2 Autre technique : le canal Alpha
Lors de l'attribution d'une couleur via background-color, par la technique RGB, il est possible d'utiliser la technique étendue RGBa, en faisant usage du quatrième paramètre, le canal Alpha. Celui-ci fixe l'opacité, de la même manière que la propriété ci-dessus.
Exemple :
p
{
background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */
}
8.5 Bordures
Il est souvent nécessaire d'installer une bordure autour d'un élément de page.
Pour cela, il existe une propriété CSS dédiée appelée border. 3 caractéristiques la composent :
8.5.1 Largeur de bordure
Elle se précise en pixel
8.5.2 Couleur de bordure
Elle se précise de la même manière que la couleur de texte, voir précédemment
8.5.3 Type de bordure
9 types possibles :
– none (défaut)
– solid
– dotted
– dashed
– double
– groove
– ridge
– inset
– outset
Exemple :
h1 { border: 3px blue dashed;}
Ici, mes titres h1 seront encadrés de tirets, de 3 pixels d'épais, en bleu.
Sachez qu'il est également possible de changer le type de bordure pour chaque côté de mon élément, et d'arrondir les coins.
Davantage de détails ici : (The border radius)