Basi HTML e CSS: Elementi, Struttura e Regole

BASI HTML
1° LEZIONE:
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:
<html>
<head>
<title>Struttura del documento</title>
</head>
<body>
<h1>Titolo</h1>
<div>
<p>Primo <a href="pagina.htm">paragrafo</a>.</p>
</div>
<p>Secondo <em>paragrafo</em>.</p>
</body>
</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).
2° LEZIONE: Come è fatto un CSS: Regole, Proprietà, Commenti
Questa lezione è dedicata all’analisi degli elementi costitutivi di un
foglio di stile CSS. Osserviamo questa porzione di codice:
body {
background: white;
color: black;
}
/* Stili per i titoli h1 */
h1 {
color: red;
font: 36px Helvetica, Arial, sans-serif;
}
/* Colore del testo delle liste */
li {color: green;}
/* Colore dei titoli h1 per la stampa */
@media print {
h1 {color: black;}
}
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:
body {color background: black;}
Mentre questa è perfettamente valida e plausibile:
p {font: 12px Verdana, arial;}
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:
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
}
Lo stesso risultato si può ottenere usando la proprietà a sintassi
abbreviata margin:
div {margin: 10px 5px 10px 5px;}
Approfondiremo nel corso dell’analisi delle proprietà usi e costrutti
sintattici di ciascuna. Per il momento ci limitiamo all’elenco:
background | border | border-top | border-right
border-bottom | border-left | border-width | border-color
list-style | margin | padding | outline
Commenti
Nello snippet di codice visto ad inizio lezione, le parti racchiuse tra
i segni /* e */, rappresentano commenti al codice.
/* Stili per i titoli h1 */
/* Colore del testo delle liste */
/* Colore dei titoli h1 per la stampa */
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):
@media print {
h1 {color: black;}
}
3° Lezione: 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.
1. 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:
/* Valori espressi per la proprietà content
con una stringa di testo
*/
content: "Viva i CSS";
/* Definizione del font Times New Roman */
p {font-family: "Times New Roman", Georgia, serif;}
2. Quando si usano valori numerici con unità di misura, non bisogna
lasciare spazio tra numero e sigla dell’unità. È corretto quindi
scrivere 15px oppure 15em. È invece sbagliato usare 15 px o 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




