3 IL LINGUAGGIO CSS

Introduzione al linguaggio CSS

La sigla CSS è l’acronimo di ▶ Cascading Style Sheet che si traduce “fogli di stile a cascata”. Il nome fa riferimento sia alla possibilità di utilizzare i fogli di stile per definire l’estetica e la disposizione degli elementi nella pagina web, sia alla logica “a cascata” con cui vengono applicati gli stili ai diversi elementi.

La sequenza con la quale il browser esamina i tag contenuti nel documento HTML è definita dall’ordine con cui compaiono (flusso).

esempio

<h1>Gli stati di aggregazione della materia</h1> <img src="solido.jpg"> <p>Lo stato solido … </p> <img src="liquido.jpg"> <p>Lo stato liquido … </p> <img src="gassoso.jpg"> <p>Lo stato gassoso … </p>

Il CSS è utile per:

• definire l’estetica di una pagina web consentendo di “abbellire” il documento con colori, font ecc.
• disporre gli elementi nella pagina web, eventualmente alterando il suo normale flusso.

Le caratteristiche generali del linguaggio CSS

La sintassi del linguaggio CSS

La sintassi di un’istruzione CSS, in generale, è la seguente:

in cui il selettore identifica un particolare elemento al quale vengono riferite le dichiarazioni elencate all’interno delle parentesi graffe. Nell’ambito di ciascuna dichiarazione a ogni proprietà viene assegnato uno specifico valore.

In generale, un selettore può essere:

• un tag: come spiegheremo nei prossimi esempi;
• un identificatore: cioè un nome univoco che viene dato a un unico tag presente nella pagina;
• una classe: cioè un nome che viene dato a una particolare categoria di tag.

I commenti nel linguaggio CSS

I commenti del linguaggio CSS iniziano con /* e terminano con */ e, come i commenti del linguaggio HTML, possono estendersi anche su più righe di codice.

Per esempio si scrive:

/* Questo è un commento */

Dove inserire il codice CSS

Il codice CSS può essere inserito negli attributi, nella head o in un file esterno.

Il CSS negli attributi

Quando lo stile deve essere applicato a un solo tag presente nella pagina, per esempio a un solo paragrafo, il CSS può essere inserito direttamente nell’attributo style.

Quando invece lo stile deve essere applicato solo localmente, per esempio a una singola parola contenuta in un tag, occorre “isolare” la parola e inserire l’attributo style nel tag di apertura.

esempio

Il CSS nella head

Quando è necessario applicare lo stesso stile a tutti tag dello stesso tipo, per esempio a tutti i paragrafi della pagina HTML, si deve inserire il CSS all’interno della head. 

esempio

Modifichiamo il testo del precedente esempio facendo in modo che tutti i paragrafi siano rossi.

Il CSS negli attributi

Per applicare lo stesso stile a tutti i tag dello stesso tipo di tutte le pagine del sito, per esempio a tutti i paragrafi di tutte le pagine HTML, occorre inserire il CSS all’interno di un file esterno.

Per convenzione, il file di testo che contiene il CSS si chiama style.css e deve essere salvato nella cartella che contiene il sito web. Nel file esterno vengono elencate, semplicemente, una dopo l’altra tutte le regole di stile in linguaggio CSS.

Occorre fare in modo che tutte le pagine del sito facciano riferimento al file CSS per attingere le regole di stile, questo si ottiene utilizzando il tag che deve essere inserito nella head di tutte le pagine HTML che si desidera collegare al foglio di stile.

L’istruzione da scrivere nella pagina HTML per collegare il file CSS è:

<link rel="stylesheet" type="text/css" href="style.css">

dove:

• nell’attributo rel: viene specificato che il file collegato alla pagina è un foglio di stile;
• nell’attributo type: viene detto che il foglio di stile è scritto in linguaggio CSS;
• nell’attributo href: viene inserito il nome del file che contiene gli stili CSS che devono essere utilizzati in tutto il sito web.

Il CSS misto

Le istruzioni CSS possono essere presenti contemporaneamente negli attributi, nella head e nel file esterno.

