Teoria
Teoria

Proprietà e valori CSS

Il linguaggio CSS è composto da selettori e proprietà. I selettori specificano a quali elementi applicare gli stili, mentre le proprietà specificano come visualizzare gli elementi.

Esiste un numero enorme di proprietà CSS che influenzano quasi tutti gli aspetti della visualizzazione degli elementi. Ogni proprietà ha un insieme specifico di valori.

Alcuni valori sono impostati utilizzando costanti di testo, ad esempio red, bold, altri utilizzando valori numerici: 12px, 120% e così via.

Il potere degli stili consiste nella possibilità di modificare in modo rapido e flessibile l'aspetto degli elementi desiderati, soprattutto quando si utilizzano le classi. Ad esempio, per cancellare il testo di tutti i punti studiati in un contorno, è sufficiente aggiungere una riga in CSS:

.completed {
  color: green;
  text-decoration: line-through;
}

E tutti i tag con la classe .completed saranno visualizzati con il testo barrato. Ora immaginate quanto tempo ci vuole per fare la stessa cosa attraverso gli stili in linea quando ci sono più di cento paragrafi in un sommario.

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

Aggiungere una proprietà di text-decoration alla regola .completed con un valore di line-through,
nella regola .in-progress con una proprietà padding-left con un valore di 15px,
nella regola .new la proprietà background-color con il valore #fff0f0.
Infine, segnate gli ultimi due paragrafi dello schema come superati, sostituendo la loro classe con quella di completed.