CSS
Cascading Style Sheets
Come funziona il CSS (Cascading Style Sheets) ? Mentre l’HTML dà la struttura al contenuto del sito web, il CSS (Cascading Style Sheets) dirà al browser quale stile dargli. Per applicare un particolare stile ad un elemento HTML viene fissata una regola (rule),
esempio:
p { color: red; }
Ogni regola è formata da due parti distinte: il selettore (selector) e le dichiarazioni (declarations)
Il selettore (selector) corrisponde all’elemento HTML a cui lo stile è applicato, ed è la parte iniziale della regola, fuori dalle parentesi, nell’esempio, la lettera p che corrisponde all’elemento <p> dell’html, questa regola sta quindi dicendo al browser come visualizzare il paragrafo della pagina.
Una o più dichiarazioni, si trovano all’interno delle parentesi e definiscono lo stile da applicare all’elemento.
In una dichiarazione la proprietà è l’attributo dell’elemento che si sta modificando, ad esempio la larghezza o il colore.
Il valore è ciò che è associata alla proprietà, ad esempio colore blu o larghezza 50%.
Ogni proprietà è seguita dai due punti e dal valore da associare.
Se sono presenti più dichiarazioni nella stesa regola, esse sono separate dal punto e virgola.
p { color: red; font-size: 1.5em; }
Il punto e virgola è opzionale dopo l’ultima dichiarazione.
- lector; 1+100+10+1)
Declaration group
L’insieme delle dichiarazioni all’interno di una regola, è detto gruppo di dichiarazione. Gli stili possono essere applicati anche ad un sottogruppo di un elemento, usando una classe o un ID
.classname { color: blue; }
#idname { color: green; }
Le classi e gli ID, “lavorano” nello stesso modo, ma mentre una classe può essere applicata più volte a diversi elementi di una pagina, gli ID possono essere collegati ad un solo elemento per pagina.
E’ preferibile usare nomi descrittivi sia per le classi che per gli ID
<p class=”intro”>…</p>
<nav id=”main”>…</nav>
E’ possibile collegare elementi in modo ancora più specifico tramite i descendant selectors, riferendosi, cioè, a qualcosa che si trova dentro qualcos’altro
.argomenti p { color: purple; }
Nell’esempio, si sta dicendo al browser di applicare il colore viola al testo contenuto nei paragrafi (p) che si trovano negli elementi della pagina che hanno “argomenti” come nome di classe.
<div class=”argomenti”> <p> testo</p> </div>
Per applicare lo stesso stile a due o più selettori diversi, è possibile raggruppare tali selettori all’interno della stessa regola separandoli con la virgola.
h1, h2 { color: green; }
Nell’esempio si sta dicendo al browser che il colore del carattere sarà verde sia per gli elementi h1 che per elementi h2
Quando si scrive codice CSS (Cascading Style Sheets), lo spazio e le righe vuote sono opzionali e quindi non considerate dal browser, tranne per gli spazi nei descendant selectors.
.argomenti p
Dove inserire il codice CSS
Gli stili possono essere applicati alle pagine web in modo diverso:
- un file separato (stylesheet o foglio di stile)
- incluso nel codice della pagina web
EMBEDDED STYLES (stili inseriti)
Volendo applicare lo stile ad una sola pagina del sito, è possibile aggiungerlo direttamente nell’ <head> del file HTML usando l’elemento <style>
<head> <style> p { color: blue; } </style> </head>
Normalmente gli stili non sono applicati ad un’unica pagina, ma all’intero sito web.
Anche se uno stile è relativo ad una singola pagina web è preferibile includerlo in un foglio di stile separato, in modo da poterlo ritrovare molto più semplicemente.
STYLESHEETS
In genere, le dichiarazioni CSS (Cascading Style Sheets) saranno raccolte in uno o più file separati chiamati stylesheets, collegati all’interno della pagina web.
Questo permette di dichiarare uno stile una sola volta e applicarlo in seguito in pagine diverse del sito web.
L’elemento <link> permette di collegare i documenti (files) alla pagina web. Questo elemento è inserito nella <head> della pagina html.
<head><link rel=”stylesheet” href=”styles/mystyle.css”> </head>
Le pagine html possono essere collegate a più di uno stylesheet.
INLINE STYLES
Di tanto in tanto potrebbe essere necessario applicare uno stile a un’unica occorrenza di un elemento, direttamente all’interno dell’HTML.
Per fare questo, si aggiunge un’attributo di stile all’elemento (style=” “)
<p style=”color: green; font-size: 2em;”>Testo.</p>
E’ preferibile evitare di utilizzare gli inline styles in un sito web, poiché è facile perdere traccia della posizione degli stili CSS (Cascading Style Sheets), rendendo complicata la manutenzione del sito.
La Cascata (Cascade)
Se diversi stili associati allo stesso elemento di una pagina web entrano in conflitto, come fa il browser a capire quale prendere in considerazione?
CSS ha direttive molto dettagliate riguardo l’ordine con cui applicare gli stili. L’insieme di queste direttive è detto Cascata o Cascade (da cui Cascading Style Sheets o CSS), La Cascata determina quale regola ha la precedenza sulle altre
Come funziona la Cascade
Ogni elemento HTML ha diverse proprietà, ad esempio l’elemento <p> (paragrafo) ha le proprietà text color(colore carattere), background color (colore sfondo), font size (dimensione carattere), etc.
Il browser, visualizzando la pagina, controlla ogni singolo elemento uno per volta e decide quale aspetto dare a tale elemento, determinando il valore per ognuna di queste proprietà.
Il browser avvia una routine (una gerarchia) per decidere quale stile applicare all’elemento in questione.
La priorità è valutato in base alle seguenti regole, in ordine di importanza:
- Regole marcate come importanti
p { font-weight: bold; color: blue !important; } - Regole Inline style
<p style=”color: blue;”>testo.</p> - Regole contenenti ID
<p id=”example”>testo.</p>
#example { color: blue; } - Regole contenenti classi, attributi, e pseudo-classi
.example { color: blue; }
.example p { color: green; } - Regole contenenti elementi e pseudo-elementi
<p>testo</p>
p { color: blue; } - Regole ereditate
Inheritance (eredità) significa che se un elemento non ha uno stile applicato, erediterà lo stile dell’elemento che lo contiene (genitore – parent) - Valori di default
Ogni elemento ha un suo valore di default, per esempio il colore del carattere per un elemento di testo è nero di default, perciò se non è applicato nessuno stile all’elemento <p> esso sarà visyualizzato in nero.
L’ordine delle priorità è chiamato CSS specificity, poiché va dalle regole maggiormente specifiche (applicate a una o poche istanze di un elemento) alle regole meno specifiche (più generiche, applicate a tutte le istanze di un elemento)
Oltre alla gerarchia, la specificità guarda al numero di oggetti presenti in un selettore, maggiore il numero di oggetti, più alta la priorità
Il diverso “peso” dei selettori (selectors) è di solito la ragione per cui regole CSS (Cascading Style Sheets) non sono aplicate ad alcuni elementi della pagina html.
Ma che cosa è la specificità
La specificità determina quale regola CSS (Cascading Style Sheets) è applicata dal browser all’elemento della pagina web.
Vediamo alcune regole relative alla CSS Specificity:
- La specificità determina quale regola CSS sarà applicata dal browser all’elemento
- La “Specificity” è di solito il motivo per cui regole CSS non vengono applicate ad alcuni elementi.
- Ogni selettore ha il suo posto nella gerarchia della specificità.
- Se due selettori sono applicati allo stesso elemento, “vince” quello con specificità più alta.
- Quando i selettori hanno uguale valore di specificità, vince l’ultima regola scritta nella lista.
- Quando i selettori hanno un diverso valore di specificità prevale la regola che conta di più.
- Regole con selettori maggiormente specifici hanno un valore più grande di specificità.
- Lo stile “embedded” ha un valore di specificità maggiore rispetto alle altre regole.
Come misurare la specificità ?
Partendo da zero, aggiungi
- 1000 per ogni attributo di stile, (style=” “)
- 100 per ogni ID
- 10 per ogni attributo, classe o pseudo-classe
- 1 per ogni nome elemento o pseudo-elemento
Ad esempio in
body #content .data img:hover
il valore di specificità è 122, 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.”
Altri esempi
- li { } 1 (un elemento)
- li:first-line { } 2 (un elemento, uno pseudo-element)
- ul li { } 2 (due elementi)
- ul ol+li { } 3 (tre elementi)
- ul ol li.red { } 13 (una classe, tre elementi)
- li.red.level { } 21 (due classi, un elemento)
- style=”” 1000 (un inline styling)
- p { } 1 (un selettore HTML )
- div p { } 2 (due selettori HTML )
- sith 10 (un class selector)
- div p.sith { } 12 (due HTML selectors e un class selector)
- #sith 100 (un id selector)