In caso di conflitto, cioè nel caso in cui allo stesso tag vengano applicati più stili diversi, esiste un criterio di precedenza dettato dall’ordine con cui il codice CSS viene scritto, perché è lo stesso ordine con cui il browser legge e interpreta le istruzioni. Questo criterio viene chiamato cascading.

L’ultima lettura del browser “sovrascrive” le letture precedenti quindi si potrebbe pensare che prevalga sempre il codice CSS più “interno”, cioè prima quello scritto negli attributi, poi quello nella head e infine quello nel file esterno. Tuttavia non sempre è così.

La gestione dei colori nei linguaggi del web

La codifica dei colori

Nei linguaggi del web è possibile far riferimento a un colore usando:

• il nome in inglese: in questo modo è possibile fare un rapido e semplice riferimento ai colori principali (red, green, blue, cyan, yellow, black, white, gray, orange ecc.). Tuttavia non è possibile usare l’intera gamma di colori disponibili, perché non esiste un nome per ciascuno;
• una codifica RGB decimale: che esprime i colori facendo variare tra 0 e 255 i valori delle tre componenti RGB (→ unità 3);
• una codifica RGB esadecimale: nella quale il valore numerico di ciascuna componente RGB del colore viene espresso in base esadecimale con la seguente sintassi: #RRGGBB.

I colori ottenuti modificando l’opacità

Il colore può essere ottenuto anche utilizzando la notazione RGBA, che consente di applicare una percentuale di opacità del canale alfa, compresa tra 0 (trasparente) e 1 (opaco), ai colori del modello RGB.

esempio

Il rosa può essere ottenuto dal rosso, applicando un’opportuna percentuale di opacità.

Le sfumature di grigio

Le diverse sfumature di grigio sono definite usando valori uguali per tutte e tre le componenti RGB.

Nella tabella seguente sono indicati alcuni esempi.

L’uso dei colori nel linguaggio CSS

I colori possono essere applicati principalmente a:

• testo;
• sfondo;
• bordo.

esempio

Scriviamo le istruzioni per applicare il colore a testo, sfondo e bordo.

Una delle grandi potenzialità del linguaggio CSS è che la stessa proprietà (per esempio background-color) può essere applicata con la stessa sintassi a qualunque elemento della pagina (h1, p, div, tabella, body ecc.).

L’uso delle immagini di sfondo

Le immagini possono essere applicate come sfondo sia al body, sia agli altri tag.

Per inserire un’immagine di sfondo si usa la proprietà background-image.

È buona norma che l’immagine di sfondo (o il colore di sfondo) utilizzata non disturbi la lettura del testo.

esempio

Ripetizione dell’immagine di sfondo

Se inseriamo un’immagine di sfondo, per esempio al body, di default viene ripetuta sia orizzontalmente sia verticalmente, ma talvolta l’effetto che si ottiene è quello di una ripetizione frammentata e quindi sgradevole.

Per evitare questo inconveniente è possibile ripetere l’immagine solo orizzontalmente (repeat-x) o solo verticalmente (repeat-y) usando la proprietà background-repeat.

esempio

Se invece vogliamo inserire l’immagine di sfondo una sola volta dobbiamo eliminare la ripetizione inserendo il valore no-repeat nella proprietà background-repeat.

L’uso dei bordi

I bordi possono essere applicati a qualunque elemento della pagina (body, paragrafi, immagini ecc.).

Esistono diverse istruzioni per poter effettuare questa operazione, di seguito descriviamo l’istruzione abbreviata perché è la più semplice da ricordare.

L’istruzione abbreviata per l’inserimento dei bordi

Nell’istruzione abbreviata, all’interno della proprietà border, vengono specificati tutti i valori del bordo, cioè:

• spessore;
• stile;
• colore.

esempio

Applichiamo al body un bordo spesso 5 pixel, con linea continua e di colore arancione.

Osservando l’esempio possiamo notare che nel browser, il bordo non viene applicato a tutta la finestra, cosa che ci saremmo potuti aspettare, alla luce di quanto è stato detto finora.

