Teoria
Teoria

Classi in CSS

Abbiamo colorato di nuovo la sinossi, ma a quale costo. La soluzione con tag aggiuntivi per lo styling non è la migliore. È molto più comodo usare le "classi"!

Una classe è solo uno degli attributi dei tag HTML, ad esempio:

<p class="important">...</p>
<p class="help">...</p>

Nei CSS, è possibile impostare stili solo per elementi con una classe specifica. Ciò avviene utilizzando un selettore di classe, che si scrive ad esempio .class-name:

.important { color: red; } - seleziona tutti i tag con classe "important"
.help { color: green; }    - seleziona tutti i tag con classe "help".

Per dare ai paragrafi colori diversi, si possono aggiungere classi diverse e poi usare i selettori di classe.

Il nome della classe può contenere caratteri latini, numeri, trattino - e trattino basso _ e deve iniziare con un carattere latino.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <title>Classi in CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Schema del corso</h1> Tag di abbinamento. Tag singoli. Attributi dei tag. Stili in linea (incorporati). Stili esterni. Stilizzazione per classe. </body> </html>

CSS

body { font-family: "Tahoma", serif; } h1 { color: #999999; } .completed { color: green; } .in-progress { color: orange; } .new { color: red; }

ObiettiviFatto

Rifare tutto con le classi:

Aggiungete una classe completed ai primi quattro paragrafi.
Al quinto paragrafo, aggiungere una classe in-progress.
Aggiungere una new classe al sesto paragrafo.