Fondamenti dei css parte 3
È possibile che ad un elemento venga applicato più di uno stile.
L'ereditarietà e la concatenazione descrivono come applicare gli stili senza che si verifichino dei conflitti.
Ereditarietà
L'ereditarietà funziona allo stesso modo della struttura XHTML.
<h1>Lorem Ipsum</h1>
<p>Lorem <em>ipsum</em> dolor sit amet,
<strong>consectetuer adipiscing elit...</strong></p>
</body>
In questo scorcio di codice, <body> è il capostipite di <h1>, <p>, <em> e <strong>; in altri termini <h1>, <p>, <em> e <strong> sono tutti discendenti di <body>. <body> è il padre di <h1> e <p>
<p> è il padre di <em> e <strong>.
Da notare che mentre un genitore può avere più di un figlio, nessun figlio può avere più di un genitore.
Il diagramma ad albero qui di seguito visualizzato, illustra come il capostipite contenga i suoi discendenti e come un elemento possa essere, nello stesso tempo, sia genitore che figlio.
A causa dell' ereditarietà, tutti i discendenti di un elemento "erediteranno" lo stesso tipo di carattere e colore dei loro capostipiti, a meno che non li si voglia differenziare con un foglio di stile. Per esempio, se si desidera del testo di colore bianco per il <body>, tutto il testo in esso contenuto sarà bianco, inclusi gli elementi discendenti. Se, invece, associamo a <p> un testo grigio chiaro, allora tutto il testo in esso contenuto e i loro discendenti, saranno grigio chiaro, ma il testo all' interno di <h1> rimarrà bianco. <h1>, in questo caso, è fratello di <p> ed eredita il colore da suo padre, <body>.
L' inserimenmto degli stili di seguito riportati, darà questo esempio:
Ci sono, però, delle eccezioni per il concetto di ereditarietà, ma abbastanza semplici. Per esempio la proprietà background non è ereditaria. Lo sfondo di default è trasparente, quindi uno sfondo definito in un elemento capostipite sarà visto anche attraverso l' elemento discendente.
Concatenazione
La maggior parte della potenza dei CSS deriva dalla possibilità di concatenare diversi Fogli di Stile per ottenere un unico risultato. Una pagina può avere più di un foglio di stile, perchè uno lo può dare il browser, un altro l' utente finale e uno l' autore della pagina. Quando un browser incontra fogli di stile multipli, darà alla pagina il seguente ordine di importanza: autore, utente, browser.
La concatenazione definisce anche i diritti di precedenza all' uso, nel caso in cui si voglia implementare più di un foglio di stile. Per esempio, immaginiamo un sito di grandi dimensioni, con delle sottosezioni distinte nello stile, ma con unico tema per quanto riguarda la grafica; potrebbe avere un foglio di stile globale per tutti gli stili comuni a tutto il sito; poi altri fogli descrittivi solo per le sottosezioni del sito. Una singola pagina potrebbe essere controllata da tre fogli di stile:
- principale.css
- sottosezioni.css
- particolari.css
Tutte le pagine del sito dovranno fare riferimento al file "principale.css" per poter definire la struttura del sito.
I documenti che hanno delle sottosezioni si dovranno riferire al file "sottosezioni.css"; i documenti all' interno di queste sottosezioni avranno come ulteriore riferimento il file "particolari.css", che connoteranno in maniera appropiata quelle sottosezioni.
Il browser darà la precedenza ai Fogli di stile a seconda dell' ordine in cui sono stati inseriti nella intestazione del documento XHTML. Ogni Foglio di Stile scavalcherà il precedente, quindi l' ordine sarà quello fatto nell' elenco più su.
| < Prec. | Succ. > |
|---|
