Sintassi CSS
Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 2 di 76.
In CSS, la sintassi si riferisce all’insieme di regole che definiscono come deve essere scritto il codice CSS. Comprendere la sintassi CSS è essenziale per creare fogli di stile ben strutturati e funzionali. Una regola CSS di base è composta da un selettore e da un blocco di dichiarazioni.
Ecco una semplice spiegazione:
- Selettore: Specifica l’elemento HTML a cui vuoi applicare uno stile (ad es. p, div, img).
- Blocco di dichiarazioni: Contiene una o più dichiarazioni racchiuse tra parentesi graffe
{}.
- Dichiarazione: È composta da una proprietà e un valore, separati da due punti
:(ad es. color:green;). Ogni dichiarazione deve terminare con un punto e virgola (;).
- Proprietà: L'attributo di stile che vuoi modificare (ad es., color, font-size).
- Valore: Il valore che vuoi impostare per la proprietà (ad es., blue, 16px).
Per esempio:
p {
color: blue;
font-size: 16px;
}In questo esempio, p è il selettore, che seleziona tutti gli elementi paragrafo. Il blocco di dichiarazioni contiene due dichiarazioni: una imposta il colore del testo sul blu e l’altra imposta la dimensione del carattere a 16 pixel.
Sfida
FacileTi viene fornito del codice HTML con un elemento paragrafo e una regola CSS per quel paragrafo. Modifica la regola CSS per cambiare il colore del testo in red.
Provalo tu
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Stilizzare con CSS
4Fondamenti del testo
Colore del testoFamiglia di caratteriDimensione del carattereSpessore del carattereAllineamento del testoDecorazione del testoSfida di ripasso #1Sfida di ripasso #27Modello a scatola - Parte 1
Cos'è il modello a scatola?Spaziatura internaMarginiBordiLarghezza e altezzaSfida di riepilogo
8Modello a scatola Parte 2
Dimensionamento del boxRaggio del bordoOverflowOmbra del boxSfida di ripassoEsercitati da solo: Playground Web