Ciao, caro lettore.
Questa è la nona lezione sull'apprendimento dei CSS. In questo tutorial vedremo cos'è l'ereditarietà e come evitare errori nell'ereditarietà.
Prima di iniziare questo tutorial (ereditarietà CSS), completare i tutorial precedenti:
Teoria e pratica
Quando scriviamo stili CSS, ci troviamo di fronte al problema che alcune delle nostre proprietà possono sovrapporsi ad altre proprietà, che hanno la priorità. Ma anche, come già saprai dalle lezioni precedenti, alcune proprietà possono ereditare valori dai loro genitori. Vediamo come questo è nel codice.
Esempio di codice html:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <testa> <titolo> casa</ titolo> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"> <link rel = "foglio di stile" type = "text / css" href = "style.css"> </ testa> <corpo> <div id = "contenuto"> <div class = "firstPar"> <p> Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</ p> <p> Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</ p> </ div> <div class = "secondPar"> <p> Cras</ p> <ul> <li> amet condimento</ li> <li> aliquam volutpat</ li> <li> elemento intermedio</ li> </ ul> </ div> </ div> </ corpo> </ html> |
Ora dai un'occhiata all'albero, che è html:
Ora vedete cosa c'è in relazione a cosa e come relazionarsi. E ora un esempio di codice CSS con ereditarietà. Ammettiamo per
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #content (font: 14px bold arial, verdana, sans-serif; color: # C91212;) .firstPar (font: inherit; color: inherit;) .secondPar (font: 10px bold arial, verdana, sans-serif; color: # 000CFF;) |
Come appare nel browser.
EreditàÈ un meccanismo mediante il quale gli stili vengono applicati non solo a elementi specificati, ma anche ai loro discendenti.
Perché è necessario? Per semplificarti la vita! Esempio:
Se non ci fosse ereditarietà, la definizione di "paint green" si applicherebbe solo al tag stesso con la classe green, e il tag al suo interno rimarrebbe nero.
Sulla sinistra c'è il risultato dell'ereditarietà.
A destra è il risultato che si otterrebbe se l'ereditarietà non esistesse.
Si scopre che un'azione così semplice come, ad esempio, impostare un colore del carattere comune per la pagina, si trasformerebbe in un'intera faccenda! Dovresti fornire tutti i tag interni. E così ogni volta che devi impostare degli stili per un elemento e i suoi discendenti!
Spero di averti convinto che l'eredità è una cosa utile. Ora vediamo come gestirlo.
Eredità di proprietà
Sappiate che non tutte le proprietà sono ereditate. Sarebbe assurdo ereditare, per esempio.
In effetti, perché avrei bisogno di bordi attorno a ciascun tag interno? È che ora devo cancellarli con le mie mani?
Non preoccuparti - non farlo! Un certo numero di proprietà, la cui eredità è contraria al buon senso, ad esempio padding, dimensioni, bordi, semplicemente non vengono ereditate.
In realtà, è più facile elencare quelle proprietà che vengono ereditate. Eccoli:
Sulla specificità
Proprietà ereditate, questo è molto utile quando è necessario applicare uno stile ai discendenti di un elemento. Ma se impostassi esplicitamente uno stile, sarebbe, ovviamente, sbagliato se fosse "interrotto" da quello ereditato. Per eliminare completamente questa possibilità, abbiamo concordato che le proprietà ereditate non hanno alcuna specificità. No. Anche zero. Di conseguenza, qualsiasi stile esplicitamente specificato prevarrà sempre su quello ereditato.
Una sfumatura interessante è associata a questo. Il punto è che la specificità del selettore universale è 0 (ricorda, quando calcoliamo la specificità di una regola, semplicemente non ci prestiamo attenzione).
Forse da un punto di vista matematico, questa è una sciocchezza, ma nell'eredità si crede che la specificità "0" sia maggiore di "non c'è alcuna specificità". Pertanto, il selettore universale sovrascriverà tutte le regole ereditate.
Questo è uno dei motivi per cui il selettore universale dovrebbe essere usato con molta attenzione (o meglio, non applicato affatto). Dopotutto, può causare un effetto simile a un cortocircuito, interrompendo le regole ereditate. Per esempio:
* (colore: # 000; / * nero * /) .verde (colore: # 539127; / * verde * /)
Infatti, con questo esempio abbiamo rotto l'ereditarietà della proprietà color e ottenuto lo stesso pessimo risultato della primissima immagine a destra. Il testo all'interno dello span (o qualsiasi altro tag interno) sarà nero.
Ereditarietà e stili del browser
Si dà il caso che ogni browser abbia i propri stili per alcuni tag. Questo è più chiaramente visibile nell'esempio di un collegamento.
Verde (colore: # 539127; / * verde * /)
Come risultato di questo codice, vedremo un'etichetta verde e, molto probabilmente, un collegamento blu. Perché blu? Perché il collegamento non ha ereditato il colore del genitore?
È semplice. Da qualche parte nel foglio di stile del browser c'è qualcosa del genere, posizionato lì dalle attente mani di uno sviluppatore:
A: collegamento (colore: blu)
Quindi si scopre che lo stile ereditato è stato interrotto in modo esplicito (anche se non da me) impostato.
Verde, .verde a (colore: # 539127; / * verde * /)
Ho citato specificamente questo esempio in modo che quando incontri una situazione del genere, non la percepisci come un fallimento nel meccanismo di ereditarietà.
Questo articolo si concentrerà su un argomento così importante come l'ereditarietà dello stile. Lo scopo principale di questo articolo del tutorial è di trasmetterti il meccanismo dell'ereditarietà dello stile, di spiegarti quali sono i suoi principali vantaggi e di risolvere alcune cose che non sono ovvie al riguardo.
Spesso, se i genitori di un bambino sono eccentrici, allora non è in ritardo rispetto a loro, o come dice il proverbio: "una mela non cade lontano da un melo". Per quanto riguarda l'ereditarietà in CSS, non è altro che un metodo per replicare in elementi annidati (discendenti) varie proprietà CSS relative a un elemento della pagina.
Andiamo direttamente a un esempio e esaminiamo l'ereditarietà dello stile utilizzando un elemento HTML come esempio.
che definisce il contenuto visibile della pagina.Disegnare l'elemento
che cambierà il colore e il tipo del carattere:Titolo di secondo livello
Completo paragrafo
In questo esempio, per l'elemento
abbiamo installato verde colore del testo e tipo di carattere Arial... Le proprietà CSS del colore e della famiglia di caratteri sono ereditate, il che significa che queste proprietà si applicheranno anche agli elementi nidificati all'interno (per tutti i suoi discendenti).Attiro la tua attenzione sul fatto che puoi sempre vedere se una particolare proprietà è ereditata o meno nel riferimento CSS completo.
Il risultato del nostro esempio:
Nell'esempio sopra, tutti gli elementi situati all'interno
(i suoi discendenti) ne ereditarono le proprietà. Il meccanismo di ereditarietà ha un sistema multilivello e si estende non solo ai discendenti diretti di un elemento, ma si estende anche a tutti gli elementi annidati. Nel nostro esempio, un tale elemento è l'elemento , che, per analogia con altri elementi, ha ereditato tutte le proprietà dello stile impostato per l'elemento ... Questo è il punto principale dell'ereditarietà utilizzato nei CSS.Il meccanismo di ereditarietà riduce notevolmente il codice CSS, ad esempio, se il nostro elemento ottenuto il colore predefinito - nero, quindi dovremmo impostare lo stile separatamente per questo elemento, che determinerebbe sia il colore che il tipo di carattere, il che aumenterebbe significativamente i costi di manodopera per lo sviluppo di una pagina specifica.
Un altro punto che deve essere compreso è che il meccanismo di ereditarietà funziona in modo simile non solo per i selettori di tipo, ma anche per tutti i tipi di selettori discussi negli articoli precedenti su questo argomento. Diciamo che abbiamo creato un selettore di classe con proprietà CSS simili e lo abbiamo applicato a un elemento
, quindi in questo caso tutti gli elementi nidificati in esso erediteranno anche queste proprietà.Utilizzerai in seguito queste funzionalità CSS per semplificare il lavoro di stilizzazione degli elementi del documento.
Limiti e sfumature dell'ereditarietà
Restrizioni:
- Le proprietà che influiscono sul posizionamento degli elementi nella pagina, le proprietà responsabili dei margini esterni e interni di un elemento, le proprietà responsabili dei bordi degli elementi non vengono ereditate. Considereremo tutte queste proprietà in dettaglio più avanti nel tutorial. Di nuovo, puoi sempre vedere se una proprietà specifica è ereditata o meno nel sito nel riferimento CSS.
- Voglio che tu capisca che molte proprietà non vengono ereditate per ragioni oggettive, immaginiamo di creare un confine per l'elemento genitore e dopo che tutti i discendenti, secondo questa logica, devono ereditare questa proprietà, il che sembrerebbe assurdo e, al contrario , aumenterebbe il lavoro di creazione degli stili (annullandoli o ripristinandoli).
Sfumature:
Tutti i browser moderni utilizzano i propri stili CSS in linea per gli elementi HTML, questi stili, se necessario, è possibile guardare un elemento specifico sul sito nel riferimento HTML (valore CSS predefinito). Nel prossimo articolo, impareremo come azzerare gli stili in linea per rendere le tue pagine uguali in tutti i browser più diffusi.
E ora, usando l'esempio di un elemento che definisce un collegamento ipertestuale, considereremo un esempio in cui considereremo perché alcuni elementi non ereditano alcune delle proprietà del loro antenato:
Il paragrafo che contiene in sé href = "#">
collegamento ipertestuale.In questo esempio, per l'elemento
abbiamo impostato i seguenti stili: verde colore del testo e mancanza di decorazione del testo (rimossa la sottolineatura in basso). Attenzione all'elemento nell'immagine, non è cambiato completamente. Vediamo di seguito (dopo aver visionato l'immagine) perché questo sta accadendo.Il risultato del nostro esempio:
Quando si verifica un conflitto, vince il più forte; nei CSS, questo è solitamente uno stile definito in modo esplicito. Apriamo gli strumenti per sviluppatori (per Chrome è F12). Nota quali sono le proprietà CSS integrate del browser ( foglio di stile agente utente) qualsiasi collegamento ( qualsiasi collegamento) nel documento. I seguenti stili sono impostati per questo: colore del testo blu (-link-webkit- il valore predefinito del browser), la decorazione del testo (underscore) e viene determinato che il browser imposta automaticamente il cursore (il valore CSS automatico della proprietà cursor).
Di seguito sono riportate le proprietà che sono state ereditate ( Ereditato da) elemento da ... Come puoi vedere, il browser ha eliminato tutti gli stili degli elementi. , per il motivo che l'elemento lo stile che definisce il colore del testo è definito esplicitamente (stile in linea per impostazione predefinita) e la proprietà che definisce la decorazione del testo non ereditato e viene visualizzato con una leggera trasparenza negli strumenti di sviluppo, ma anche se fosse ereditato, non verrebbe applicato per analogia con il colore del test (per l'elemento anche questa proprietà è definita esplicitamente).
Tali conflitti tra stili sono sempre risolti dal browser, e secondo quali regole determina chi dà la priorità e come dovrebbe portarsi in questo o quel caso, da che parte stare, è determinato dalle regole cascate... Parleremo di più delle regole a cascata nel prossimo articolo del tutorial.
Domande e compiti sull'argomento
Prima di passare al prossimo articolo, rispondi alle seguenti domande.
Il principale motore della crescita del web all'inizio del millennio è stato consumo contenuto. I siti sono stati creati per fornire ai propri visitatori qualsiasi informazione utile o contenuto di intrattenimento. Ma negli ultimi anni, l'importanza delle risorse web che forniscono servizi agli utenti è cresciuta notevolmente. generare contenuti (editor di testo e immagini, fogli di calcolo, messaggistica istantanea, ecc.). Ciò ha determinato la trasformazione dei siti in applicazioni a pagina singola e la migrazione sul web di interfacce complesse che prima erano appannaggio dei programmi applicativi.
Nel processo di queste trasformazioni e migrazioni, si è scoperto che la crescita dell'intensità del lavoro di creazione e mantenimento di un'interfaccia web supera significativamente la crescita della sua complessità. Hanno provato (e stanno ancora cercando) di risolvere il problema suddividendo in moduli, astrazione, incapsulamento. A questo scopo sono stati creati un gran numero di framework JavaScript (Backbone, Ember, Angular), motori di template HTML (Jade, Handlebars), sistemi di gestione delle dipendenze (RequireJS), ecc.
Il più difficile da questo punto di vista si è rivelato essere il CSS, dove, per il design del linguaggio, qualsiasi proprietà dichiarata in qualsiasi file CSS incluso o tag di stile può influenzare la visualizzazione di qualsiasi elemento dell'albero DOM.
Formalizzazione del compito.
Per semplicità, supponiamo che tutto il codice JavaScript sia racchiuso in moduli che non sanno nulla l'uno dell'altro e incapsulano tutto ciò di cui hanno bisogno per funzionare. Il modulo sa come generare la sua rappresentazione HTML (chiamiamola bloccare) e dove inserirlo nell'albero del DOM. In questo caso, i blocchi possono essere annidati l'uno nell'altro. A livello di markup, il blocco è composto da elemento radice e elementi figlio.Il compito è che la visualizzazione degli elementi di qualsiasi blocco può essere influenzata solo da deliberato una modifica nella vista HTML e nei corrispondenti file CSS e tag di stile.
Qualsiasi modifica involontaria nella visualizzazione degli elementi del blocco verrà richiamata stili che perdono.
Possono verificarsi perdite di stili come quando si modificano le proprietà di elementi di altri blocchi ( proprietà che perdono), così come le modifiche nell'albero DOM ( perdite a cascata).
Fonti di perdite di stile
Se consideriamo un qualsiasi blocco da solo, gli stili possono fuoriuscire sia dall'esterno che dall'esterno. A causa del fatto che una perdita verso l'esterno per un blocco sarà una perdita dall'esterno per un altro, quando si classificano le perdite, ci si può limitare al caso delle perdite dall'esterno.1. Eredità della proprietà
Se la proprietà CSS di qualsiasi elemento non ha un valore esplicito, viene utilizzato il valore predefinito. Se questo valore viene ereditato, il valore della proprietà viene impostato sul valore della proprietà dell'elemento padre.Pertanto, l'elemento radice del blocco corrente può ereditare gli stili del suo genitore, che per definizione appartiene a un altro blocco.
Per esempio,
.blocco esterno (colore: rosso;)
2. Conformità delle proprietà
Se la proprietà CSS di qualsiasi elemento non ha un valore esplicito, viene utilizzato il valore predefinito. Se questa proprietà viene regolata in modo che corrisponda alla proprietà dell'elemento genitore (ad esempio, come proprietà di larghezza e altezza con il valore predefinito di auto) o imita (ad esempio, come proprietà background-color con il valore predefinito trasparente), allora l'utente finale avrà l'impressione che gli stili del genitore siano trapelati sugli stili del figlio.Per esempio,
.blocco esterno (sfondo: rosso;)
Vale la pena notare che l'esistenza stessa di perdite di stile attraverso il conformismo può essere messa in discussione, dal momento che gli stili dell'elemento genitore formalmente non vengono applicati all'elemento figlio, ma in allenamento questo comportamento può anche essere considerato desiderabile. Ma se partiamo da formale punto di vista, bisogna ammettere che il conformismo degli stili viola decisamente il loro incapsulamento. Come pratico prova l'autore invita il lettore curioso a usare il test dell'anatra.
3. Caos a cascata
L'applicazione degli stili ai selettori di destinazione è un processo in tre fasi.Nella prima fase da Totale Gli alberi DOM sono selezionati Tutti elementi che corrispondono al selettore dell'elemento di destinazione. Ad esempio, per il selettore h3 .current-block, il primo passaggio selezionerà tutti gli elementi con il tag h3. Non c'è modo di limitare lo spazio di selezione a qualsiasi parte dell'albero DOM.
Nella seconda fase, gli elementi selezionati vengono filtrati in modo che corrispondano al selettore attraversando gli elementi padre dell'elemento di destinazione. Quando si utilizza il combinatore discendente, la corrispondenza può arrivare fino alla radice dell'albero DOM. Quando si utilizza il combinatore di pari livello generale ~ (combinatore di pari livello generale), fino al primissimo elemento di pari livello.
Per esempio,
.blocco corrente h3 (sfondo: blu;) .blocco esterno h3 (sfondo: rosso;)
Sono volutamente fatto rosso
Sono rosso a causa del caos a cascata
L'unico modo per limitare lo spazio di ricerca è utilizzare il combinatore figlio e il combinatore fratello adiacente. Per fare ciò, è necessario impostare il percorso esatto nell'albero DOM dall'elemento di destinazione all'elemento radice del blocco, il che porta ad un aumento dell'accoppiamento del codice CSS e HTML.
Nel terzo passaggio, le proprietà di stile vengono assegnate alle destinazioni selezionate e filtrate. Inoltre, se più selettori si applicano allo stesso elemento target, ciascuno con la propria variante della proprietà, allora il valore della proprietà è determinato in base alla specificità dei selettori e, se è uguale, in base all'ordine di dichiarazione.
Pertanto, in determinate condizioni (combinatori utilizzati, rapporto di specificità, ordine di dichiarazione), gli stili degli elementi del blocco esterno possono influenzare gli stili degli elementi del blocco annidato. Questa influenza potrebbe essere evitata se fosse possibile specificare la regione dell'albero DOM in cui selezionare e filtrare gli elementi di destinazione.
4. Condizionamento posizionale
Gli elementi del blocco possono cambiare la loro visualizzazione a seconda della posizione del blocco nell'albero DOM quando si utilizzano combinatori fratelli (+ e ~) o pseudo-classi (: primo figlio, ecc.) nei selettori.Per esempio,
Block (sfondo: rosso;) .block + .block (sfondo: blu;)
In questo capitolo:
Eredità
Quando si specifica uno stile per un elemento, alcune delle proprietà possono essere ereditate dai suoi figli e discendenti, questo effetto è chiamato ereditarietà.
Ad esempio, tutti gli elementi situati all'interno di un elemento
sono i suoi figli e discendenti. Se in stile per imposta il colore del testo su rosso usando la proprietà CSS color, quindi anche il colore del testo di tutti i suoi figli e discendenti diventerà rosso:
Il colore del testo dell'intestazione è rosso
Anche il colore del testo del paragrafo è rosso.
Le proprietà ereditate possono essere sovrascritte applicando una regola individuale per l'elemento desiderato:
Colore del testo dell'intestazione blu
Il colore del testo del paragrafo è rosso.
Calcolo della specificità (priorità) dei selettori
Esistono molti modi per applicare uno stile visivo a un elemento desiderato. Ma cosa succede se due o più selettori che si escludono a vicenda selezionano lo stesso elemento? Questo dilemma è affrontato da due principi CSS: specificità del selettore e cascata.
Specificità del selettore(specificità del selettore) determina la loro priorità nel foglio di stile. Più un selettore è specifico, maggiore è la sua priorità. Per calcolare la specificità di un selettore, vengono utilizzati tre gruppi di numeri (a, b, c), il calcolo è eseguita come segue:
- Viene conteggiato il numero di identificatori nel selettore (gruppo a)
- Conta il numero di selettori di classe, attributi e pseudo-classi nel selettore (gruppo b)
- Conta il numero di selettori di tipo e pseudo-elementi nel selettore (gruppo c)
- Un selettore all'interno di una pseudo-classe di negazione (: not) conta come qualsiasi altro selettore, ma la pseudo-classe di negazione stessa non partecipa al calcolo del selettore
- Selettore universale (*) e combinatori non sono coinvolti nel calcolo del peso del selettore
Nell'esempio seguente, i selettori sono disposti in ordine di specificità crescente:
* / * a = 0 b = 0 c = 0 -> specificità = 0 * / li / * a = 0 b = 0 c = 1 -> specificità = 1 * / ul li / * a = 0 b = 0 c = 2 -> specificità = 2 * / ul ol + li / * a = 0 b = 0 c = 3 -> specificità = 3 * / h1 + * / * a = 0 b = 1 c = 1 -> specificità = 11 * / ul ol li.red / * a = 0 b = 1 c = 3 -> specificità = 13 * / li.red.level / * a = 0 b = 2 c = 1 -> specificità = 21 * / # x34y / * a = 1 b = 0 c = 0 -> specificità = 100 * / # s12: not (p) / * a = 1 b = 0 c = 1 -> specificità = 101 * /
La priorità più alta è il numero del gruppo "a", il numero del gruppo "b" ha la priorità media, il numero del gruppo "c" ha la priorità più bassa. I numeri di gruppi diversi non vengono riassunti in un unico comune, ad es. prendiamo dall'esempio l'ultima riga con la specificità del selettore "101" - questo non significa il numero "centouno", significa che un selettore del gruppo "a" (identificatore) e un selettore del È stato utilizzato il gruppo "c" (selettore di tipo).
Uno stile in linea ha la precedenza su uno stile definito in un foglio di stile interno o esterno. Tuttavia, se viene specificata una dichiarazione speciale!Importante per una proprietà specifica in un foglio di stile interno o esterno, questa avrà la precedenza sul valore di una proprietà simile nello stile interno. La dichiarazione!Importante viene visualizzata dopo il valore della proprietà, prima del punto e virgola:
Primo paragrafo
Secondo paragrafo.
cascata
La cascata è una funzionalità CSS mediante la quale il browser determina quali valori di proprietà verranno applicati a un elemento quando si verifica un conflitto di proprietà. Un conflitto di proprietà si verifica quando vengono definite più regole per un elemento i cui selettori hanno la stessa specificità e contengono le stesse proprietà, ma con valori diversi.
La cascata funziona come segue: se nel foglio di stile sono definite più regole per un elemento, i cui selettori hanno la stessa specificità e contengono proprietà in conflitto, allora i valori delle proprietà in conflitto della regola che si trovano sotto nel foglio di stile sono impostati per l'elemento:
Il colore del testo del paragrafo è verde.
Se regole diverse per un elemento contengono proprietà che non sono in conflitto, vengono combinate in un unico stile, ad es. ogni nuova regola aggiunge nuove informazioni di stile a quella precedente:
H1 (colore: grigio; famiglia di caratteri: sans-serif;) h1 (bordo in basso: 1px nero pieno;)
Il codice nell'esempio precedente è equivalente al codice nell'esempio seguente, in cui tutte e tre le proprietà sono specificate in una regola:
H1 (colore: grigio; famiglia di caratteri: sans-serif; bordo inferiore: 1px nero solido;)
Di solito, vengono indicate regole aggiuntive per un elemento nei casi in cui uno stile è stato impostato per più elementi contemporaneamente, ma oltre a questo, è necessario aggiungere qualcos'altro per un elemento specifico:
H1, h2, h3 (/ * stesso stile per tre elementi * / colore: grigio; famiglia di caratteri: sans-serif;) / * regola aggiuntiva per i titoli di secondo livello * / h2 (bordo in basso: 1px nero pieno;)
