CSS – 1°
Introduzione
L’acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e designa un linguaggio di stile per i documenti web. I CSS istruiscono un browser o un altro programma utente su come il documento debba essere presentato all’utente, per esempio definendone i font, i colori, le immagini di sfondo, il layout, il posizionamento delle colonne o di altri elementi sulla pagina, etc.
La storia dei CSS procede su binari paralleli rispetto a quelli di HTML, di cui vuole essere l’ideale complemento. Da sempre infatti, nelle intenzioni degli uomini del W3C, HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento.
Per questo obiettivo, ovvero arricchire l’aspetto visuale e la presentazione di una pagina, lo strumento designato sono appunto i CSS. L’ideale perseguito da anni si può sintetizzare con una nota espressione: separare il contenuto dalla presentazione.
La prima specifica ufficiale di CSS (CSS 1) risale al dicembre del 1996. Nel maggio 1998 è stata la volta della seconda versione: CSS 2.
Niente stravolgimenti, ma molte aggiunte rispetto alla prima. CSS 2 non è altro che CSS 1 più alcune nuove proprietà, valori di proprietà e definizioni per stili non canonici come quelli rivolti alla stampa o alla definizione di contenuti audio. Mentre prendeva corpo la specifica relativa ai CSS3, veniva anche effettuata una revisione della seconda specifica, denominata CSS 2.1, che ha raggiunto lo stato di raccomandazione ufficiale nel giugno 2011. Questa guida ha come riferimento proprio questa revisione.
2) Classificazione degli elementi HTML e albero del DOM
Prima di entrare nei dettagli del linguaggio CSS, è necessario soffermarsi su alcuni concetti chiave legati ad HTML. Si tratta di argomenti propedeutici per una migliore comprensione del meccanismo di funzionamento dei CSS. Inizieremo con la classificazione degli elementi HTML, per poi spiegare la configurazione della struttura ad albero di un documento.
Elementi blocco (block) ed elementi in linea (inline)
Osserviamo una pagina HTML tentando di non pensare al contenuto ma solo alla sua struttura e mettendo in atto una sorta di processo di astrazione. Possiamo farci aiutare da una semplice immagine:
Una pagina HTML resa a schermo da un browser è composta, di fatto, da un insieme di rettangoli (box). Non importa che si tratti di paragrafi, titoli, tabelle o immagini: si tratta sempre di box rettangolari.
Osservando attentamente l’immagine si intuisce, però, che non tutti i box sono uguali. Alcuni contengono altri box al loro interno; altri sono invece contenuti all’interno dei primi. Alcuni, se si trovano (come accade) in mezzo al testo, lasciano che esso scorra loro intorno senza interrompere il suo flusso e senza andare a capo. Questa considerazione molto semplice ci offre la rappresentazione della fondamentale distinzione tra elementi blocco (quelli contrassegnati dal bordo nero) ed elementi inline (quelli circondati dal bordo rosso).
Gli elementi blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Possiamo verificarlo inserendo in una pagina HTML queste due righe di codice:
<h1>Titolo</h1>
<p>Paragrafo</p>
Le parole “titolo” e “paragrafo” appariranno su due righe diverse, perché <h1> e <p> sono elementi blocco.
Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso contenuto, essenzialmente testo). Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga.
Accanto a queste due fondamentali tipologie di elementi, il modello di formattazione dei CSS prevede altre due categorie: quella degli elementi lista e quella degli elementi connessi alle tabelle.
Tutti gli elementi HTML, in sintesi, hanno una loro modalità di presentazione predefinita e corrispondente alle tipologie appena viste. Tramite i CSS possiamo modificare tale modalità attraverso la proprietà display. Grazie a quest’ultima, per fare solo un esempio, possiamo fare in modo che un titolo h1 (elemento blocco) venga mostrato come un elemento in linea; oppure far sì che un elemento a (inline) sia reso come un elemento blocco. Torneremo più avanti su questi concetti. Per ora introduciamo un’altra importante distinzione tra gli elementi HTML.
Elementi rimpiazzati e non rimpiazzati
Un’altra distinzione da ricordare è quella tra elementi rimpiazzati ed elementi non rimpiazzati. I primi sono elementi di cui uno user agent (il motore di un browser) conosce solo le dimensioni intrinseche. Ovvero, quelli in cui altezza e larghezza sono definite dall’elemento stesso e non da ciò che lo circonda.
L’esempio più tipico di elemento rimpiazzato è <img> (un’immagine). Altri elementi rimpiazzati sono: <input>, <textarea>, <select> e <object>. Tutti gli altri elementi sono in genere considerati non rimpiazzati.
La distinzione è importante perché per alcune proprietà è diverso il trattamento tra l’una e l’altra categoria, mentre per altre il supporto è solo per la prima, ma non per la seconda.
Struttura ad albero di un documento
Altro concetto fondamentale da assimilare per una corretta applicazione dei CSS è quello della struttura ad albero di un documento. Il meccanismo fondamentale dei CSS è infatti l’ereditarietà. Esso fa sì che molte proprietà impostate per un elemento siano automaticamente ereditate dai suoi discendenti. Sapersi districare nella struttura ad albero significa padroneggiare bene questo meccanismo e sfruttare al meglio la potenza del linguaggio. Tutti i concetti che spiegheremo qui di seguito sono definiti nel cosiddetto Document Object Model (DOM), lo standard fissato dal W3C per la rappresentazione dei documenti strutturati.
Presentiamo subito un frammento di codice HTML:
Questa è la sua rappresentazione strutturale secondo il modello ad albero:
Il documento è una perfetta forma di gerarchia ordinata in cui tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio (parent-child in inglese). Ogni elemento è genitore e/o figlio di un altro.
Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento. In base a queste semplici indicazioni possiamo analizzare il nostro documento.
Ad esempio, <body> è figlio di <html>, ma è anche genitore di <h1>, <div> e <p>. Quest’ultimo è a sua volta genitore di un elemento <em>.
Si potrebbe concludere che anche <body> sia in qualche modo genitore di <em>. Non è esattamente così. Introduciamo ora un’altra distinzione, mutuata anch’essa dal linguaggio degli alberi genealogici, quella tra antenato (ingl: ancestor) e discendente (ingl: descandant).
La relazione parent-child è valida solo se tra un elemento e l’altro si scende di un livello. Esattamente come in un albero familiare si indica la relazione tra padre e figlio. Pertanto possiamo dire che <head> è figlio di <html>, che <a> è figlio di <p>, etc. Tra <div> e <a>, invece, si scende di due livelli: diciamo allora che <div> è un antenato di <a> e che questo è rispetto al primo un discendente.
L’albero del documento può essere letto non solo in senso verticale, ma anche orizzontale. In tal senso, gli elementi che sono posti sullo stesso livello, ovvero quelli che hanno lo stesso genitore, si dicono fratelli (ingl: siblings). Nel nostro esempio, h1, div e p sono fratelli rispetto all’elemento body.
Infine, c’è un solo elemento che racchiude tutti e non è racchiuso: <html>. Continuando con la metafora familiare potremmo dire che è il capostipite, ma in termini tecnici si dice che esso è l’elemento radice (ingl: root).
3) Come è fatto un CSS: regole,proprietà,commenti
Analisi degli elementi costitutivi di un foglio di stile CSS.
Osserviamo questa porzione di codice:
Nello snippet abbiamo inserito le tre tipologie di dichiarazioni che è possibile inserire in un CSS:
– regole;
– commenti;
– direttive @-rules.
Ecco, un foglio di stile non è altro che questo: un insieme di regole accompagnate, volendo, da qualche nota di commento e da una o più @-rule. Dal momento che commenti e @-rule sono elementi opzionali e facoltativi, andiamo innanzitutto a spiegare cos’è e com’è fatta una regola, ovvero l’elemento fondamentale di un CSS.
Com’è fatta una regola CSS
L’illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali:
– il selettore;
– il blocco delle dichiarazioni.
Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <h1>: lo sfondo sarà rosso, il colore del testo bianco. I selettori possono essere di diverso tipo e a queste tipologie dedicheremo una sezione specifica della guida. Per il momento sia chiara la funzione che essi svolgono.
Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe, la prima di apertura e la seconda di chiusura. Al suo interno possono trovare posto più dichiarazioni. Una dichiarazione è composta da una coppia:
– proprietà;
– valore.
La proprietà definisce un aspetto dell’elemento/selettore da modificare (margini, colore di sfondo, larghezza, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Le dichiarazioni vanno invece separate con un punto e virgola. Non è obbligatorio, ma è buona norma mettere il punto e virgola anche dopo l’ultima dichiarazione del blocco.
Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori. Questa regola è pertanto errata:
Gli spazi bianchi lasciati all’interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.
Proprietà singole e a sintassi abbreviata
Nelle definizione delle regole è possibile fare uso di proprietà singole e proprietà a sintassi abbreviata. Con questa espressione traduciamo il termine inglese shorthand properties, reso spesso, alla lettera, con il termine scorciatoie.
Le proprietà singole sono la maggior parte. Con esse impostiamo, per un dato elemento o selettore, un singolo aspetto: il colore, la dimensione del testo, il font da utilizzare, etc.
Con le shorthand properties è possibile invece definire con una sola dichiarazione un insieme di proprietà. Chiariamo con un esempio.
Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate:
– margin-top
– margin-right
– margin-bottom
– margin-left
La regola sarebbe questa:
Commenti
Nello snippet di codice visto ad inizio lezione, le parti racchiuse tra i segni /* e */, rappresentano commenti al codice.
I commenti non sono interpretati dal browser. Sono utili nei CSS, come nei linguaggi di programmazione, per aggiungere annotazioni esplicative di vario tipo a beneficio di chi scrive e consulta il codice.
Le @-rules
Il terzo tipo di dichiarazione che è possibile inserire in un CSS è rappresentato dalla cosiddette direttive @-rules. Il nome deriva dal fatto che questo particolare tipo di istruzione è contrassegnato nella sua definizione dal simbolo/prefisso @ (at):
4) Valori e unità di misura nei CSS
Abbiamo imparato che una proprietà CSS può essere impostata con l’assegnazione di specifici valori. In questa lezione vedremo quali sono i tipi di valore e le unità di misura con cui è possibile definire le proprietà. Prima di tutto, però, è opportuno spiegare due fondamentali regole sintattiche.
- I valori di una proprietà non vanno mai messi tra virgolette. Le uniche eccezioni riguardano i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola.
Un esempio:
- Quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell’unità. È corretto quindi scrivere 15pxoppure 15em. È invece sbagliato usare 15 pxo 15 em. In questi casi la regola sarà ignorata o mal interpretata.
Tipi di valore
Nei CSS i valori possono essere espressi da:
numeri possono essere definiti come numeri interi (1, 23, 45, etc.) o in virgola mobile (1.2, 3.45, 4.90, etc.)
– unità di misura
– percentuali
– codici per la definizione dei colori
– URI
– parole chiave (keywords)
– stringhe di testo
Unità di misura per le dimensioni
Questa è la lista delle unità di misura usate per definire dimensioni, spazi o distanze. Nella pratica comune solo alcune di esse sono realmente usate. Le elenchiamo comunque tutte per completezza.
Percentuale
Un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l’elemento parente. Si esprime con un valore numerico seguito (senza spazi) dal segno di percentuale: 60% è pertanto corretto, 60 % no.
Colori
Sui diversi modi per esprimere il valore di un colore si veda avanti
Stringhe
Alcune proprietà dei CSS possono avere come valore una stringa di testo da inserire come contenuto aggiunto nel documento. I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Le proprietà in questione sono due: content e quotes.
Valori URI
Si tratta di URL che puntano a documenti esterni (in genere immagini, come negli sfondi). Possono essere URL assoluti o relativi. In questo caso il percorso fa sempre riferimento alla posizione del foglio di stile e non del documento HTML.
La definizione dell’indirizzo è sempre introdotta dalla parola chiave url e va inserita tra parentesi tonde, con o senza virgolette. Queste possono essere singole o doppie.
Un esempio:
5) Inserire i fogli di stile CSS in un documento
Vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.
CSS esterni e interni
È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo modificabili anche con un editor di testo ai quali si assegna l’estensione .css
Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.
Fogli di stile collegati
Per caricare un foglio di stile esterno in un documento esistono due possibilità. La prima è quella che fa uso dell’elemento HTML <link>. La dichiarazione va sempre collocata all’interno della sezione <head> del documento HTML:
L’elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
Usare @import per caricare un CSS esterno
Un altro modo per caricare CSS esterni è usare la direttiva @import all’interno dell’elemento <style>:
Il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola. Questa modalità di inserimento di CSS esterni è comunque ormai in disuso. Il metodo da prediligere è quello basato sull’elemento link.
Fogli incorporati
I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style>. Anche in questo caso la dichiarazione va posta all’interno della sezione <head>:
Come si vede, la parte di codice che ci interessa inizia con l’apertura del tag <style>. Esso può avere due attributi:
– type (opzionale);
– media (opzionale).
Per entrambi gli attributi valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </style>.
CSS in linea
L’ultimo modo per formattare un elemento con i CSS consiste nell’uso dell’attributo HTML style. Esso fa parte della collezione di attributi HTML definiti globali: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:
Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare. Esattamente come si fa con i CSS esterni e incorporati.
Consigli
A questo punto è giusto chiedersi: quando usare l’una o l’altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. Una cosa è però facilmente intuibile: l’uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l’operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è considerato deprecato anche dal W3C. Nelle più moderne pratiche di sviluppo, l’uso di CSS in linea è quasi sempre limitato a regole inserite dinamicamente tramite Javascript.
Dunque, usare sempre fogli di stili esterni. Ricorrere a quelli incorporati per particolari esigenze di formattazione su elementi specifici di una certa pagina. Rifuggire fin quando è possibile dall’uso di CSS in linea.
6) L’attributo media e i tipi di media
Nella lezione precedente abbiamo accennato all’attributo HTML media. Grazie ad esso siamo potenzialmente in grado di impostare un foglio di stile per ogni supporto su cui la nostra pagina verrà visualizzata. Una possibilità davvero interessante e che va sempre più acquistando importanza con l’ampliarsi dei dispositivi di fruizione delle pagine HTML.
Se prima c’era unicamente un browser, oggi ci sono tablet, smartphone, schermi televisivi, console per i videogiochi. Per non parlare dei software usati dai disabili come i browser vocali. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità. Riuscire ad adattare uno stile unico a tutti è praticamente impossibile, oltre che controproducente. La soluzione ideale sta quindi nella creazione di fogli di stile ad hoc.
Sintassi
L’attributo media può accompagnare sia l’elemento <link> sia l’elemento <style>. Ecco due esempi di sintassi:
Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l’attributo:
Il valore di default è all, usato automaticamente in mancanza di una dichiarazione esplicita (ricordiamo infatti che media è un attributo opzionale).
È possibile usare più di un valore, ma i nomi della lista vanno separati da una virgola:
Evoluzione e scenari d’uso
Nelle pratiche di sviluppo più comuni, le potenzialità offerte dall’attributo media e dalla vastità di dispositivi che supporta si riducono notevolmente. Di fatto, ove l’attributo sia utilizzato, i valori oggi sfruttati sono solo all, screen e print. E in effetti, un’applicazione utilissima è proprio quella che prevede l’implementazione di un foglio di stile ad hoc per la stampa.
Ciò non significa che questo attributo abbia perso senso, anzi. Il suo uso è attualmente legato soprattutto al contesto delle media query, il meccanismo principe per l’attuazione del cosiddetto responsive design con cui possiamo identificare i dispositivi in base alle loro caratteristiche e funzionalità.
7) I selettori CSS di base: universale,di tipo,id,classi
La parte preponderante della specifica CSS2.1 è dedicata all’analisi delle diverse proprietà in grado di definire l’aspetto visuale di elementi e sezioni di una pagina. Prima di tutto, però, è fondamentale capire come e a cosa queste proprietà possono essere assegnate.
Una regola CSS viene applicata ad un selettore.
La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.
In questa lezione impareremo a usare il selettore universale, quello di tipo, gli id e le classi.
Selettore universale
Anche nei CSS abbiamo un jolly. Il selettore universale serve infatti a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco).
Sintassi ed esempi
* {color: red;}
La regola che abbiamo scritto assegna il colore rosso (red) a tutti gli elementi della pagina.
Esempio.
Selettore di tipo (o selettore di elementi)
È il più semplice dei selettori. È costituito dal nome di uno specifico elemento HTML. Serve a selezionare tutti gli elementi di quel tipo presenti in un documento.
Sintassi ed esempi
Esempio
Raggruppare i selettori
È possibile nei CSS raggruppare diversi selettori al fine di semplificare il codice. I selettori raggruppati vanno separati da una virgola.
Il raggruppamento è un’operazione molto conveniente. Pensate a questo scenario:
La regola per il raggruppamento vale per tutti i tipi di selettori. Si possono raggruppare anche tipi diversi.
Id e classi
I CSS non sarebbero uno strumento così potente senza questi tipi di selettori. Id e classi sono davvero una delle chiavi per sfruttare al meglio questo linguaggio.
Partiamo dalle basi. In HTML esistono due attributi globali applicabili a tutti gli elementi: sono id e class.
Specificare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina. In questo esempio abbiamo assegnato al paragrafo un attributo class=”testobianco”:
Il testo del nostro paragrafo sarà ora formattato secondo i nostri desideri: testo bianco.
Lo stesso meccanismo è valido per i selettori di tipo id. Ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un id. In un documento HTML l’attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l’id testobianco, non potrò più usare questo valore nel resto della pagina. Di conseguenza, l’id #testobianco dichiarato nel CSS trasformerà solo quel paragrafo specifico.
Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo.
In un documento potremo avere senza problemi questo scenario:
tutti i paragrafi della pagina avranno il testo bianco. E se volessi diversificare? Avere, ad esempio, anche paragrafi con il testo nero? Sarei prigioniero della regola iniziale. Scrivo due classi, una per il bianco e una per il nero, le applico di volta in volta secondo le mie necessità e il gioco è fatto:
La strategia dovrà dunque essere questa. Se uno stile va applicato ad un solo specifico elemento usate un id. Se invece prevedete di usarlo più volte, ovvero su più elementi, definite nel CSS una classe.
Chiariti i concetti di base, passiamo ad analizzare usi e sintassi.
Selettore di classi
Per definire una classe si usa far precedere il nome da un semplice punto:
lo stile verrà applicato solo ai paragrafi che presentino l’attributo class=”testobianco”.
Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica.
Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple:
Applicazione di questa e delle altre modalità d’uso delle classe in questa pagina di esempio.
Selettore di id
La sintassi per il selettore id è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #:
In realtà questa modalità è assolutamente superflua. Se l’id è univoco non abbiamo alcun bisogno di distinguere l’elemento cui verrà applicata.
8) I selettori combinatori o di relazione
Una categoria fondamentale di selettori CSS è rappresentata dai cosiddetti combinatori (detti anche selettori di relazione). Hanno la funzione di mettere in relazione elementi presenti all’interno dell’albero del documento. Sono quattro:
Analizziamoli nel dettaglio.
Selettore di discendenti
Il selettore di discendenti è sicuramente quello più utilizzato dei quattro. Seleziona un elemento che è discendente di un altro elemento. Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello.
Sintassi ed esempi
Per impostare la relazione di discendenza, è sufficiente separare l’elemento antenato dal discendente con uno spazio. Ecco la sintassi di base:
Il selettore va letto per chiarezza da destra a sinistra. Il codice appena visto serve ad assegnare lo stile solo ai paragrafi (p) contenuti nel div #contenitore, ovvero ai paragrafi discendenti del div con id contenitore. Nell’esempio, solo il primo paragrafo rispetta questa situazione, per cui sarà l’unico a presentare il testo in bianco. Per chiarezza, ecco il codice HTML:
Selettore di figli
Il selettore di figli (>) consente di selezionare un elemento che è figlio diretto dell’elemento padre.
Sintassi ed esempi
padre > figlio {dichiarazioni;}
Questo selettore è solo in apparenza simile al selettore di discendenti. La differenza sta nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. Chiariamo con un esempio:
Dei tre paragrafi solo il primo e il terzo sono figli diretti del div con id #box. Il secondo è invece figlio diretto di un elemento div anonimo. Tutti e tre, però, sono discendenti del div con id #box.
Nel seguente esempio, dunque, solo il primo e il terzo paragrafo avranno il testo bianco:
Selettore di fratelli adiacenti
Il selettore di fratelli adiacenti serve a scorrere in orizzontale l’albero del DOM assegnando le regole CSS agli elementi che si trovano allo stesso livello di un altro elemento.
Sintassi ed esempi
La relazione si definisce collegando i due elementi con il segno +.
verrà selezionato solo il primo <h2> dato che è immediatamente adiacente al tag <h1>.
Consideriamo, invece, il seguente codice HTML
Cosa succederà? Il combinatore andrà a selezionare tutti quegli elementi che sono diretti fratelli del tag li e, scorrendo in orizzontale l’albero del DOM, solo il primo <li> non coinciderà con la proprietà.
Esempio.
Selettore generale di fratelli
L’ultimo combinatore (~) è una generalizzazione di quello visto in precedenza. Esso assegna uno stile a tutti gli elementi che sono fratelli.
Sintassi ed esempi
andremo a selezionare tutti gli elementi <h2> dello stesso livello di <h1> indipendentemente dalla posizione che occupano.
Analizziamo invece il seguente caso. Dato questo codice:
notiamo che al primo h2 presente nel codice non viene applicato alcuno stile, mentre a tutti gli altri sì. Questo succede perché la regola viene assegnata solo agli elementi che sono fratelli e successori dell’elemento h3.
Esempio:
9) I selettori di attributo
I selettori di attributo servono a selezionare gli elementi in base ai loro attributi e/o al valore di tali attributi.
La specifica CSS 2.1 prevede quattro tipi. Altri tre tipi sono stati invece definiti nei CSS3.
Selezione in base alla presenza di un attributo
Con il primo tipo di selettore di attributo si selezionano tutti gli elementi che presentino nel codice HTML un determinato attributo, a prescindere dal valore dell’attributo stesso.
Sintassi ed esempi
La sintassi per questa tipologia è la seguente:
elemento [attributo] {dichiarazioni;}
Il nome dell’attributo va posto tra parentesi quadre, senza racchiuderlo tra virgolette. Tra il nome dell’elemento e la definizione dell’attributo non va lasciato spazio.
Andando alla pratica, la regola che segue assegna il colore bianco (white) e la sottolineatura a tutti gli elementi a che presentino un attributo title:
Aggiungiamo alcune osservazioni:
– il secondo link non corrisponde al selettore perché non ha un attributo title;
– il terzo link corrisponde anche se l’attributo non ha un valore;
– il quarto non corrisponde perché il nome dell’attributo non è identico a quello definito nella regola CSS.
Esempio:
Selezione con valore corrispondente
Questo tipo di selettore individua tutti gli elementi che abbiano come valore dell’attributo specificato la stringa di testo impostata nella regola CSS.
Sintassi ed esempi
Iniziamo ancora una volta con la sintassi generica:
Partendo da questo codice HTML, solo il primo link corrisponderà:
Perché solo il primo corrisponde?
– Nel primo link il valore dell’attributo nel codice HTML coincide perfettamente con quello definito nel CSS;
– nel secondo il valore è del tutto diverso;
– nel terzo le due parole della stringa sono scritte tutte attaccate;
– nel quarto sono scritte in maiuscolo, mentre nel CSS abbiamo usato il minuscolo (nella definizione del valore, dunque, si fa distinzione tra caratteri maiuscoli e minuscoli).
Esempio:
Selezione in base a valori che contengono una stringa
Questo tipo seleziona tutti gli elementi con un attributo che contenga una lista di parole separate da spazi, una delle quali corrisponde esattamente al valore definito nella regola CSS. A primo impatto non è molto intuitivo il suo funzionamento, ma cerchiamo di renderla comprensibile con un esempio.
Sintassi ed esempio
Ecco la sintassi di base:
Per assegnare la proprietà ad un elemento a è necessario che l’attributo title contenga una lista di parole separate da spazi e che nella lista sia presente la stringa lorem.
Dato questo codice HTML, dunque, la regola verrà applicata solo al primo e secondo link. Il terzo, infatti, non contiene la stringa lorem, il quarto la presenta in maiuscolo mentre nel CSS è stata scritta in minuscolo:
Esempio:
Selezione in base a valori che iniziano con una certa stringa
Si tratta di un selettore pochissimo utilizzato e di scarsa utilità. Individua tutti gli elementi in cui uno specifico attributo contiene una lista di parole separate da trattini, una delle quali corrisponde al valore definito nella regola CSS.
Sintassi ed esempio
La sintassi generica è questa:
Esempio:
10) Le pseudo-classi
Il concetto di pseudo-classe è di assoluto rilievo nel contesto dei CSS. Una pseudo-classe non definisce la presentazione di un elemento ma di un particolare stato di quest’ultimo. In buona sostanza, grazie alle pseudo-classi possiamo impostare uno stile per un elemento al verificarsi di certe condizioni. Iniziamo analizzando la sintassi generica, per poi passare in rassegna le diverse tipologie definite nella specifica.
Sintassi
Per dichiarare una pseudo-classe si usa questa sintassi:
Pseudo-classi per i link
Le prime due pseudo-classi che prendiamo in considerazione sono associate ai link, ovvero all’elemento a. Servono a impostare l’aspetto dei collegamenti ipertestuali presenti in una pagina.
:link
La pseudo-classe :link definisce l’aspetto di partenza dei link, ovvero quello che ci troviamo davanti quando non sono stati visitati. Grazie ad essa possiamo personalizzare il colore, la decorazione del testo, la consistenza del font e altre proprietà degli elementi a superando le impostazioni di default dei browser, che di norma rendono i link con il colore blue e la sottolineatura.
Se dunque vogliamo link con il testo bianco, in grassetto e senza sottolineatura, scriveremo nel CSS:
Esempio:
visited
La pseudo-classe :visited serve a modificare, se lo vogliamo, l’aspetto dei link quando siano stati visitati. Di default i browser rendono i link visitati con il colore viola e la sottolineatura.
Riprendiamo e modifichiamo l’esempio di prima aggiungendo al CSS la regola con :visited:
Se si visita la pagina collegata e si torna a quella di origine, il link sarà verde.
Esempio:
Pseudo-classi dinamiche
Il secondo gruppo di pseudo-classi definite nella specifica è quello delle cosiddette pseudo-classi dinamiche. Anch’esse servono a impostare e modificare la presentazione di un particolare stato di un elemento, ma ciò avviene in seguito ad un’azione dell’utente.
Pur trovando un campo di applicazione molto comune a livello dei link, possono essere applicate anche ad altri tipi di elementi, non solo dunque all’elemento a.
:hover
Questa pseudo-classe viene applicata quando si passa con il cursore del mouse (o altro dispositivo di puntamento) su un elemento senza attivarlo, ovvero senza cliccarci sopra. La sua applicazione più comune è quella per cui possiamo modificare l’aspetto di link e pulsanti al passaggio del mouse, ma viene usata anche per emulare nei CSS interazioni tipiche di Javascript, per esempio nella creazione di menu a tendina in cui una sezione compare e scompare, appunto, al passaggio del mouse.
Per spiegare l’uso di :hover proseguiamo nell’adattamento dell’esempio da cui siamo partiti. Vogliamo fare in modo che il link cambi colore quando ci si passa sopra con il cursore. È sufficiente aggiungere una sola regola:
Esempio:
:active
La pseudo-classe :active, come suggerisce il nome, serve a impostare la presentazione di un elemento quando e mentre esso viene attivato dall’utente. Tipicamente, interagendo con il mouse, un elemento è in stato :active mentre si tiene premuto il pulsante su di esso, ovvero per tutto il tempo che intercorre tra il click e il rilascio del pulsante.
Potremmo allora fare in modo che il link su cui stiamo lavorando diventi rosso quando viene attivato. Completiamo così il codice:
Esempio:
Con queste due pseudo-classi, dunque, possiamo personalizzare a nostro piacimento l’aspetto e il comportamento dei link, anche perché è possibile agire su diverse altre proprietà oltre che sul colore. Come si accennava, nulla ci impedisce di impiegarle su altri elementi. Ecco un esempio in cui, facendo ricorso ad altre proprietà dei CSS, possiamo ricreare e simulare un pulsante tridimensionale.
:focus
La pseudo-classe :focus viene attivata quando un elemento riceve il focus. Come spiega la specifica CSS, questo stato scatta quando un elemento può accettare eventi attraverso la tastiera, per esempio l’inserimento di testo in un modulo.
Da quanto si è detto, si può intuire come :focus abbia il suo ambito preferenziale di utilizzo nei campi dei form.
Vediamo una dimostrazione. Vogliamo modificare il colore di sfondo di un campo di testo quando esso riceve il focus, ovvero quando ci posizioniamo con il cursore al suo interno e il campo è pronto a ricevere il testo che vogliamo scrivere:
input : focus {background: yellow;}
Lo sfondo torna al suo colore di partenza quando l’input perde il focus.
Esempio:
:first-child
Con questa pseudo-classe pssiamo selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro elemento.
Sintassi ed esempi
Questa la sintassi generica:
Indipendentemente dall’elemento che contiene i paragrafi, il primo avrà il testo bianco perché si trova nella posizione di primo figlio.
You are so interesting! I do not think I’ve truly read through anything like that before.
So wonderful to find someone with a few original thoughts on this topic.
Really.. many thanks for starting this up. This web site is something that is required on the internet, someone with some
originality!
____
TY
I think this is one of the most important info for me.
And i’m glad reading your article. But wanna remark on few general things, The web
site style is great, the articles is really excellent : D.
Good job, cheers
____
TY!
Hi colleagues, fastidious piece of writing and fastidious urging
commented at this place, I am genuinely enjoying by these.
I have read so many posts regarding the blogger lovers except this piece
of writing is genuinely a nice post, keep it up.
Hi there! This post couldn’t be written any better! Many thanks for sharing!
I blog often and I really appreciate your information. Your
article has truly peaked my interest. I am going to book mark your site and keep checking for new
details about once per week. I subscribed to your RSS feed as well.
Hello there, You’ve done an excellent job. I will certainly digg it and personally suggest to my friends.
I’m sure they will be benefited from this site.
Thank you, I have just been searching for information about this subject for a long time and
yours is the best I have found out till now. But, what in regards to
the bottom line? Are you certain in regards to the supply?
Amazing! Its actually remarkable paragraph, I have got much clear idea about from this article.
This website was… how do you say it? Relevant!!
Finally I have found something that helped me.
Thank you!
Wow! At last I got a blog from where I can in fact get valuable facts
regarding my study and knowledge.
Grazie, ho cercato informazioni su questo argomento da anni e il tuo sito è il migliore che ho trovato fino ad ora.
Non so nemmeno come sono finito qui, ma ho pensato che questo post fosse fantastico. Non so chi sei, ma sicuramente diventerai un famoso blogger, se non lo sei già.
Dopo aver letto questo ho pensato che fosse molto illuminante.
Excellent post. I am impressed by the quality of the Blog! Very useful information, I was looking for this information for a long time. Thanks
————-
Post eccellente. Sono impressionato dalla qualità del Blog! Informazioni molto utili,stavo cercando queste informazioni da molto tempo.Grazie
We are a group of friends and we are setting up new activities on the web. Your site has provided us with valuable information to work with. You have done an extraordinary job and our whole group is grateful to you.
—————-
Siamo un gruppo di amici e stiamo impostando nuove attività sul web. Il tuo sito ci ha fornito informazioni preziose su cui lavorare. Hai svolto un lavoro straordinario e tutto il nostro gruppo te ne è grato.
These articles are very interesting, I hope to learn a lot
Very beautifull!
I put a bookmark