Il body, infatti, finisce dove finisce la finestra del browser solo in alto, a sinistra e a destra, mentre in basso finisce dove finiscono gli elementi inseriti nella pagina (testo, immagini ecc.).

Con la stessa sintassi mostrata nell’esempio è possibile applicare il bordo anche, per esempio, a un paragrafo o a un’intestazione.

Inoltre, specificando a quale dei quattro bordi si fa riferimento (▶ top, right, ▶ bottom, left) è possibile impostare le proprietà di un singolo lato del bordo.

esempio

Modifichiamo il testo dell’esempio precedente aggiungendo il bordo sinistro all’intestazione e i bordi superiore e inferiore al paragrafo.

L’aspetto del bordo

L’aspetto del bordo può essere cambiato modificando lo stile del bordo nella proprietà border; i valori più comuni sono raccolti nella seguente tabella.

I bordi misti

È possibile creare bordi misti, specificando, a partire dall’alto in senso orario (quindi alto, destra, basso, sinistra), i valori delle proprietà border-widht (che indica lo spessore), border-style (che indica lo stile) e border-color (che indica il colore) dei singoli bordi.

esempio

I bordi arrotondati

Per creare bordi arrotondati si usa la proprietà border-radius, il cui valore è espresso in pixel. Maggiore è il valore inserito, maggiore è l’arrotondamento.

esempio

Il CSS box model

Tutti gli elementi inseriti all’interno di una pagina possono essere considerati come se fossero dei rettangoli (box).

Il CSS box model è un modello di riferimento che stabilisce che ogni elemento di una pagina web è un rettangolo composto da quattro parti:

• content: è costituito dall’area rettangolare (content area) utilizzata per inserire il contenuto (per esempio testo, immagini, un altro tag ecc). Normalmente si estende fino al bordo, ma in presenza di padding finisce prima;
• padding: è l’”imbottitura” che si trova tra il contenuto e il bordo del rettangolo;
• border: è il bordo del rettangolo;
• margin: è lo spazio vuoto che si trova tra il bordo e gli elementi esterni adiacenti al rettangolo (per esempio i bordi della pagina, un altro rettangolo ecc.).

Si possono definire le dimensioni del content area impostando i valori delle proprietà width (larghezza) e height (altezza). Così come è possibile modificare gli altri spessori intervenendo sulle proprietà CSS corrispondenti.

Le proprietà margin e padding

Margin e padding sono impostabili per tutto il rettangolo o solo su alcuni lati.

Per impostare margini identici sui quattro lati dell’elemento si attribuisce un unico valore alla proprietà margin.

Per impostare un margine diverso su ciascun lato dell’elemento si usano le proprietà: margin-top, margin-right, margin-bottom e margin-left.

Analogamente, per impostare padding identici sui quattro lati dell’elemento si attribuisce un unico valore alla proprietà padding.

Per impostare un padding diverso su ciascun lato dell’elemento si usano le proprietà: padding-top, padding-right, padding-bottom e padding-left.

esempio

Impostiamo valori diversi delle proprietà margin e padding al div dell’esempio precedente.

La formattazione del testo

Il linguaggio CSS consente di applicare al testo diverse formattazioni:

• colore: deve tenere conto del background-color per garantire la leggibilità;
• allineamento: come nei programmi di videoscrittura, sono previsti l’allineamento del testo a sinistra, al centro, a destra o giustificato (rispetto al rettangolo più interno);
• decorazione: sono previsti vari tipi di decorazione. In generale, è meglio riservare la sottolineatura solo ai link per evitare ambiguità interpretative;
• trasformazione: forza i caratteri a essere maiuscoli o minuscoli;
• rientro: specifica il rientro della prima riga di un testo;
• spaziatura dei caratteri: aumenta o diminuisce lo spazio tra i caratteri;
• interlinea: aumenta o diminuisce lo spazio tra le righe;
• spaziatura delle parole: aumenta o diminuisce lo spazio tra le parole;
• ombreggiatura: specifica la posizione orizzontale e verticale e il colore dell’ombra;
• font: specifica il nome del font da usare, se questo è composto da più parole va scritto tra virgolette (per esempio “Times New Roman”);
• stile: definisce lo stile del testo con le proprietà font-style (che specifica se il testo è corsivo) e font-weight (che specifica se il testo è grassetto);
• dimensione: specifica la grandezza del testo;
• maiuscoletto: trasforma il testo in maiuscoletto.

