I blog di Alessioempoli

Data 3 dicembre 2016

CSS – 2°

Per ingrandire il testo, cliccare sul browser

Per ingrandire le foto, cliccarci sopra

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.

 

1-55k

 

Per tutte le regole usate negli snippet di codice, il testo degli elementi presenterà la prima lettera bianca e in grassetto.

 

Esempio:

 

2-42k

 

: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.

 

3-37k

Esempio:

 

4-56k

 

: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:

 

5-48k

 

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:

 

6-76k

 

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:

 

7-52k

 

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:

 

8-53k

 

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à.

 

9-68k

 

Gli elementi li avranno perciò il testo bianco.

 

Esempio:

 

10-47k

 

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

 

11-38k

 

perché il testo del paragrafo sarà bianco e non nero? Perché il selettore di classe prevale su quello di tipo con l’elemento?

Esempio:

 

12-44k

 

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:

 

13-39k

 

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:

 

14-32k

Esempio:

 

15-42k

 

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:

 

16-60k

 

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.

 

17-53k

 

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:

 

18-52k

 

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:

 

19-61k

 

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:

 

20-30k

 

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:

 

21-37k

 

22-43k

 

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:

 

24-41k

 

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

 

25-52k

Esempi:

 

26-53k

 

27-34k

 

28-31k

29-44k

 

30-50k

 

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

 

31-38k

 

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

 

32-42k

 

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

 

33-57k

Esempi:

 

34-56k

 

35-50k

 

36-49k

 

37-47k

 

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:

 

38-49k

 

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.

 

39-25k

Esempi:

 

40-43k

 

41-47k

 

42-53k

 

43-40k

 

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

 

44-42k

 

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:

 

45-27k

 

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:

 

46-57k

 

La proprietà max-width

Imposta la larghezza massima di un elemento. Non è ereditata.

Sintassi ed esempi

 

47-42k

 

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:

 

48-47k

 

 

3 Risposte a “CSS – 2°”

  1. coffee scrive:

    I enjoy rеading a post that can make men and women think.

    Also, thanks for allowing for me to comment!

  2. yell scrive:

    Т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!

  3. anticipate scrive:

    Hi there, Ι enjoy reading all of your post. I wanted to write a
    little comment to support ʏou.

Lascia una risposta