033.1 Lezione 1

Il modo più semplice per modificare lo stile di un elemento specifico è quello di scriverlo direttamente nel tag dell’elemento usando l’attributo style. Tutti gli elementi HTML visibili permettono un attributo style, il cui valore può essere una o più regole CSS, note anche come proprietà. Iniziamo con un semplice esempio, un elemento paragrafo:

La sintassi di base di una proprietà CSS personalizzata è property: value, dove property è il particolare aspetto che vuoi cambiare nell’elemento e valore definisce la sostituzione dell’opzione di default fatta dal browser. Alcune proprietà si applicano a tutti gli elementi e alcune proprietà si applicano solo a elementi specifici. Allo stesso modo, ci sono valori appropriati da usare in ogni proprietà.

Per cambiare il colore del nostro semplice paragrafo, per esempio, usiamo la proprietà color. La proprietà color si riferisce al colore foreground, cioè il colore delle lettere nel paragrafo. Il colore stesso va nella parte del valore della regola e può essere specificato in molti formati diversi, inclusi nomi semplici come red, green, blue, yellow e così via. Quindi, per rendere la lettera del paragrafo purple, aggiungi la proprietà personalizzata color: purple all’attributo style dell’elemento:

Altre proprietà personalizzate possono andare nella stessa proprietà style, ma devono essere separate da punto e virgola. Se vuoi rendere la dimensione del carattere più grande, per esempio, aggiungi font-size: larger alla proprietà style:

Per vedere il risultato di queste modifiche, salvate il seguente HTML in un file e poi apritelo in un browser web (i risultati sono mostrati in Figure 1):

Puoi immaginare ogni elemento della pagina come un rettangolo o una scatola cui puoi modificare, tramite i CSS, proprietà geometriche e decorazioni. Il meccanismo di rendering usa due concetti standard di base per il posizionamento degli elementi: il posizionamento a blocco e il posizionamento in linea. Gli elementi a blocco occupano tutto lo spazio orizzontale del loro elemento padre e sono posizionati in modo sequenziale, dall’alto verso il basso. La loro altezza (la loro dimensione verticale, da non confondere con la loro posizione in alto nella pagina) dipende generalmente dalla quantità di contenuto che hanno. Gli elementi in linea seguono il metodo da sinistra a destra simile alle lingue scritte occidentali: gli elementi sono posizionati orizzontalmente, da sinistra a destra, fino a quando non c’è più spazio sul lato destro, dopodiché l’elemento continua su una nuova linea proprio sotto quella corrente. Elementi come p, div e section sono posizionati di default come blocchi, mentre elementi come span, em, a e singole lettere sono posizionati in linea. Questi metodi di posizionamento di base possono essere fondamentalmente modificati dalle regole CSS.

Il rettangolo corrispondente all’elemento p nel corpo del documento HTML di esempio sarà visibile se si aggiunge la proprietà background-color alla regola (Figure 2):

Man mano che aggiungi nuove proprietà CSS personalizzate all’attributo style, noterai che il codice complessivo inizia a diventare disordinato. Scrivere troppe regole CSS nell’attributo style mina la separazione tra struttura (HTML) e presentazione (CSS). Inoltre, ti renderai presto conto che molti stili sono condivisi tra diversi elementi e non è saggio ripeterli in ogni elemento.

Invece di applicare lo stile agli elementi direttamente nei loro attributi style, è molto più pratico indicare al browser l’intera collezione di elementi a cui si applica lo stile personalizzato. Lo facciamo aggiungendo un selettore alle proprietà personalizzate, abbinando elementi per tipo, classe, ID unico, posizione relativa e così via. La combinazione di un selettore e delle corrispondenti proprietà personalizzate — conosciuta anche come dichiarazione — è chiamata regola CSS. La sintassi di base di una regola CSS è selector { property: value }. Come nell’attributo style, le proprietà separate da punti e virgola possono essere raggruppate insieme, come in p { color: purple; font-size: larger }. Questa regola corrisponde a ogni elemento p nella pagina e applica le proprietà personalizzate color e font-size.

Una regola CSS di un elemento genitore corrisponderà automaticamente a tutti i suoi elementi figli. Questo significa che potremmo applicare le proprietà personalizzate a tutto il testo nella pagina, indipendentemente dal fatto che sia dentro o fuori un tag <p>, usando invece il selettore body: body { color: purple; font-size: larger }. Questa strategia ci libera dallo scrivere di nuovo la stessa regola per tutti i figli, ma potrebbe essere necessario scrivere regole aggiuntive per “annullare” o modificare le regole ereditate.