Nella seguente tabella sono raccolti alcuni esempi d’uso delle proprietà per applicare al testo le diverse formattazioni.

Gli elementi block e gli elementi inline

Ogni elemento della pagina HTML ha un valore di visualizzazione predefinito che può essere block o inline.

Gli elementi block iniziano sempre su una nuova riga e la occupano tutta.

A un elemento block è possibile applicare una larghezza (width), un’altezza (height), i margini (margin) e il padding. In alcuni casi queste modifiche possono spostare l’elemento, posizionandolo in una zona diversa della pagina, evitando però le sovrapposizioni con gli altri elementi. Sono elementi block, per esempio:

• <h1> ... <h6>
• <p>
• <ol> <ul>
• <div>
• <table>
• <hr>

Gli elementi inline iniziano sulla stessa riga e occupano solo la larghezza necessaria.

A un elemento inline è possibile applicare solo il padding e i margini sinistro o destro. La larghezza (width) e l’altezza (height) non sono impostabili e corrispondono a quelle del contenuto del rettangolo. Qualunque modifica venga fatta (per esempio il padding), l’elemento non si sposta all’interno della pagina e quindi possono nascere sovrapposizioni con gli altri elementi. Sono elementi inline, per esempio:

• <a>
• <b> <strong>
• <br>
• <img>
• <span>
• <i> <em>
• <u> <s>
• <sub> <sup>

Il singolo elemento inline non occupa tutta la riga, ma si posiziona sulla destra dell’elemento inline precedente e va a capo solo se sulla riga è finito lo spazio.

Modificando il valore della proprietà display è possibile forzare un elemento block a comportarsi come un elemento inline e viceversa.

• Elementi block: display: block; (default) → display: inline;
• Elementi inline: display: inline; (default) → display: block;

Esempio di utilizzo degli elementi block

Creiamo una pagina HTML con uno sfondo rosso e inseriamo al suo interno un paragrafo con sfondo bianco. Poiché il paragrafo è un elemento di tipo block, lo sfondo bianco arriva fino alla fine della riga.

Esempio di utilizzo degli elementi inline

Creiamo una pagina HTML con uno sfondo rosa e inseriamo al suo interno un testo con stile grassetto su uno sfondo bianco. Lo sfondo bianco arriva solo fino al termine del testo perché il tag <b> è un elemento di tipo inline.

• inserendo il tag <br> tra i tag <b>: il secondo testo in grassetto va a capo ma i due elementi non occupano l’intera riga;
• cambiando il valore di visualizzazione del tag <b> in block: usando la proprietà display: block; i due testi in grassetto occupano, ciascuno, un’intera riga e quindi il secondo testo va a capo.

Gli identificatori e le classi

L’identificatore

L’identificatore è un nome che viene attribuito a un unico tag per identificarlo univocamente.

Per attribuire un nome a un tag HTML prescelto, si inserisce l’attributo id nel tag di apertura. Il valore dell’attributo corrisponde al nome univoco che si vuole assegnare.

Il simbolo #, nel linguaggio CSS, permette di usare il nome come selettore al quale riferire le dichiarazioni elencate fra parentesi graffe. In questo modo è possibile applicare le proprietà CSS solo al tag identificato dal nome univoco.

esempio

Applichiamo il colore rosso e lo sfondo lime solo al paragrafo identificato dal nome “frase”.

La classe

La classe è un nome che viene dato a una particolare categoria di tag identificati con l’attributo class.

Per attribuire una classe ai tag HTML prescelti, si inserisce l’attributo class nei tag di apertura. Il valore dell’attributo corrisponde al nome della classe.