/* Altezza di linea con un numero */
p {line-height: 1.2;}
/* Larghezza con unità di misura */
div {width: 300px;}
/* Larghezza in percentuale */
div {width: 60%;}
/* Colore con codice esadecimale */
body {background-color: #2795b6;}
/* URL per un'immagine di sfondo */
body {background-image: url(sfondo.jpg);}
/* Ripetizione dello sfondo con una keyword */
body {background-repeat: no-repeat;}
/* Stringa di testo
*/
content: "Viva i CSS";
Copy
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.
Unità di misura
Descrizione
in
(inches –
pollici)
classica misura del sistema metrico americano. Praticamente
nullo il suo valore su un supporto come un browser web.
cm
(centimetri)
stesso discorso visto per i pollici, la difficoltà maggiore sta nella
resa su monitor, che è altra cosa rispetto alla carta stampata.
mm
(millimetri)
vedi quanto detto per centimetri e pollici.
pt
(points – punti)
unità di misura tipografica destinata essenzialmente a definire la
dimensione dei font. Il suo utilizzo è di fatto limitato ai CSS per
la stampa.
pc
(picas)
unità poco usata. 1 pica equivale a 12 punti.
em
(em-height)
unità di misura di ampio utilizzo se si desidera impostare le
dimensioni dei font o dei box con un’unità di misura relativa.
ex
(ex-height)
di fatto inesistente il suo utilizzo. 1ex equivale all’altezza del
carattere x minuscolo del font scelto.
px
(pixels)
unità di misura ideale per gli schermi. È quella più
usata e facile da comprendere.
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 la lezione
24 della guida.
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:
background-image: url(sfondo.jpg);
background-image: url('sfondo.jpg');
background-image: url("sfondo.jpg");
Lezione 4: Inserie 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:
<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</html>
L’elemento <link> presenta una serie di attributi di cui è importante
spiegare significato e funzione:
Attributo
Descrizione
rel
descrive il tipo di relazione tra il documento e il file collegato.
È obbligatorio. Per i CSS due sono i valori
possibili: stylesheet e alternate stylesheet.
href
serve a definire l’URL assoluto o relativo del foglio di stile.
È obbligatorio
type
identifica il tipo di dati da collegare. Per i CSS il valore da usare
è text/css. L’attributo non è più obbligatorio a partire dalla versione
5 del linguaggio HTML.
media
con questo attributo si identifica il supporto (schermo, stampa, etc.) cui
applicare un particolare foglio di stile. È un attributo opzionale. Per i
dettagli implementativi si veda la lezione 6 della guida.
Usare @import per caricare un CSS esterno
Un altro modo per caricare CSS esterni è usare la
direttiva @import all’interno dell’elemento <style>:
<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
[...]
</html>
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>:
<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>
Come si vede, la parte di codice che ci interessa inizia con l’apertura
del tag <style>. Esso può avere due attributi:
1. type (opzionale);
2. 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:
<elemento style="regole_di_stile">
Se, ad esempio, si vuole formattare un titolo h1 in modo che abbia il
testo di colore rosso e lo sfondo nero, scriveremo:
<h1 style="color: red; background: black;">...</h1>
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.
Lezione 5: 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:
<link href="print.css" media="print" rel="stylesheet">
<style media="screen">
regole CSS...
</style>
Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi
valori possibili per l’attributo:
Valore
Descrizione
all
il CSS si applica a tutti i dispositivi di visualizzazione
screen
schermo di computer
print
pagina stampata
projection
presentazioni e proiezioni
speech
dispositivi a sintesi vocale
braille
supporti basati sull’uso del braille
embossed
stampanti braille
handheld
dispositivi mobili con schermo piccolo e in genere dotati di browser con limitate
capacità grafiche
tty
dispositivi a carattere fisso come i terminali
tv
visualizzazione su schermi televisivi
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:
<link rel="stylesheet" media="print, tv, aural" href="print.css">
L’uso più tipico di questa funzionalità consiste nel collegare al
documento vari fogli di stile adatti a ciascun supporto. Lo user agent
che visualizzerà la pagina sarà in grado, se conforme agli standard, di
caricare quello giusto:
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">
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. A questo
tema è dedicata la lezione 32 di questa guida.
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à. Per approfondire l’uso
dell’attributo media nelle media query rimandiamo alle seguenti lezioni
della Guida CSS3:
 CSS Media Queries: le basi
 CSS Media queries: caratteristiche dei media
Lezione 6: 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.
L’argomento sarà l’oggetto delle prossime cinque lezioni.
Come abbiamo anticipato nella lezione 3, 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.
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
h1 {color: green;}
p {background-color: yellow;}
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:
h1 {background: white;}
h2 {background: white;}
h3 {background: white;}
Tutti e tre gli elementi hanno uno sfondo bianco. Invece di scrivere tre
regole separate si può fare così:
h1, h2, h3 {background: white;}
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":
<p class="testobianco">....</p>
Come vedete non succede nulla. Il valore dell’attributo class deve
trovare una corrispondenza in un foglio di stile.
Nel secondo esempio, abbiamo definito una regola CSS con un selettore di
tipo classe:
.testobianco {color: white;}
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:
<p class="testobianco">....</p>
<div class="testobianco">....</div>
<ul class="testobianco">...</ul>
La classe .testobianco presente nel CSS formatterà allo stesso modo il
testo del paragrafo, del div e della lista.
Concludendo: una classe consente di superare le limitazioni intrinseche
nell’uso di un selettore di elementi. Se imposto questa regola
p {color: white;}
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:
.testobianco {color: white;}
.testonero {color: black;}
<p class="testobianco">Il testo di questo paragrafo è
bianco.</p>
<p class="testonero">Il testo di questo paragrafo è nero.</p>
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:
.nome_della_classe
Questa è la sintassi di base. Un selettore di classe così definito può
essere applicato a tutti gli elementi di un documento HTML.
Esiste un secondo tipo di sintassi:
<elemento>.nome_della_classe
Esso è più restrittivo rispetto alla sintassi generica. Se infatti
definiamo questa regola
p.testobianco {color: white;}
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:
p.testobianco.grassetto {color:white; font-weight:bold;}
Questa regola applicherà gli stili impostati a tutti gli elementi in cui
siano presenti (in qualunque ordine) i nomi delle classi definiti nel
selettore. Avranno dunque il testo rosso e in grassetto questi
paragrafi:
<p class="grassetto testobianco maiuscolo">..</p>
<p class="testobianco grassetto">...</p>
ma non questo, perché solo uno dei nomi è presente come valore di class:
<p class="grassetto">...</p>
Selettore di id
La sintassi per il selettore id è semplicissima. Basta far precedere il
nome dal simbolo di cancelletto #:
#nome_id
Con questa regola
#titolo {color: blue;}
assegniamo il colore blue all’elemento che presenti questa definizione
nel codice HTML:
<h1 id="titolo">...</h1>
Come per le classi è possibile usare una sintassi con elemento:
p#nome_id
In realtà questa modalità è assolutamente superflua. Se l’id è univoco
non abbiamo alcun bisogno di distinguere l’elemento cui verrà applicata.
Lezione 7: 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:
Selettore
Simbolo
Selettore di discendenti
Selettore di figli
>
Selettore di fratelli adiacenti
+
Selettore generale di fratelli
~
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:
antenato discendente {dichiarazioni;}
E vediamo un brevissimo esempio per capirne il funzionamento:
#contenitore p {color: white;}
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:
<div id="contenitore">
<p>...</p>
</div>
<div id="box">
<p>...</p>
</div>
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:
<div id="box">
<p>Primo paragrafo</p>
<div>
<p>Secondo paragrafo</p>
</div>
<p>Terzo paragrafo</p>
</div>
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:
#box > p {color: white}
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 +.
fratello + fratello adiacente {dichiarazioni;}
In pratica, questo tipo di selettore consente di assegnare uno stile
all’elemento fratello immediatamente adiacente. Dato un codice HTML come
il seguente:
<div>
<h1>1. Titolo principale h1.</h1>
<h2>1.1 Primo sottotitolo h2.</h2>
<p>...</p>
<h2>1.2 Secondo sottotitolo h2.</h2>
<p>...</p>
</div>
Applicando la seguente regola
h1 + h2 {color: white;}
verrà selezionato solo il primo <h2> dato che è immediatamente adiacente
al tag <h1>.
Consideriamo, invece, il seguente codice HTML
<ul>
<li>List
<li>List
<li>List
<li>List
<li>List
</ul>
Item
Item
Item
Item
Item
1</li>
2</li>
3</li>
4</li>
5</li>
e la seguente regola CSS:
li + li {color: white;}
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
fratello ~ fratello {dichiarazioni;}
Dato il codice HTML visto in precedenza
<div>
<h1>1. Titolo principale h1</h1>
<h2>1.1 Primo sottotitolo h2</h2>
<p>...</p>
<h2>1.2 Secondo sottotitolo h2</h2>
<p>...</p>
</div>
e applicando questa regola CSS
h1 ~ h2 {color: white;}
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:
<div>
...
<h2>Sottotitolo h2</h2>
<h3>Sottotitolo h3</h3>
...
<h2>Sottotitolo h2</h2>
<h3>Sottotitolo h3</h3>
...
<h2>Sottotitolo h2</h2>
<h3>Sottotitolo h3</h3>
</div>
e la seguente regola
h3 ~ h2 {color: white;}
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.
Lezione 8: 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:
a[title] {color: white; text-decoration: underline;}
Dunque, in questa sequenza HTML, solo il primo e il terzo link
corrispondono e solo ad essi sarà applicata la regola:
<p>Ecco un <a href="#" title="link">link</a>.</p>
<p>Ancora un <a href="#">link</a> ma senza l'attributo
title.</p>
<p>Un altro <a href="#" title="">link</a>, con title
vuoto.</p>
<p>Ultimo <a href="#" titles="link">link</a>.</p>
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:
elemento[attributo="valore"] {dichiarazioni;}
La stringa corrispondente al valore va messa tra virgolette se è
composta da più di una parola. Posso dunque scrivere così:
a[title=lorem]
Ma non così, perché la regola non verrebbe applicata:
a[title=lorem ipsum]
Creiamo subito una regola CSS per la dimostrazione pratica:
a[title="lorem ipsum"] {color: white; text-decoration:
underline;}
Partendo da questo codice HTML, solo il primo link corrisponderà:
<p>Ecco
un <a href="#" title="lorem ipsum">link</a>.</p>
<p>Ancora un <a href="#" title="link">link</a>.</p>
<p>Un altro <a href="#" title="loremipsum">link</a>.</p>
<p>Ultimo <a href="#" title="LOREM IPSUM">link</a>.</p>
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:
elemento[attributo~="valore"] {dichiarazioni;}
La differenza principale con il precedente selettore è che il segno = va
preceduto dalla tilde (~).
Passando all’esempio, partiamo da questa regola CSS:
a[title~="lorem"] {color: white; text-decoration: underline;}
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:
<p>Ecco un <a href="#" title="lorem ipsum sit">link</a>.</p>
<p>Ancora un <a href="#" title="link lorem">link</a>.</p>
<p>Un altro <a href="#" title="ipsum sit">link</a>.</p>
<p>Ultimo <a href="#" title="LOREM link">link</a>.</p>
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:
elemento[attributo|="valore"] {dichiarazioni;}
Riprendiamo modificandolo l’esempio visto poc’anzi:
a[title|="lorem"] {color: white; text-decoration: underline;}
Solo il primo link corrisponde alla regola appena vista:
<p>Ecco un <a href="#" title="lorem-ipsum-dolor">link</a>.</p>
<p>Ancora un <a href="#" title="ipsum-loremdolor">link</a>.</p>
Esempio.