Il tag <style> ci permette di scrivere regole CSS all’interno della pagina HTML che vogliamo “stilizzare”. Permette al browser di differenziare il codice CSS dal codice HTML. Il tag <style> va nella sezione head del documento:

L’attributo type dice al browser che tipo di contenuto è dentro il tag <style>, cioè il suo MIME type. Poiché ogni browser che supporta i CSS assume che il tipo del tag <style> sia di default text/css, includere l’attributo type è opzionale. C’è anche un attributo media — schermi di computer o stampanti, per esempio — a cui si applicano le regole CSS nel tag <style>. Per impostazione predefinita, le regole CSS si applicano a qualsiasi supporto in cui il documento venga visualizzato.

Come nel codice HTML, le interruzioni di riga e l’indentazione del codice non cambiano il modo in cui le regole CSS sono interpretate dal browser. Quindi scrivere:

ha lo stesso risultato di scrivere:

I byte extra utilizzati dagli spazi e dalle interruzioni di riga fanno poca differenza nella dimensione finale del documento e non hanno un impatto significativo sul tempo di caricamento della pagina, quindi la scelta del layout è una questione di gusto. Nota il punto e virgola dopo l’ultima dichiarazione (font-size: larger;) della regola CSS. Quel punto e virgola non è obbligatorio, ma averlo lì rende più facile aggiungere un’altra dichiarazione nella riga successiva senza preoccuparsi dei punti e virgola mancanti.

Avere le dichiarazioni in linee separate aiuta anche quando hai bisogno di commentare una dichiarazione. Ogni volta che vuoi disabilitare temporaneamente una dichiarazione per ragioni di risoluzione dei problemi, per esempio, puoi racchiudere la linea corrispondente con /* e */:

o:

Scritta così, la dichiarazione font-size: larger sarà ignorata dal browser. Fai attenzione ad aprire e chiudere correttamente i commenti, altrimenti il browser potrebbe non essere in grado di interpretare le regole.

I commenti sono anche utili per scrivere promemoria sulle regole:

I promemoria come quello nell’esempio sono sacrificabili nei fogli di stile che contengono un piccolo numero di regole, ma sono essenziali per aiutare la navigazione dei fogli di stile con centinaia (o più) di regole.

Anche se l’attributo style e il tag <style> sono adeguati per testare stili personalizzati e utili per situazioni specifiche, non vengono usati comunemente. Invece, le regole CSS sono solitamente tenute in un file separato che può essere referenziato dal documento HTML.

Il metodo preferito per associare le definizioni CSS a un documento HTML è quello di memorizzare i CSS in un file separato. Questo metodo offre due vantaggi principali rispetto ai precedenti:

I file CSS hanno l’estensione .css e, come i file HTML, possono essere modificati con qualsiasi editor di testo semplice. A differenza dei file HTML, i file CSS non hanno una struttura di livello superiore costruita con tag gerarchici come <head> o <body>. Piuttosto, il file CSS è solo una lista di regole processate in ordine sequenziale dal browser. Le stesse regole scritte dentro un tag <style> potrebbero invece andare in un file CSS.

L’associazione tra il documento HTML e le regole CSS memorizzate in un file è definita solo nel documento HTML. Al file CSS non importa se esistono elementi che corrispondono alle sue regole, quindi non c’è bisogno di enumerare nel file CSS i documenti HTML a cui è collegato. Sul lato HTML, ogni foglio di stile collegato verrà applicato al documento, proprio come se le regole fossero scritte in un tag <style>.

Il tag HTML <link> definisce un foglio di stile esterno da usare nel documento corrente e dovrebbe andare nella sezione head del documento HTML:

Ora puoi mettere la regola per l’elemento p che abbiamo usato prima nel file style.css, e i risultati visti dal visitatore della pagina web saranno gli stessi. Se il file CSS non è nella stessa directory del documento HTML, specifica il suo percorso relativo o assoluto nell’attributo href. Il tag <link> può riferirsi a diversi tipi di risorse esterne, quindi è importante stabilire quale relazione ha la risorsa esterna con il documento corrente. Per i file CSS esterni, la relazione è definita da rel="stylesheet".

L’attributo media può essere usato nello stesso modo del tag <style>: indica i media, come gli schermi del computer o la stampa, ai quali si devono applicare le regole del file esterno.

I CSS possono cambiare completamente un elemento, ma è comunque importante usare l’elemento appropriato per i componenti della pagina. Questo dovrebbe evitare che le tecnologie assistive come gli screen-reader possano non essere in grado di identificare le sezioni corrette della pagina.