{"id":2031,"date":"2026-10-12T15:33:17","date_gmt":"2026-10-12T13:33:17","guid":{"rendered":"https:\/\/www.vr-m.it\/sito\/?p=2031"},"modified":"2026-10-12T15:36:50","modified_gmt":"2026-10-12T13:36:50","slug":"css-laspetto-delle-pagine-web","status":"publish","type":"post","link":"https:\/\/www.vr-m.it\/sito\/2026\/10\/12\/css-laspetto-delle-pagine-web\/","title":{"rendered":"2. CSS: l\u2019aspetto delle pagine web"},"content":{"rendered":"

Tecnologie e Progettazione di Sistemi Informatici e di Telecomunicazioni<\/p>\n

Obiettivo: comprendere come il CSS controlla la presentazione degli elementi HTML, leggere e scrivere regole di stile, utilizzare i selettori pi\u00f9 comuni e distinguere contenuto, padding, bordo e margine.<\/p>\n

4. CSS: il linguaggio della presentazione<\/h1>\n

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\u00e8 \u201cfogli di stile a cascata\u201d.<\/p>\n

La distinzione \u00e8 importante: HTML descrive il contenuto e il suo significato; CSS stabilisce come quel contenuto viene visualizzato. Lo stesso documento HTML pu\u00f2 assumere aspetti molto diversi modificando soltanto il foglio di stile.<\/p>\n

4.1 Come si scrive una regola CSS<\/h1>\n

Una regola CSS inizia con un selettore, che individua gli elementi a cui applicare lo stile. Tra parentesi graffe si scrivono una o pi\u00f9 dichiarazioni: ogni dichiarazione associa una propriet\u00e0 al relativo valore.<\/p>\n

h1 {
\ncolor: blue;
\nfont-size: 32px;
\n}<\/p>\n

In questo esempio h1 \u00e8 il selettore: la regola riguarda tutti i titoli di primo livello. La propriet\u00e0 color rende blu il testo, mentre font-size imposta una dimensione di 32 pixel. I due punti separano propriet\u00e0 e valore; il punto e virgola conclude ciascuna dichiarazione. Le parentesi graffe delimitano la regola.<\/p>\n

Il modo pi\u00f9 ordinato per lavorare \u00e8 inserire le regole in un file separato, per esempio stile.css, e collegarlo al documento HTML nella sezione <head>:<\/p>\n

<link rel=”stylesheet” href=”stile.css”><\/p>\n

Quando il browser carica la pagina, legge il documento HTML e applica le regole del foglio di stile collegato.<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

4.2 I selettori principali<\/h1>\n

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.<\/p>\n\n\n\n\n\n\n\n
Tipo<\/strong><\/td>\nEsempio<\/strong><\/td>\nEffetto<\/strong><\/td>\n<\/tr>\n
Elemento<\/strong><\/td>\np { color: navy; }<\/td>\nTutti i paragrafi <p><\/td>\n<\/tr>\n
Classe<\/strong><\/td>\n.evidenziato { color: red; }<\/td>\nElementi con class=”evidenziato”<\/td>\n<\/tr>\n
ID<\/strong><\/td>\n#saluto { font-size: 24px; }<\/td>\nElemento con id=”saluto”<\/td>\n<\/tr>\n
Pseudo-classe<\/strong><\/td>\nbutton:hover { color: orange; }<\/td>\nPulsante mentre il puntatore \u00e8 sopra<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Una classe pu\u00f2 essere attribuita a pi\u00f9 elementi, mentre il valore di id deve essere unico nel documento. Per questo una classe \u00e8 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\u2019elemento.<\/p>\n

<p class=”evidenziato”>Messaggio importante<\/p>
\n<p id=”saluto”>Benvenuti!<\/p><\/p>\n

4.3 Le propriet\u00e0 CSS pi\u00f9 utilizzate<\/h1>\n

Una propriet\u00e0 rappresenta una caratteristica grafica. Per iniziare sono sufficienti poche propriet\u00e0, che possono essere combinate per ottenere una pagina leggibile e ordinata.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Propriet\u00e0<\/strong><\/td>\nFunzione<\/strong><\/td>\nEsempio<\/strong><\/td>\n<\/tr>\n
color<\/strong><\/td>\nColore del testo<\/td>\ncolor: red;<\/td>\n<\/tr>\n
background-color<\/strong><\/td>\nColore dello sfondo<\/td>\nbackground-color: #f0f4f8;<\/td>\n<\/tr>\n
font-family<\/strong><\/td>\nFamiglia di caratteri<\/td>\nfont-family: Verdana;<\/td>\n<\/tr>\n
font-size<\/strong><\/td>\nDimensione del testo<\/td>\nfont-size: 18px;<\/td>\n<\/tr>\n
text-align<\/strong><\/td>\nAllineamento del testo<\/td>\ntext-align: center;<\/td>\n<\/tr>\n
margin<\/strong><\/td>\nSpazio esterno<\/td>\nmargin: 20px;<\/td>\n<\/tr>\n
padding<\/strong><\/td>\nSpazio interno<\/td>\npadding: 10px;<\/td>\n<\/tr>\n
border<\/strong><\/td>\nBordo dell\u2019elemento<\/td>\nborder: 2px solid black;<\/td>\n<\/tr>\n
border-radius<\/strong><\/td>\nArrotondamento degli angoli<\/td>\nborder-radius: 10px;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

I colori possono essere indicati con nomi come red e blue oppure con codici esadecimali, per esempio #f0f4f8. L\u2019unit\u00e0 px esprime una misura in pixel CSS. Le propriet\u00e0 margin e padding, apparentemente simili, agiscono invece in due zone diverse: lo vediamo nel box model.<\/p>\n

4.4 Il box model<\/h1>\n

Il browser rappresenta ogni elemento come una scatola rettangolare. Dall\u2019interno verso l\u2019esterno si distinguono quattro zone: il contenuto, il padding, il border e il margin. Comprendere queste aree permette di gestire correttamente distanze e ingombri.<\/p>\n

Contenuto (content): <\/strong>\u00c8 il testo, l\u2019immagine o l\u2019altro contenuto dell\u2019elemento.<\/p>\n

Padding: <\/strong>\u00c8 lo spazio tra contenuto e bordo; fa parte dell\u2019area interna dell\u2019elemento.<\/p>\n

Border: <\/strong>\u00c8 la linea che circonda contenuto e padding.<\/p>\n

Margin: <\/strong>\u00c8 lo spazio esterno al bordo che separa l\u2019elemento dagli altri.<\/p>\n

section {
\nbackground-color: white;
\npadding: 20px;
\nborder: 2px solid #1f4e79;
\nmargin: 20px;
\nborder-radius: 10px;
\n}<\/p>\n

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 \u00e8 spesso 2 px e gli angoli sono arrotondati.<\/p>\n

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. \u00c8 un dettaglio utile quando si inizia a progettare l\u2019impaginazione.<\/p>\n

Attivit\u00e0 guidata in laboratorio<\/h1>\n

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.<\/p>\n

body { font-family: Verdana, sans-serif; background-color: #f0f4f8; }
\nheader { background-color: #1f4e79; color: white; text-align: center; padding: 20px; }
\nsection { background-color: white; margin: 20px; padding: 15px; border-radius: 10px; }
\n.evidenziato { color: #c00000; }<\/p>\n

Verifica: modifica il colore dell\u2019intestazione, 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.<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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\u00f9 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 … <\/p>\n

Leggi tutto “2. CSS: l\u2019aspetto delle pagine web”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2033,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[66],"class_list":["post-2031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informatica","tag-tpsit"],"_links":{"self":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts\/2031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/comments?post=2031"}],"version-history":[{"count":2,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts\/2031\/revisions"}],"predecessor-version":[{"id":2047,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/posts\/2031\/revisions\/2047"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/media\/2033"}],"wp:attachment":[{"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/media?parent=2031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/categories?post=2031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vr-m.it\/sito\/wp-json\/wp\/v2\/tags?post=2031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}