W3.Colori CSS
La combinazione di colori predefinita utilizzata in W3.CSS è ispirata ai Material Design Colors (colori utilizzati nel marketing, nei segnali stradali e nelle note adesive).
Elementi HTML da colorare
Le classi w3 - color e w3- text- color possono essere utilizzate per colorare qualsiasi elemento HTML:
Contenitori:
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Pulsanti:
Testo:
Frontiere:
rosso
Verde
Blu
Giallo
Grigio
Nero
Tabelle:
| Nome | Punti |
|---|---|
| Jill Smith | 50 |
| Eva Jackson | 94 |
| Adam Johnson | 67 |
Carte:
Un'auto è un veicolo a motore a ruote e autoalimentato utilizzato per il trasporto. La maggior parte delle definizioni del termine specificano che le auto sono progettate per circolare principalmente su strada, per avere posti a sedere da una a otto persone, per avere tipicamente quattro ruote. (Wikipedia)
Colori di sfondo
Le classi w3- color impostano il colore di sfondo per qualsiasi elemento HTML:
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Esempio
<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>
I colori grigio e grigio sono intercambiabili in tutte le classi W3.CSS.
Colori del testo
Le classi w3- text- color impostano il colore del testo di qualsiasi elemento HTML:
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Esempio
<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>
Colori al passaggio del mouse
Le classi w3-hover- color definiscono il colore di sfondo al passaggio del mouse per qualsiasi elemento HTML:
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Esempio
<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>
Le classi w3-hover- text- color definiscono il colore del testo al passaggio del mouse per qualsiasi elemento HTML:
Londra
Londra è la città più popolosa del Regno Unito, con un'area metropolitana di oltre 9 milioni di abitanti.
Esempio
<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>
Librerie di colori
Oltre ai colori standard W3.CSS, W3.CSS può anche utilizzare colori da molte librerie di colori differenti:
Colori di Windows:
Fare clic qui per ulteriori informazioni sui colori di Windows
Colori alla moda:
Giallo Primula
Abete ombreggiato
Peonia Marina
Porto Bruno
Clicca qui per saperne di più sui colori alla moda
Colori dell'autostrada:
Fare clic qui per saperne di più sulle librerie di colori
Imparerai molto di più sui colori nei capitoli successivi di questo tutorial.