Prerequisiti: Interlinea e spaziatura del testo.
Allineamento e decorazione del testo
Allineamento e decorazione del testo: fondamenti.
text-align allinea il contenuto inline dentro un blocco. center centra il testo nell’area del blocco, non sposta automaticamente il blocco al centro della pagina. start segue l’inizio della direzione di scrittura. Per un lungo testo italiano un allineamento iniziale evita spesso gli spazi irregolari che possono comparire con justify su colonne strette.
Come funziona: allineamento e decorazione del testo
Allineamento e decorazione del testo: comportamento nel browser.
text-decoration controlla decorazioni come sottolineatura e barratura. Un collegamento deve rimanere riconoscibile: togliere ogni segnale può farlo sembrare testo normale. text-decoration-thickness cambia lo spessore della linea. text-transform modifica la resa in maiuscolo o minuscolo senza riscrivere i caratteri del documento.
Scelte di utilizzo e limiti
Allineamento e decorazione del testo: progetto e verifica.
Non sostituire un’informazione con un puro effetto grafico: una voce barrata può aver bisogno anche di una spiegazione testuale del suo stato. La trasformazione in maiuscolo è utile per brevi etichette, ma può ridurre la leggibilità di un intero paragrafo. Valuta l’effetto rispetto al ruolo del contenuto.
Esempio commentato
Allineamento e decorazione del testo: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Allineamento e decorazione del testo</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<section class="scheda"><h1>Un titolo centrato</h1><p>Il testo del paragrafo resta all’inizio.</p><a href="#fine">Vai alla fine</a></section>
<p id="fine">Fine</p>
</body>
</html>
File stile.css
.scheda { max-width: 30rem; border: 1px solid navy; padding: 1rem; }
h1 { text-align: center; }
a { text-decoration: underline; text-decoration-thickness: 2px; }
Risultato nel browser
Il titolo è centrato dentro la scheda; la scheda stessa non viene centrata da text-align.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
max-width | 30rem | Limite superiore alla larghezza. |
border | 1px solid navy | Abbreviazione per spessore, stile e colore del bordo. |
padding | 1rem | Spazio interno fra contenuto e bordo. |
text-align | center | Allineamento del contenuto inline nel blocco. |
text-decoration | underline | Decorazione del testo. |
text-decoration-thickness | 2px | Spessore della decorazione del testo. |
LABORATORIO
Sperimentare: Allineamento e decorazione del testo
Il titolo è centrato dentro la scheda; la scheda stessa non viene centrata da text-align.
Obiettivo: Comprendere e applicare allineamento e decorazione del testo 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 file stile.css 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: Applica text-transform: uppercase al solo titolo e osserva il sorgente HTML.
- 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 titolo appare maiuscolo, ma il suo contenuto HTML non viene riscritto.
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 titolo appare maiuscolo, ma il suo contenuto HTML non viene riscritto. |
| 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
Centra anche la scheda con margin-inline: auto conservando l’allineamento del solo titolo.
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.
.scheda { max-width: 30rem; margin-inline: auto; }
h1 { text-align: center; }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
Allineamento e decorazione del testo: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quale proprietà controlla l’allineamento del testo? ▾
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.