Il simbolo . (punto), nel linguaggio CSS, permette di usare il nome della classe come selettore al quale riferire le dichiarazioni elencate fra parentesi graffe. In questo modo è possibile applicare le proprietà CSS solo ai tag che appartengono alla classe.

esempio

Applichiamo il colore blu e lo sfondo rosa solo ai tag che appartengono alla classe chiamata “gruppo”.

I box flessibili

I box flessibili (flexbox) sono uno degli strumenti che il linguaggio CSS mette a disposizione degli sviluppatori per strutturare il layout di una pagina HTML.

Il modello dei box flessibili prevede la definizione di un elemento contenitore all’interno del quale vengono inseriti gli elementi flessibili.

esempio

Creiamo un elemento contenitore con sfondo giallo e due elementi flessibili con bordo rispettivamente nero e rosso.

All’elemento contenitore vengono applicate due proprietà:

• la proprietà display con valore flex: per rendere il box flessibile;
• la proprità flex-direction: per definire la direzione e l’ordine con cui si dispongono gli elementi flessibili all’interno del contenitore (vedi tabella).

Direzione/Ordine	Dichiarazione	Risultato
per righe da sinistra a destra	flex-direction: row;
per righe da destra a sinistra	flex-direction: row-reverse;
per colonne dall’alto al basso	flex-direction: column;
per colonne dal basso verso l’alto	flex-direction: column-reverse;

Il layout delle pagine web

I siti responsivi

La grande diffusione dei dispositivi mobili (tablet e smartphone) e la crescente tendenza delle persone a navigare in Internet usando questi supporti ha spinto gli sviluppatori a creare dei siti web che rispondano diversamente in base al dispositivo su cui vengono visualizzati.

Si tratta dei siti ▶web responsivi, che cambiano le caratteristiche degli elementi della pagina web (talvolta facendoli scomparire) per adattarsi automaticamente alle dimensioni degli schermi, rendendo comoda la navigazione indipendentemente dal fatto che la visualizzazione venga fatta su PC, tablet o smartphone.

Per iniziare a familiarizzare con il funzionamento dei siti responsivi, applichiamo la proprietà flex-wrap agli elementi contenitore (box flessibili).

Di default la proprietà flex-wrap non viene applicata e, in assenza di specificazioni differenti, ha valore nowrap.

Consideriamo nuovamente l’esempio dei box flessibili, se non viene specificato diversamente, il codice dell’elemento contenitore è equivalente al seguente, in cui compare anche la proprietà flex-wrap:

#contenitore{

background-color: yellow;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

}

Riducendo la larghezza della finestra del browser, i div contenuti nella pagina possono a loro volta ridursi, fino a essere tagliati a seconda delle dimensioni dei div e dell’impostazione della proprietà flex-direction (per esempio con width: 600; e flex-direction: row; i div si restringono sulla stessa riga; con flex-direction: column; i div vengono incolonnati e tagliati sulla destra).

Per attribuire agli elementi della pagina un semplice comportamento responsivo (che cambia in base allo spazio disponibile sulla riga) è sufficiente impostare la disposizione orizzontale dei box e cambiare il valore di flex-wrap:

flex-direction: row;

flex-wrap: wrap;

Con questa impostazione, riducendo la larghezza della finestra, appena lo spazio sulla riga diventa insufficiente, i div più a destra vengono mandati a capo.

La disposizione dei box flessibili può essere invertita cambiando valore alla proprietà flex-wrap:

flex-direction: row;

flex-wrap: wrap-reverse;

In questo modo i div vengono visualizzati in ordine crescente sulla riga. Quando la larghezza della finestra viene ridotta, i div vengono mandati a capo e visualizzati con ordine invertito.

Nello sviluppo di siti web, la conoscenza dei linguaggi HTML e CSS costituisce solo un primo passo. L’interazione con l’utente e la possibilità di generare pagine che cambiano come conseguenza di questa interazione possono essere implementate solo utilizzando altri linguaggi.