Indice
Per CSS intendiamo l'acronimo di Cascading Style Sheets, che tradotto in italiano è Fogli di Stile a Cascata.
I CSS hanno come caratteristica principale l'ordine di assegnamento a cascata delle proprietà, ciò vuol dire che se un elemento ha due proprietà uguali ma con un valore diverso, verrà assegnata l'ultima inserita.
Quando più regole si applicano allo stesso elemento e vengono specificate le stesse proprietà, esiste uno schema prioritario che determina quale sia la regola con la precedenza.
h1 {color: #000;}
h1 {color: #fff;}
Nell'esempio la seconda regola sovrascriverà la prima, assegnando al titolo il colore bianco.
Specificità dei selettori
Esistono alcune regole di base per il calcolo della specificità. La specificità più bassa con peso 0 è data dal selettore universale (*), che include tutti gli elementi all'interno del documento.
* {color: black;} /* peso 0*/
HTML e CSS. Progettare e costruire siti web. Con Contenuto digitale per download e accesso on line
Un modo nuovo e più bello per imparare HTML5 e CSS3. Non sempre chi lavora a progetti web ha una laurea in informatica, mentre le righe di codice che stanno dietro a un sito possono intimidire. Ecco il motivo per cui questo libro non è il "classico" manuale di informatica e si rivolge a programmatori e sviluppatori ma anche ai designer, ai blogger, agli editor e ai content e marketing manager che lavorano su singole parti o interi siti web. Ogni pagina introduce un nuovo argomento con informazioni chiare e piccoli esempi. Colori, diagrammi e fotografie guidano l'apprendimento in un percorso visuale mentre i temi più complessi sono affrontati attraverso infografiche che ne semplificano la comprensione. Non mancano consigli su come gestire la progettazione e l'organizzazione delle pagine web partendo da zero, creare contenuti attraenti (con testo, immagini, audio e video) e siti dotati di una buona tipografia, un layout accattivante e i principali requisiti SEO. Alla fine di ogni capitolo un esempio completo mostra la pratica di quanto appreso. Nessuna esperienza di programmazione è richiesta.
I selettori di tipo e gli pseudo-elementi hanno peso 1, quindi un selettore contenente due selettori di tipo e uno pseudo-elemento hanno una specificità con peso pari a 3.
p {color: black;} /* peso 1*/
body p::first-line {color: blue;} /* peso 3 */
I selettori di classe hanno un peso di 10, così come le pseudo-classi e i selettori di attributo. Includere uno di questi selettori con un selettore di tipo fornisce un peso totale di 11.
.a { color: white; } /* peso 10 */
p:first-child { color: red; } /* peso 11 */
p[class=a] { color: green; } /* peso 11 */
I selettori di id hanno un peso di 100, quindi una regola id sostituisce la maggior parte degli altri stili contrastanti.
#ident { color: yellow; } /* peso 100 */
Gli stili CSS inline hanno una specificità maggiore con un peso di 1000, sovrascrivendo così anche le regole id.
<p style="color: black;">Peso 1000</p>
Infine per sovrascrivere tutti gli altri conflitti di stile, includendo quelli definiti nei CSS inline, ecco che entra in gioco la dichiarazione !important. Si noti che !important è applicato solo alle dichiarazioni singole e non interamente alle regole.
p { color: blue !important; }
Se la specificità tra due regole va in conflitto con la stessa, l'ordine della cascata è ciò che determina quale regola verrà applicata.
Cascata
Nei CSS, più di un foglio di stile può influenzare gli stili di un documento. Questa caratteristica è nota come cascata (la parte "C" del CSS) perché il browser unisce tutti i fogli di stile per risolvere eventuali conflitti prima di applicarli.
Le pagine web possono avere più fogli di stile che provengono da tre diversi fonti: quelli del browser, quelli del progettista del sito e quelli dell'utente che legge il documento.
Il foglio di stile del web designer di solito ha priorità massima, seguito dal il foglio di stile personale dell'utente (se presente) e infine quello predefinito del browser.
Applicare i fogli di stile
I web designer hanno tre modi per includere le regole CSS: attraverso gli stili incorporati, con i fogli di stile interni e con i fogli di stile esterni. Tra queste tre tipologie, gli stili inline hanno la precedenza più alta, seguiti da quelli dei fogli di stile interni e per finire quelli dei fogli di stile esterni.
Se la pagina Web include più di un foglio di stile esterno con regole contrastanti (stessa specificità), viene data la precedenza al foglio di stile incluso per ultimo nel markup HTML. Questo è vero anche all'interno di un foglio di stile. Se i selettori sono uguali, la proprietà dichiarata per ultima è quella che verrà applicata.
Per gli stili ereditati, lo stile di un elemento ha la priorità sullo stile ereditato dai suoi antenati.
