Couleurs W3.CSS
Le schéma de couleurs par défaut utilisé dans W3.CSS est inspiré des couleurs de conception matérielle (couleurs utilisées dans le marketing, les panneaux de signalisation et les notes autocollantes).
Coloration des éléments HTML
Les classes w3 - color et w3-text- color peuvent être utilisées pour colorer n'importe quel élément HTML :
Conteneurs :
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Boutons:
Texte:
Les frontières:
rouge
Vert
Bleu
Jaune
Gris
Noir
Les tables:
Nom | Points |
---|---|
Jill Smith | 50 |
Ève Jackson | 94 |
Adam Johnson | 67 |
Cartes:
Une voiture est un véhicule à moteur autonome à roues utilisé pour le transport. La plupart des définitions du terme précisent que les voitures sont conçues pour rouler principalement sur les routes, pour avoir des sièges pour une à huit personnes, pour avoir généralement quatre roues. (Wikipédia)
Couleurs de fond
Les classes w3- color définissent la couleur d'arrière-plan de tout élément HTML :
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<div class="w3-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-yellow">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
<div class="w3-gray">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Les couleurs gris et gris sont interchangeables dans toutes les classes W3.CSS.
Couleurs du texte
Les classes w3- text- color définissent la couleur du texte de n'importe quel élément HTML :
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<div class="w3-text-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.</p>
</div>
Couleurs de survol
Les classes w3-hover- color définissent la couleur de survol d'arrière-plan pour tout élément HTML :
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<div class="w3-container w3-orange w3-hover-red">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Les classes w3-hover- text- color définissent la couleur de survol du texte pour tout élément HTML :
Londres
Londres est la ville la plus peuplée du Royaume-Uni, avec une aire métropolitaine de plus de 9 millions d'habitants.
Exemple
<div class="w3-container w3-orange w3-hover-text-white">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>
Bibliothèques de couleurs
En plus des couleurs W3.CSS standard, W3.CSS peut également utiliser des couleurs provenant de nombreuses bibliothèques de couleurs différentes :
Couleurs Windows :
Cliquez ici pourEn savoir plus sur les couleurs Windows
Couleurs tendance :
Jaune primevère
Épinette ombragée
Pivoine Marine
Porto Tawny
Cliquez ici pourEn savoir plus sur les couleurs tendance
Couleurs de l'autoroute :
Cliquez ici pourEn savoir plus sur les bibliothèques de couleurs
Vous en apprendrez beaucoup plus sur les couleurs dans les chapitres suivants de ce didacticiel.