CSS – 2°
11) Gli pseudo-elementi
Vi sono parti in un documento HTML che non sono rappresentate da nessun elemento in particolare, ma che è possibile comunque modificare e formattare secondo i propri desideri con i CSS grazie ai cosiddetti pseudo-elementi. Il nome un po’ criptico può essere così spiegato: nel momento in cui in un foglio di stile si costruisce una regola che ad essi fa riferimento, è come se nel documento venissero inseriti nuovi elementi che hanno la caratteristica di essere appunto fittizi, presenti nel CSS ma non nel codice che definisce la struttura della pagina. Analizziamoli uno per uno.
:first-letter
Con questo selettore è possibile formattare la prima lettera di qualunque elemento contenente del testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini, ai bordi e al padding.
Sintassi ed esempi
La sintassi di tutti gli pseudo-elementi è soggetta alla stesse regole. La più importante è che essi non possono essere dichiarati da soli, ma vanno sempre collegati ad altri selettori.
Per tutte le regole usate negli snippet di codice, il testo degli elementi presenterà la prima lettera bianca e in grassetto.
Esempio:
:first-line
Imposta lo stile della prima riga di un elemento contenente del testo.
Sintassi ed esempi
Valgono le stesse regole generali viste per :first-letter.
Esempio:
:before, :after e il contenuto generato
Tra gli pseudo-elementi, quelli che meritano una menzione speciale e che hanno il più ampio utilizzo sono :before e :after. Grazie a questi pseudo-elementi è possibile inserire nel documento HTML un contenuto non presente nel documento stesso.
Più precisamente:
Quanto inserito con i due pseudo-elementi viene definito contenuto generato.
Spieghiamo meglio queste definizioni. Possiamo anzitutto indicare quale contenuto vada aggiunto grazie alla proprietà CSS content e può essere una semplice stringa di testo, un URL che punti a un’immagine o a un altro documento, un contatore numerico, semplici virgolette, il riferimento al valore di un attributo HTML identificato con un selettore di attributo.
Inoltre come vedremo, possiamo indicare anche un box generico al quale possono essere applicate svariate proprietà CSS. Quest’ultima opzione rende questa tecnica estremamente versatile e potente. Per un campionario di modi di utilizzo si faccia riferimento alla lista con gli approfondimenti posta in fondo a questa lezione.
Sintassi ed esempi
Finalmente scendiamo in dettaglio sul codice. La sintassi generica per l’uso di :before, :aftere del contenuto generato è questa:
Fin qui le basi. Verifichiamo ora come il contenuto generato possa essere formattato usando altre proprietà CSS. Inseriremo di nuovo un numero e il testo apparirà su un box largo e altro 30px; con lo sfondo rosso, sarà bianco e con una dimensione del testo di 22px:
Nell’ultima dimostrazione vediamo come creare dei box generici e formattati. Basterà lasciare vuoto il valore per la proprietà content, impostare un valore per la proprietà display e usare altre proprietà CSS per definire l’aspetto del box. Qui inseriamo un quadrato prima del titolo h3:
12 ) Ereditarietà,cascata,conflitti tra gli stili
Dopo aver imparato come si dichiarano a livello sintattico i costrutti base di un CSS e conosciuto i selettori, dobbiamo capire anche in che modo regole e proprietà interagiscono tra di loro nel contesto di un foglio di stile. Sono concetti teorici di importanza cruciale e propedeutici rispetto alle lezioni che seguono.
Ereditarietà
Il primo concetto è quello di ereditarietà. Secondo questo meccanismo le impostazioni di stile applicate ad un elemento vengono ereditate anche dai suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà.
Gli elementi li avranno perciò il testo bianco.
Esempio:
Non tutte le proprietà sono ereditate e lo renderemo esplicito nell’analisi di ciascuna di esse. In genere le proprietà non ereditate sono quelle attinenti la formattazione del box model: margini, bordi, padding, background le più importanti. Il motivo è semplice. Ereditare un bordo è semplicemente senza senso. Se ne imposto uno, diciamo, per un paragrafo sarebbe assurdo che un elemento a o un testo in grassetto vengano circondati dallo stesso bordo!
Fin qui tutto semplice. Ora scendiamo nei dettagli. L’ereditarietà non basta a spiegare le molteplici possibilità di relazione tra le regole di un CSS.
Peso e origine
Da qui in avanti affronteremo un’altra serie di concetti fondamentali tutti riconducibili comunque ad uno stesso ambito: i conflitti possibili tra gli stili e le regole. Tenteremo in pratica di rispondere a quesiti come questo: se definisco queste regole in un CSS
perché il testo del paragrafo sarà bianco e non nero? Perché il selettore di classe prevale su quello di tipo con l’elemento?
Esempio:
Il primo concetto da imparare per avere una risposta è quello di peso. Si riferisce alla maggiore o minore importanza da assegnare a ciascuna regola. Un primo criterio di importanza è dato dall’origine del foglio di stile. Quando visualizziamo una pagina HTML possono entrare in gioco nel modificare lo stile degli elementi tre diversi fogli di stile:
– foglio dell’autore;
– foglio dell’utente;
– foglio predefinito del browser.
In ordine di importanza avremo: foglio dell’autore, foglio dell’utente, foglio predefinito del browser.
Tutti i browser web consentono una gestione di questo aspetto. È possibile, ad esempio, far sì che il browser ignori i CSS definiti dall’autore delle pagine e formattare queste ultime con un CSS realizzato dall’utente. E ancora, come vedremo, è possibile modificare questa gerarchia con l’uso della parola chiave !important. Di base, però, l’ordine è quello definito qui sopra.
Specificità
La specificità, come il nome può suggerire, descrive il peso relativo delle varie regole all’interno di un foglio di stile. Esistono regole ben precise per calcolarla e sono quelle che applica un browser quando si trova davanti ad un CSS.
I fattori del calcolo sono tre e ciascuno di essi rappresenta il valore di una tripletta. Per prima cosa si conta il numero di selettori id presenti nella regola. Si passa quindi a verificare la presenza di classi e pseudo-classi. Infine si conta il numero di elementi definiti nella regola. Mai come in questo caso urge l’esempio. Prima regola:
0 id, 0 classi, un elemento. Tripletta: 0-0-1
Il peso specifico della prima regola è il maggiore. Quello dell’ultima il minore. In pratica: gli id pesano più delle classi che pesano più dei singoli elementi. Non commettete l’errore di valutare il numero più grande a prescindere dalla sua posizione. La regola che segue presenta la specificità 1-0-0:
Esempio:
Il concetto di cascata
Ed ora la summa di tutto quello cha abbiamo detto. Il concetto e il meccanismo della cascata spiegato con parole semplici. Tenteremo di ricostruire il procedimento di un browser quando incontra un foglio di stile e lo rende sul monitor del nostro computer.
– Per prima cosa controlla il target stabilito con l’attributo media o con dichiarazioni equivalenti. Scarta quindi tutti gli stili riferiti alla stampa o ad altri supporti. Allo stesso tempo scarta tutte le regole che non trovino corrispondenza negli elementi strutturali del documento.
– Comincia ad ordinare per peso e origine secondo le regole viste sopra. C’è un CSS definito dall’autore? Userà quello. Altrimenti verificherà la presenza di un foglio di stile utente e in sua assenza applicherà le sue regole stilistiche predefinite.
– Quindi calcola la specificità dei selettori e in caso di conflitto tra regole usa questo criterio di prevalenza.
– Se non ci sono conflitti o se peso, origine e specificità coincidono, viene applicata la regola più vicina all’elemento nel codice del documento. L’ordine, se le dichiarazioni degli stili sono fatte nell’ordine più corretto e logico, è quindi il seguente: gli stili in linea prevalgono su quelli incorporati che a loro volta prevalgono su quelli collegati.
Esempio:
Importanza
Ed ora il concetto di importanza. Semplice e lineare la regola: se una dichiarazione viene accompagnata dalla parola chiave !important essa balza al primo posto nell’ordine di applicazione a prescindere da peso, origine, specificità e ordine.
13) Il box model
Dopo aver preso in esame i selettori, è giunto il momento di iniziare l’analisi delle proprietà CSS. Prime però è necessario soffermarsi su un fondamentale argomento propedeutico: il box model.
Si tratta del meccanismo che governa la presentazione dei vari elementi di una pagina. Torniamo per un attimo alla lezione 2. Abbiamo lì mostrato che una pagina HTML non è altro che un insieme di box rettangolari, che si tratti di elementi blocco o di elementi inline.
Riassumiamo le caratteristiche peculiari di questi due tipi di elementi:
Elementi block-level
Un elemento block-level può contenere altri elementi block-level e anche elementi inline, mentre un elemento inline può contenere solo altri elementi inline.
Ad un elemento block-level si possono attribuire delle dimensioni.
Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l’altezza necessaria al suo contenuto.
Elementi inline
Ad un elemento inline, a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display, non si possono attribuire delle dimensioni.
Elementi inline adiacenti vengono disposti orizzontalmente, mentre elementi blocco vengono disposti verticalmente.
Un elemento inline occuperà sia in orizzontale che in verticale l’altezza necessaria al suo contenuto
Componenti del box model
Tutto l’insieme di regole che gestisce l’aspetto visuale degli elementi blocco viene in genere riferito, appunto, al cosiddetto box model.
Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS. La figura qui sotto mostra visivamente tali componenti:
Partendo dall’interno abbiamo:
L’area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio: testo, immagini, video, etc. Le dimensioni orizzontali dell’area possono essere modificate con la proprietà width. Quelle verticali con height.
Il padding. È uno spazio vuoto che può essere creato tra l’area del contenuto e il bordo dell’elemento. Come si vede nella figura, se si imposta un colore di sfondo per un elemento, esso si estende dall’area del contenuto alla zona di padding.
Il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l’area del contenuto.
Il margine. È uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.
Attenzione. Queste cose non sono state introdotte con i CSS, ma fanno parte del normale meccanismo di rendering di un documento HTML. Quando realizziamo una pagina HTML senza fogli di stile, è il browser ad applicare per alcune di queste proprietà le sue impostazioni predefinite. Per esempio, introdurrà un certo margine tra un titolo e un paragrafo o tra due paragrafi. Con i CSS possiamo controllare con precisione tutti questi aspetti andando a modificare le impostazioni di default applicate dal browser.
Regole di base del box model
Il box model è governato da una serie di regole di base concernenti la definizione di un box e il suo rapporto con gli altri elementi.
Larghezza del box
Bisogna distinguere tra tre concetti:
– la larghezza dell’area del contenuto;
– la larghezza complessiva;
– la larghezza dell’area visibile.
La prima è data dal valore della proprietà width.
La seconda corrisponde allo spazio occupato sulla pagina compresi i margini ed è data da questa somma:
Un div così definito, non occuperà sulla pagina una larghezza pari a 200px! Il valore di widthfa riferimento solo all’area del contenuto. Per calcolare la larghezza reale ed effettiva, bisognerà aggiungere ai 200px i valori per padding e bordi. Quindi: 10 + 5 + 200 + 10 + 5. Ovvero: 230px.
Modificare il calcolo delle dimensioni con box-sizing
Questo meccanismo è in effetti poco logico. Per fortuna i CSS3 hanno introdotto un modo per modificare, volendo, il comportamento standard del box model. Possiamo farlo attraverso la proprietà box-sizing. Basta questo piccolo snippet di codice:
In questo modo per tutti gli elementi la larghezza impostata con la proprietà width verrà calcolata inglobando i valori per il padding e i bordi. Nel caso visto in precedenza, la larghezza complessiva sarebbe pari a 200px, l’area del contenuto di 170px, perché al valore di widthandrebbero questa volta sottratti e non aggiunti i valori per padding e bordi.
Esempio:
Per tutti i dettagli si veda l’articolo Box model ‘naturale’ con border-box.
Larghezza ed elemento contenitore
Se non si imposta alcun valore per la proprietà width o se il valore usato è auto la larghezza di un box è uguale a quella dell’area del contenuto dell’elemento contenitore. Quest’ultimo è l’elemento che racchiude il box.
Esempio:
Uso del valore auto
Solo per tre proprietà è possibile impostare il valore auto: margini (margin), altezza (height) e larghezza (width). L’effetto dell’uso di auto è quello di lasciar calcolare al browser l’ammontare del valore per ciascuna di queste proprietà
Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.
Margini verticali e orizzontali tra gli elementi
Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. È il meccanismo del cosiddetto margin collapsing. Tale meccanismo non si applica ai box adiacenti in senso orizzontale.
Esempio:
14) Impostare l’altezza con i CSS: le proprietà heigt e overflow
Nelle prossime cinque lezioni vedremo come definire e controllare le diverse proprietà del box-model. In questa vedremo in che modo si impostano le dimensioni verticali di un elemento.
Un primo concetto fondamentale: in genere l’altezza di un elemento è determinata dal suo contenuto. Più testo inserisco in box più essi saranno estesi in senso verticale. Semplice. Le proprietà che analizzeremo servono, in pratica, a fornire un meccanismo in grado di controllare o superare in qualche modo questo comportamento standard.
La proprietà height
Questa proprietà definisce la distanza tra il bordo superiore e quello inferiore di un elemento. Non è ereditata e si applica a tutti gli elementi tranne:
– colonne di tabelle;
– elementi inline non rimpiazzati.
Sintassi ed esempi
Esempi:
La proprietà min-height
Imposta un’altezza minima per un elemento. Valgono per questa proprietà le stesse osservazioni fatte per height relativamente al contenuto. Non è ereditata.
Sintassi ed esempi
La proprietà max-height
La proprietà max-height serve a impostare l’altezza massima di un elemento. Anche per essa valgono le osservazioni già fatte per il contenuto eccedente. Non è ereditata.
Sintassi ed esempi
La proprietà overflow
Strettamente collegata alla proprietà height è la proprietà overflow. Essa fornisce un modo per gestire il contenuto che superi i limiti imposti con height. Serve infatti per definire il comportamento di un elemento blocco nel caso il suo contenuto ecceda dalle sue dimensioni esplicite, ossia nel caso in cui l’area utile del box non sia sufficiente per i contenuti. È da usare quando si vogliano creare box ad altezza fissa ma con molti contenuti. Si applica a tutti gli elementi blocco e non è ereditata.
Sintassi ed esempi
Esempi:
15) Impostare la larghezza con i CSS: la proprietà width
La definizione della larghezza, e più in generale la formattazione orizzontale degli elementi, è più problematica rispetto all’altezza e alla formattazione verticale. E prima di iniziare è utile richiamare i concetti di base visti nella lezione dedicata al box model.
Bisogna distinguere tra tre concetti:
– la larghezza dell’area del contenuto;
– la larghezza complessiva;
– la larghezza dell’area visibile.
La prima è data dal valore della proprietà width.
La seconda corrisponde allo spazio occupato sulla pagina compresi i margini ed è data da questa somma:
La proprietà width
Con la proprietà width, dunque, impostiamo la larghezza dell’area del contenuto di un box, esclusi padding e bordi.
Sintassi ed esempi
selettore: {width: valore; }
Il valore per width può corrispondere a:
– auto: valore iniziale e di default; se non si impostano margini, bordi e padding la larghezza dell’elemento sarà uguale all’area del contenuto dell’elemento contenitore;
– un valore numerico con unità di misura;
– un valore in percentuale: la larghezza sarà calcolata rispetto a quella dell’elemento contenitore.
La proprietà width non è ereditata.
Esempi:
La proprietà min-width
Imposta la larghezza minima di un elemento. Si applica a tutti gli elementi, tranne a quelli in linea non rimpiazzati e agli elementi di tabelle. Proprietà non ereditata.
Sintassi ed esempi
min-width può essere usata da sola o insieme alla proprietà width.
Se usata da sola, l’elemento a cui viene applicata non potrà assumere una larghezza inferiore al valore impostato, ma si estenderà orizzontalmente andando a coprire per intero la larghezza dell’elemento contenitore.
Se abbinata a width, bisogna innanzitutto badare a non usare per le due proprietà la stessa unità di misura: in questo caso prevale il valore espresso per width. Tipicamente, si usa definire una in px e l’altra in percentuale:
Questa proprietà trova il suo scenario d’uso più comune nella realizzazione di layout fluidi, per esempio per impedire che una colonna del layout diventi troppo stretta quando si restringe la finestra del browser.
Esempi:
La proprietà max-width
Imposta la larghezza massima di un elemento. Non è ereditata.
Sintassi ed esempi
Anche max-width è usata per lo più nell’ambito della costruzione dei layout. E anch’essa può essere usata da sola o abbinata a width. Gli effetti sono inversi a quelli prodotti da min-width. In questo caso l’elemento può assumere una larghezza inferiore rispetto al valore impostato ma non un valore superiore.
Esempi:
I enjoy rеading a post that can make men and women think.
Also, thanks for allowing for me to comment!
Тhis is very interesting, Yߋu are a very skilled bⅼogger.
I’ve joined уour feed and look forward to seeking moгe of your magnificent post.
Alѕo, I’ve shared yоur web site in my social networks!
Hi there, Ι enjoy reading all of your post. I wanted to write a
little comment to support ʏou.
E’ un blog meraviglioso. Una buona lettura. Ritornerò sicuramente.