Prerequisiti: Struttura di una regola CSS.
Proprietà, valori e commenti
Proprietà, valori e commenti: fondamenti.
Una dichiarazione CSS associa una proprietà a un valore. La proprietà identifica una caratteristica, mentre il valore deve appartenere ai tipi ammessi per quella caratteristica. Per esempio font-size accetta lunghezze come 20px, mentre color accetta colori come navy. Non puoi scambiare liberamente i valori anche quando la punteggiatura è corretta. Imparare una proprietà significa comprendere il risultato che produce e quali valori sono consentiti.
Come funziona: proprietà, valori e commenti
Proprietà, valori e commenti: comportamento nel browser.
I commenti iniziano con /* e finiscono con */. Il browser li ignora durante la presentazione: servono a spiegare intenzioni, sezioni o scelte non evidenti. Non usare // per un commento CSS. Una proprietà abbreviata, come border, imposta più componenti insieme. La forma border: 2px solid navy indica spessore, stile e colore. Le proprietà specifiche, come border-color, permettono invece di cambiare una sola componente.
Scelte di utilizzo e limiti
Proprietà, valori e commenti: progetto e verifica.
Una dichiarazione non valida viene normalmente scartata senza annullare le altre dichiarazioni valide del blocco. Un errore di delimitazione può invece compromettere una porzione più ampia del foglio. Durante la diagnosi separa sintassi, validità del valore e conflitti di cascata: una dichiarazione barrata nei DevTools non è necessariamente un errore di sintassi.
Esempio commentato
Proprietà, valori e commenti: HTML e CSS.
Prima di eseguire il codice: identifica gli elementi interessati e formula una previsione. I frammenti appartengono all’esempio completo scaricabile.
Contenuto HTML
<p>Commentare significa spiegare una scelta.</p>Regole CSS
/* Un bordo rende riconoscibile la nota. */
p {
color: navy;
font-size: 20px;
border: 2px solid navy;
padding: 12px;
}Il commento non compare nella pagina. border usa tre valori con significati diversi; padding crea spazio fra testo e bordo.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
color | navy | Colore del testo; non imposta lo sfondo. |
font-size | 20px | Dimensione del carattere. |
border | 2px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
padding | 12px | Spazio interno fra contenuto e bordo. |
LABORATORIO
Sperimentare: Proprietà, valori e commenti
Il commento non compare nella pagina. border usa tre valori con significati diversi; padding crea spazio fra testo e bordo.
Obiettivo: Comprendere e applicare proprietà, valori e commenti attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il blocco style nel documento nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Sostituisci color: navy con color: 20px e conserva le altre dichiarazioni.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
Il colore non valido viene ignorato; font-size, bordo e padding continuano a funzionare. Ripristina infine navy.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | Il colore non valido viene ignorato; font-size, bordo e padding continuano a funzionare. Ripristina infine navy. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Mantieni spessore e stile del bordo, ma cambia soltanto il suo colore in darkred usando una proprietà specifica.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
p {
border: 2px solid navy;
border-color: darkred;
}Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Proprietà, valori e commenti: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale forma è un commento CSS? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.