Tecnologie e Progettazione di Sistemi Informatici e di Telecomunicazioni
Obiettivo: comprendere come il CSS controlla la presentazione degli elementi HTML, leggere e scrivere regole di stile, utilizzare i selettori più comuni e distinguere contenuto, padding, bordo e margine.
4. CSS: il linguaggio della presentazione
Nella lezione precedente abbiamo costruito la struttura di una pagina con HTML5. Titoli, paragrafi e sezioni sono presenti, ma il browser li mostra inizialmente con un aspetto essenziale. Per decidere colori, caratteri, spazi e disposizione degli elementi utilizziamo CSS, acronimo di Cascading Style Sheets, cioè “fogli di stile a cascata”.
La distinzione è importante: HTML descrive il contenuto e il suo significato; CSS stabilisce come quel contenuto viene visualizzato. Lo stesso documento HTML può assumere aspetti molto diversi modificando soltanto il foglio di stile.
4.1 Come si scrive una regola CSS
Una regola CSS inizia con un selettore, che individua gli elementi a cui applicare lo stile. Tra parentesi graffe si scrivono una o più dichiarazioni: ogni dichiarazione associa una proprietà al relativo valore.
h1 {
color: blue;
font-size: 32px;
}
In questo esempio h1 è il selettore: la regola riguarda tutti i titoli di primo livello. La proprietà color rende blu il testo, mentre font-size imposta una dimensione di 32 pixel. I due punti separano proprietà e valore; il punto e virgola conclude ciascuna dichiarazione. Le parentesi graffe delimitano la regola.
Il modo più ordinato per lavorare è inserire le regole in un file separato, per esempio stile.css, e collegarlo al documento HTML nella sezione <head>:
<link rel=”stylesheet” href=”stile.css”>
Quando il browser carica la pagina, legge il documento HTML e applica le regole del foglio di stile collegato.
4.2 I selettori principali
I selettori consentono di decidere con precisione quali elementi modificare. Alcuni agiscono su tutti gli elementi di un certo tipo; altri individuano elementi che condividono una classe oppure un identificatore specifico.
| Tipo | Esempio | Effetto |
| Elemento | p { color: navy; } | Tutti i paragrafi <p> |
| Classe | .evidenziato { color: red; } | Elementi con class=”evidenziato” |
| ID | #saluto { font-size: 24px; } | Elemento con id=”saluto” |
| Pseudo-classe | button:hover { color: orange; } | Pulsante mentre il puntatore è sopra |
Una classe può essere attribuita a più elementi, mentre il valore di id deve essere unico nel documento. Per questo una classe è adatta a stili riutilizzabili; un ID serve a identificare un elemento preciso. La pseudo-classe :hover applica la regola soltanto quando il puntatore si trova sull’elemento.
<p class=”evidenziato”>Messaggio importante</p>
<p id=”saluto”>Benvenuti!</p>
4.3 Le proprietà CSS più utilizzate
Una proprietà rappresenta una caratteristica grafica. Per iniziare sono sufficienti poche proprietà, che possono essere combinate per ottenere una pagina leggibile e ordinata.
| Proprietà | Funzione | Esempio |
| color | Colore del testo | color: red; |
| background-color | Colore dello sfondo | background-color: #f0f4f8; |
| font-family | Famiglia di caratteri | font-family: Verdana; |
| font-size | Dimensione del testo | font-size: 18px; |
| text-align | Allineamento del testo | text-align: center; |
| margin | Spazio esterno | margin: 20px; |
| padding | Spazio interno | padding: 10px; |
| border | Bordo dell’elemento | border: 2px solid black; |
| border-radius | Arrotondamento degli angoli | border-radius: 10px; |
I colori possono essere indicati con nomi come red e blue oppure con codici esadecimali, per esempio #f0f4f8. L’unità px esprime una misura in pixel CSS. Le proprietà margin e padding, apparentemente simili, agiscono invece in due zone diverse: lo vediamo nel box model.
4.4 Il box model
Il browser rappresenta ogni elemento come una scatola rettangolare. Dall’interno verso l’esterno si distinguono quattro zone: il contenuto, il padding, il border e il margin. Comprendere queste aree permette di gestire correttamente distanze e ingombri.
Contenuto (content): È il testo, l’immagine o l’altro contenuto dell’elemento.
Padding: È lo spazio tra contenuto e bordo; fa parte dell’area interna dell’elemento.
Border: È la linea che circonda contenuto e padding.
Margin: È lo spazio esterno al bordo che separa l’elemento dagli altri.
section {
background-color: white;
padding: 20px;
border: 2px solid #1f4e79;
margin: 20px;
border-radius: 10px;
}
In questa regola il testo della sezione resta separato dal bordo grazie a 20 px di padding; il margine di 20 px crea invece distanza rispetto agli elementi vicini. Il bordo è spesso 2 px e gli angoli sono arrotondati.
Nota tecnica: con il valore predefinito box-sizing: content-box, larghezza e altezza dichiarate riguardano soltanto il contenuto; padding e bordo si aggiungono alle dimensioni complessive. È un dettaglio utile quando si inizia a progettare l’impaginazione.
Attività guidata in laboratorio
Riprendi la pagina HTML di presentazione realizzata nella prima lezione. Crea nella stessa cartella il file stile.css e collegalo con <link>. Inserisci quindi le seguenti regole e osserva il risultato aggiornando il browser.
body { font-family: Verdana, sans-serif; background-color: #f0f4f8; }
header { background-color: #1f4e79; color: white; text-align: center; padding: 20px; }
section { background-color: white; margin: 20px; padding: 15px; border-radius: 10px; }
.evidenziato { color: #c00000; }
Verifica: modifica il colore dell’intestazione, aumenta il padding di una sezione e applica la classe evidenziato a due paragrafi diversi. Spiega a voce quale modifica interessa il contenuto HTML e quale riguarda esclusivamente la sua presentazione.
