Ereditarietà delle proprietà CSS. CSS

La nota: attivato versione adattiva sito che si adatta automaticamente a taglia piccola Il tuo browser e nasconde alcuni dettagli del sito per la leggibilità. Buona visione!

Sono lieto di accogliervi nuovamente tutti sulle pagine del blog. Luogo in poi! Nell'ultimo articolo, ne abbiamo brevemente parlato e risolto diversi semplici esempi... Oggi il nostro argomento è una cosa così importante come l'ereditarietà nei CSS. Ereditarietà CSS si chiama passaggio di proprietà dall'elemento genitore ai figli. O se sei più chiaro: passare le proprietà CSS dal tag in alto a quelle nidificate. Inoltre, l'ereditarietà o meno di una proprietà dipende dalla proprietà stessa e non dai tag a cui è applicata. Come funziona? È molto semplice, torniamo al nostro layout, con l'aiuto del quale abbiamo imparato:

Se scriviamo in CSS:

Corpo (colore: verde;)

Quel colore della scritta "E qui scriviamo qualsiasi testo di nostro interesse" stranamente diventerà verde. E cosa accadrà se racchiudiamo la nostra iscrizione in un blocco? Cioè, ecco cosa è diventata la parte del codice che ci interessa:

Quindi l'iscrizione rimarrà ancora verde, poiché la proprietà colore ereditato, il che significa che è stato passato dal tag corpo al cartellino attaccato ad esso div e oltre (se fosse dove). E subito un compito per te: di che colore sarà la nostra iscrizione se avremo il seguente codice

Per riferimento - un tag che denota semplicemente una parte di testo. Se non viene specificato nulla in CSS, non fa nulla.

Risposta corretta: rosso. Poiché il tag div ha interrotto l'ereditarietà dal corpo (ma solo per i tag nidificati all'interno di un div).

Qual è la priorità dell'ereditarietà nei CSS?

Sì, assolutamente nessuno. La precedenza dell'ereditarietà nei CSS non è nemmeno zero, semplicemente non c'è. Cosa ci dice questo? Sì, qualsiasi proprietà impostata direttamente sul tag nidificato verrà eseguita al posto della proprietà che avrebbe ereditato (ma non abbiamo permesso che ciò accadesse, poiché abbiamo specificato la stessa proprietà, ma con un valore diverso).

Questo è chiaramente dimostrato dall'esempio precedente, dove il tag div non ha dato un tag span eredita il colore del testo verde dal tag corpo, e tutto perché siamo per il tag div Hanno chiaramente annunciato il colore rosso, il che significa che il colore rosso ha la massima priorità ...

O forse no? Diamo un'occhiata a un esempio di seguito, dove per lo stesso tag sarà esplicitamente, ma in modo diverso, viene specificata la stessa proprietà. Quindi diamo un'occhiata al nostro CSS:

Div p (Colore: verde;) p (colore: rosso;)

Sia lì che là il colore è chiaramente indicato per i paragrafi, ma in uno dei casi, solo per i paragrafi all'interno di un blocco, vediamo il risultato:

E solo all'interno di un paragrafo - rosso

Sì amici, questa volta niente di rivoluzionario, la logica ha vinto :) In effetti, è per questo che sono tabelle a cascata, in modo da poter specificare i colori separatamente per gli elementi nidificati e non preoccuparsi delle proprietà "intersecanti".

Riassumiamo: L'ereditarietà CSS ha la priorità più bassa possibile, ma ricorda che non tutte le proprietà vengono ereditate. Le proprietà che hanno un chiarimento delle circostanze (al passaggio del mouse, se un tag è annidato all'interno di un altro, ecc.) hanno la precedenza sulle proprietà specificate per tutti gli altri casi.

Altro punto importante: se dopo Valori CSS proprietà metti uno spazio e scrivi ! importante, allora questa proprietà avrà sempre e ovunque la massima priorità. Esempio di registrazione:

P (colore: rosso! Importante;)

Ti consiglierei di evitare questa tecnica, invece di pensare in anticipo struttura corretta in modo da non dover sovrapporre una proprietà con un'altra in modo così grossolano, ma a volte il suo utilizzo può essere molto pratico.

E infine, ecco cosa dovresti tenere a mente se qualcosa non funziona per te - se lo scrivi in ​​questo modo:

P (colore: rosso;) p (colore: verde;)

Quindi verrà applicato il valore che è sotto nel codice, cioè verde... Possono esserci molti casi del genere, soprattutto se hai poca esperienza, e allo stesso tempo possono essere abbastanza vari, per navigare rapidamente nel problema, ti consiglio di usarlo. Puoi leggere come usarli e cosa sono al link sopra.

1) Le proprietà specificate per una classe (classe) o un identificatore univoco (id) hanno la priorità più alta e la priorità di id è maggiore di quella di classe. Imparerai tutto su questi selettori e sul concetto di selettore in generale nel prossimo articolo.

Lascia che ti ricordi ancora una volta che il miglior insegnante di HTML e CSS è pratica + riferimento, che, tra l'altro, ho consigliato nell'articolo su. Consiglio anche di iscrivermi agli aggiornamenti sul mio blog, perché dopo l'istruzione generale e gli articoli introduttivi, scriverò sicuramente di alcune delle complessità e, se posso dirlo, dei segreti del layout corretto del sito.

Per oggi è tutto, grazie per l'attenzione!

Tutte le proprietà CSS sono divise in quelle ereditate dagli elementi discendenti dai loro elementi antenati e quelle che non lo sono. Quindi, per esempio, se imposti un bordo per un paragrafo (forma un bordo), allora tutti gli elementi nidificati in esso (elementi figli) non erediteranno questa proprietà CSS, poiché in in questo caso l'ereditarietà non ha alcun effetto benefico. D'accordo, non sarebbe del tutto ragionevole sovrascrivere i bordi ereditati dal paragrafo padre per ogni elemento figlio. Ma, se impostiamo per un paragrafo, per esempio, colore blu font, verrà ereditato da tutti gli elementi discendenti fino a quando non lo ridefiniremo, se necessario, per un elemento specifico, e questo è più efficiente rispetto alla definizione di un carattere separatamente per ciascun elemento discendente. Puoi vedere quali proprietà di stile sono ereditate e quali no, puoi farlo sul sito web ufficiale del W3C (tabella Proprietà CSS ).

Stili CSS a cascata

Stili a cascata- questa è una funzionalità CSS integrata, che consiste nel fatto che se più stili vengono applicati a un elemento contemporaneamente, lo stile risultante sarà formato da tutti i tipi di proprietà presenti in questi stili e se ce ne sono due o proprietà più identiche, il valore della proprietà verrà applicato all'elemento con la priorità più alta in questa situazione.

Iniziamo guardando il caso più semplice mostrato nell'Esempio 1.26.

Testo di paragrafo semplice.

Il testo del paragrafo con la classe.

Sostituiamo sia il colore del carattere che la larghezza del paragrafo.

Esempio 1.26. Il caso più semplice stili CSS a cascata

Come puoi vedere dall'esempio, al primo paragrafo viene applicato solo il primo stile del foglio di stile interno, che gli conferisce uno sfondo nero e un colore del carattere rosso. Due stili dal foglio di stile interno sono già applicati al secondo paragrafo, quindi lo stile risultante è formato come segue: primo, tutte le proprietà dello stile sono prese con la specificità (specificità) del selettore maggiore (nel nostro caso, questo è il secondo stile), quindi le proprietà mancanti degli altri vengono aggiunte a questo elemento stili con meno specificità (specificità) del selettore (nel nostro caso, questo è il primo stile). Questo aggiungerà una larghezza per il secondo paragrafo e ridefinirà lo sfondo dal nero al giallo. Al terzo paragrafo vengono applicati contemporaneamente tre stili: due dal foglio di stile interno e il proprio stile in linea. Lo stile in linea ha la priorità più alta, quindi sovrascriverà il colore del carattere specificato nel primo stile e la larghezza specificata nel secondo stile nel foglio di stile interno.

Pertanto, per calcolare correttamente lo stile risultante applicato a un elemento, è necessario conoscere le regole per la formazione di questo stile in caso di sovrapposizione di più stili contemporaneamente. Queste regole si riducono al calcolo della specificità dei selettori applicati a un elemento di stili che contengono le stesse proprietà css con significati diversi, e anche, in caso di uguaglianza della specificità dei selettori, per confrontare i tipi di stili, confrontare la posizione delle tabelle con questi stili o, se sono nello stesso foglio di stile, confrontando la loro posizione nel codice di questa tabella. Consideriamo questo problema in modo più dettagliato.

Specificità dei selettori CSS

Se vengono applicate due regole allo stesso elemento che contengono le stesse proprietà CSS ma hanno valori diversi, sorge un conflitto che può essere risolto confrontando la specificità dei selettori di queste regole. Come risultato di questa decisione, all'elemento verrà applicata la proprietà della regola con la specificità del selettore più alta.

La specificità del selettore viene calcolata utilizzando tre numeri (a, b, c). Succede come segue:

• al numero a è assegnato il numero di identificatori nel selettore;
• b viene assegnato il numero totale di classi, attributi e pseudo-classi nel selettore;
• al numero c è assegnato il numero totale di elementi e pseudo-elementi.

Dopo aver contato i numeri per tutti i selettori confrontati, il selettore con maggiore specificità sarà considerato quello con più numero a, indipendentemente dalle dimensioni dei numeri b e c. Se i selettori confrontati hanno lo stesso numero a, verrà confrontato il loro numero b e, se necessario, il numero c (vedi esempio 1.27).

/ * Scriviamo un esempio di codice html * / / *

Testo...

* / / * Qui a = 1, poiché c'è 1 identificatore nel selettore; * / / * b = 0, perché ci sono 0 classi, 0 attributi e 0 pseudo-classi; * / / * c = 0, perché ci sono 0 elementi e 0 pseudo-elementi; */ /* poi. la specificità è (1,0,0). * / #m_id (colore: blu;) / * Qui a = 0, perché non ci sono identificatori nel selettore; * / / * b = 3, perché c'è 1 classe, 1 attributo e 1 pseudo-classe; * / / * c = 2, perché ci sono due elementi: "p" ed "em"; */ /* poi. la specificità è (0,3,2). * / p.my_class em: hover (color: red;) / * Ciò significa che il colore del testo nel codice di esempio sarà blu, perché nella seconda regola il numero a = 0, e nella prima regola a = 1. * / / * Ma se le specificità dei selettori fossero uguali, lo stile della regola inferiore avrebbe la precedenza. * /

Esempio 1.27. Confrontando la specificità dei selettori

Tipi e precedenza degli stili CSS

Se la specificità dei selettori delle regole confrontate è uguale, la priorità sarà determinata dal tipo di stile, dalla posizione dei fogli di stile o, se compaiono nello stesso foglio di stile, dal confronto della loro posizione nel codice di questo foglio. Elenchiamo i principali tipi di stili in ordine di priorità crescente.

• Stile del browser ha la precedenza più bassa e viene applicato per impostazione predefinita agli elementi del codice html a cui non viene applicata alcuna altra formattazione, più semplicemente al codice html "nudo".
• Stile utenteè impostato nelle impostazioni del browser dall'utente ed è essenzialmente uno stile di browser predefinito modificato dall'utente. Quindi, se l'utente ha cambiato lo stile del browser, quello predefinito sarà lo stile dell'utente.
• Lo stile dell'autore impostato dall'autore della pagina (programmatore) e ha una priorità ancora maggiore. È lui che ci interesserà più di tutti.

Lo stile di un autore è uno stile risultante formato dai diversi tipi di stili individuali che lo compongono, sempre a cascata. Li elenchiamo in ordine di precedenza crescente quando applicati allo stesso elemento, a condizione che la specificità dei selettori sia uguale.

• Gli stili ereditati dagli elementi discendenti dai loro genitori hanno la priorità più bassa.
• Gli stili specificati nelle tabelle esterne hanno la precedenza. In questo caso, le regole che appaiono nel codice del foglio di stile esterno sottostante (cioè, si verificano dopo) hanno una priorità più alta rispetto alle regole che si trovano nel codice di questa tabella sopra (cioè, prima). Inoltre, di diversi fogli di stile esterni, le tabelle collegate al documento utilizzando l'elemento "collegamento" sotto nel codice di questo documento. Di conseguenza, se la tabella è inclusa nel codice del documento sopra, la priorità dei suoi stili sarà inferiore.
• Stili di tabella interni(situato all'interno di contenitori "stile") hanno la precedenza sugli stili delle tabelle esterne, ma solo se si trovano nel codice sotto l'elemento "collegamento" con cui era collegato il foglio di stile esterno. Di nuovo, le regole che appaiono nel codice per il foglio di stile interno sottostante hanno la precedenza sulle regole che appaiono nel codice per questo foglio di stile sopra. Inoltre, se un documento utilizza più fogli di stile interni, ad es. ci sono diversi elementi "stile", allora gli stili di quelle tabelle che si trovano nel codice del documento di seguito hanno una priorità più alta.
• Viene data ancora più priorità a stili in linea che sovrascrivono le regole con qualsiasi specificità del selettore. In effetti, è molto più specifico se lo stile si trova nel tag di apertura dell'elemento.

Parametro di servizio!

Separatamente, va detto del parametro di servizio!Importante, che viene specificato, se necessario, nei fogli di stile interni ed esterni dopo il valore della proprietà css separato da uno spazio, ad esempio p (colore: verde!Importante; ). La proprietà di stile in cui è specificato questo parametro, ha la massima priorità indipendentemente dalla posizione del foglio di stile nel codice del documento o dalla regola stessa all'interno del foglio di stile, ma solo in una situazione in cui le specificità degli stili sono uguali (e non dimenticare che la specificità dell'inline lo stile dovrebbe essere considerato il più alto in ogni caso!). Ancora, se ci sono più proprietà con un tale parametro, e anche la specificità dei selettori corrispondenti è la stessa, allora la priorità sarà determinata dal tipo di stile, dalla posizione dei fogli di stile o, se finiscono in lo stesso foglio di stile, confrontando la loro posizione nel codice di questo foglio. ...

Da quanto sopra, segue una semplice conclusione: più uno stile è vicino a un elemento e più specifico è il suo selettore, più priorità ha.

Utilizzo delle stesse proprietà CSS in una regola

Infine di questo paragrafo aggiungiamo che nella stessa regola a volte vengono impostate due proprietà identiche, ma con valori diversi. Questo di solito viene fatto quando uno dei valori delle proprietà non è supportato da alcuni browser, quindi viene posizionato per secondo nel blocco di dichiarazione (stile) e un'altra regola, supportata da tutti i browser, viene posizionata per prima. Di conseguenza, se la pagina viene aperta in un browser in cui la seconda regola non ha effetto, verrà ignorata e il browser applicherà la prima regola. Se la pagina viene aperta in un browser in cui sono valide sia la prima che la seconda regola, la seconda regola avrà una priorità maggiore, perché segue nel codice più avanti. Quindi, in ogni caso, l'idea del programmatore verrà implementata e il valore della proprietà impostato dal browser di default o ereditato dall'elemento genitore non verrà applicato.

Salto veloce ad altre pagine

• Ereditarietà CSS, cascata e precedenza

Ereditarietà delle proprietà CSS

La maggior parte delle proprietà non passa i propri valori dal genitore al figlio.

Per alcuni, l'impostazione predefinita è adattata per corrispondere al genitore

E solo pochi (vedi l'elenco delle proprietà CSS2 se la colonna "Ereditato" è "sì") ereditano il valore della proprietà dal genitore

Proprietà che cambia tutti gli stili CSS tranne direction e unicode-bidi

Questi sono i valori che possono essere applicati a qualsiasi proprietà CSS. Lo stile del browser viene ripristinato ovunque, incluso tag di input, progresso, ecc.

CSS che eredita stili dal genitore: inherit

Se è necessario specificare l'antenato e il discendente gli stessi valori proprietà, è più conveniente utilizzare eredita per ulteriori modifiche: sarà sufficiente modificare il valore solo per il genitore.

eredita non trasferisce il valore finale, ma ciò che è specificato negli stili del genitore

Esempio 1: qual è la differenza tra width: inherit; e larghezza: 100%;

Esempio 2: altezza massima: 100%; non funziona

Esempio 3: come duplicare gli stili CSS di un genitore

ereditare porta il valore del genitore diretto, non la posizione specifica

Viene copiato tutto, anche ciò che non è specificato dallo sviluppatore negli stili del genitore

CSS iniziale: annulla ereditarietà

Per scoprire i valori iniziali delle proprietà che dipendono dal browser, come il colore e la famiglia di caratteri, è possibile utilizzare l'iniziale

Esempio 1: non consentire l'ereditarietà della proprietà

Esempio 2: rimuovere la proprietà per un selettore più stretto

iniziale ti permette di reimpostare tutti gli stili, inclusi quelli che il browser ha impostato per il tag predefinito

Esempio: per widget di terze parti, disabilita l'ereditarietà degli stili e gli stili impostati dal browser

unset CSS: ripristina lo stile del browser

Il comportamento è standard, solo tutti i tag diventano impersonali, come se fossero tagliati allo stesso modo. Cioè, come iniziale, elementi di blocco diventare in linea.

Esempio: annulla tutti i possibili stili di input

Compiti a casa: nei commenti, suggerisci il tuo esempio di utilizzo dei valori ereditati, iniziali e non impostati, altrimenti la mia immaginazione è già stata esaurita 🙂

5 commenti:

Anonimo Ciao!
Puoi dirmi perché è così?
https://jsfiddle.net/og96q6x5/

Perché questo farabutto H2 sta spingendo giù il DIV giallo? In genere volevo senza rosso. Ha spostato quello giallo. L'ho fatto in un altro DIV, quindi ha spostato sia il giallo che il rosso.
Come mai?
Ciao NMitra, per quanto ho capito non sei soddisfatto del crollo? Guarda http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Ci sono soluzioni al problema Anonimo Grazie. Ho già scavato questo vuoto su come risolvere questo crollo. O come il tuo o la pulizia DIV.

non ho altro.
Ecco cosa è successo. Che è quello che volevo.
Sembra che siamo riusciti a pacificarlo con display: inline-block.
https://jsfiddle.net/og96q6x5/2/

Ma la domanda rimaneva. È dentro la Diva, non dovrebbe muoversi lungo questa Diva. Non toccare nessuno?
E perché con il display: inline margiņ-top: non funziona?
https://jsfiddle.net/og96q6x5/1/
Anonimo Grazie Trovato.
allineamento verticale: con display: in linea; e display: blocco in linea;

Sì. Com'è divertente.
NMitra E perché margiņ-top non funziona con il display: inline? - Perché non è a blocchi, non ha altezza

shpargalkablog.ru

Una classe CSS può ereditare da una o più altre classi?

Mi sento stupido per essere stato un programmatore web per così tanto tempo e non conoscevo la risposta a questa domanda, spero davvero che sia possibile e semplicemente non lo sapevo, non quella che penso sia la risposta (vale a dire: impossibile) .

La mia domanda è se è possibile creare una classe CSS che "eredita" da un'altra classe CSS (o più di una).

Ad esempio, supponiamo di avere:

Quello che vorrei fare è qualcosa del genere:

dove la classe.composite apparirà in linea e avrà uno sfondo rosso

27 risposte

Ci sono strumenti come LESS che ti permettono di comporre CSS per saperne di più alto livello un'astrazione simile a quella che stai descrivendo.

Meno chiamate a questi mixin

Puoi aggiungere più classi a un elemento DOM, ad es.

L'ereditarietà non fa parte dello standard CSS.

Sì, ma non proprio con questa sintassi.

Un elemento può prendere diverse classi:

Ed è vicino quanto te, sfortunatamente. Mi piacerebbe vedere questa funzione insieme ad alcuni fantastici alias.

Mantieni gli attributi generali e assegna nuovamente gli attributi specifici (o sovrascritti).

No, non puoi fare qualcosa del genere

Questi non sono "nomi di classe" nel senso OO. .qualcosa e .else non sono più selettori.

Ma puoi specificare due classi per l'elemento

oppure puoi esplorare un'altra forma di eredità

Dove le astrazioni backgroundcolor e color ereditano dalle impostazioni nel div allegato che ha lo stile .foo. Potrebbe essere necessario controllare le specifiche esatte del W3C. inherit è l'impostazione predefinita per la maggior parte delle proprietà, ma non per tutte.

Mi sono imbattuto in questo problema e ho finito per utilizzare la soluzione di JQuery per far sembrare che la classe potesse ereditare da altre classi.

Questo troverà tutti gli elementi con la classe "composite" e aggiungerà le classi "qualcosa" e "altro" agli elementi. Quindi qualcosa come

Tempismo perfetto... Sono passato da questa domanda alla mia e-mail per trovare un articolo su Less, una libreria Ruby che fa questo, tra l'altro:

Dato che super sembra footer ma con un font diverso, userò il metodo include della classe Less (lo chiamano mixin) per includere anche queste dichiarazioni:

La cosa migliore che puoi fare è

SCSS per questo esempio sarà simile a questo:

Sfortunatamente, i CSS non forniscono "ereditarietà" come fanno i linguaggi di programmazione come C++, C# o Java. Non puoi dichiarare una classe CSS e poi estenderla con un'altra classe CSS.

Tuttavia, puoi applicare più di una classe a un tag nel tuo markup. in questo caso esiste un complesso insieme di regole che determinano quali stili effettivi verranno applicati dal browser.

I CSS cercheranno tutti gli stili che possono essere applicati in base al tuo markup e combineranno gli stili CSS di quelle poche regole insieme.

In genere, gli stili vengono combinati, ma quando sorgono conflitti, di solito vince lo stile dichiarato in seguito (a meno che non venga specificato un attributo importante in uno degli stili, nel qual caso vince). Inoltre, gli stili applicati direttamente a elemento HTML, ha la precedenza sugli stili di classe CSS.

Mi rendo conto che questa domanda è molto vecchia ora, ma non c'è niente qui!

Se l'obiettivo è aggiungere una singola classe che implica proprietà di più classi, come soluzione personalizzata, consiglierei di utilizzare JavaScript / jQuery (jQuery non è realmente necessario, ma sicuramente utile)

Se hai, ad esempio, .umbrellaClass che "eredita" da .baseClass1 e .baseClass2, potresti avere del JavaScript pronto per l'uso.

Ora tutti gli elementi .umbrellaClass avranno tutte le proprietà come .baseClass s. Nota che, come l'ereditarietà OOP, .umbrellaClass può avere o meno proprietà proprie.

L'unico avvertimento qui è considerare se ci sono elementi creati dinamicamente che non esisteranno quando questo codice si attiva, ma ci sono anche modi semplici aggirare questo.

Css fa schifo non ha ereditarietà nativa.

Eredità

L'ereditarietà è il trasferimento di regole di formattazione per elementi che si trovano all'interno di altri. Tali elementi sono figli ed ereditano alcune delle proprietà stilistiche dei loro genitori, all'interno dei quali si trovano.

Diamo un'occhiata all'ereditarietà usando un esempio di tabella. Una caratteristica delle tabelle può essere considerata un rigoroso struttura gerarchica tag. Prima viene il contenitore

Esempio 18.1. Eredità del colore

HTML5 CSS 2.1 IE Cr Op Sa Fx

V questo esempio il colore del testo è impostato su rosso per l'intera tabella, quindi nelle celle si applica anche perché il tag

Per determinare se il valore di una proprietà di stile è ereditato o meno, è necessario esaminare il riferimento alla proprietà CSS e cercare lì. È inutile collegare la tua intuizione in un caso del genere, può anche deluderti.

L'ereditarietà consente di impostare i valori di alcune proprietà una volta, definendoli per i genitori livello superiore... Supponiamo che tu voglia impostare il colore e il carattere per il corpo del testo. È sufficiente utilizzare il selettore BODY, aggiungere le proprietà desiderate per esso e il colore del testo all'interno dei paragrafi e altri elementi di testo cambierà automaticamente (esempio 18.2).

Esempio 18.2. Opzioni di testo per l'intera pagina web

In questo esempio, il carattere serif e il colore del testo dei paragrafi vengono impostati utilizzando il selettore BODY. Grazie all'ereditarietà, non è più necessario impostare separatamente il colore per ogni elemento del documento. Tuttavia, ci sono opzioni quando devi ancora cambiare il colore per un contenitore separato. In questo caso, dovrai sovrascrivere parametri desiderati esplicitamente, come mostrato nell'Esempio 18.3.

Esempio 18.3. Modifica delle proprietà di un elemento ereditato

In questo esempio il colore del primo paragrafo è ereditato dal selettore BODY, e per il secondo è impostato esplicitamente tramite una classe denominata red.

Eredità di proprietà CSS

Il principale motore della crescita del web all'inizio del millennio è stato consumo contenuto. I siti web sono stati creati per fornire ai propri visitatori qualsiasi informazioni utili o contenuti di intrattenimento. Ma in l'anno scorso l'importanza delle risorse web che forniscono servizi agli utenti è cresciuta notevolmente generare contenuto (testo e editore grafico, 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 è stato creato 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 qualsiasi blocco da solo, gli stili possono trapelare 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 manca un elemento da una proprietà CSS, esplicitamente valore impostato viene utilizzata l'impostazione predefinita. 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.

2. Conformità delle proprietà

Se la proprietà CSS di un elemento non ha un valore esplicito, viene utilizzato il valore predefinito. Se questa proprietà è abbinata a una proprietà dell'elemento genitore (ad esempio, come proprietà di larghezza e altezza con un valore predefinito di auto) o imita (ad esempio, come proprietà background-color con un valore predefinito di trasparente), quindi avere utente finale darà l'impressione che gli stili dell'elemento genitore siano trapelati negli stili elemento figlio.

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

(combinatore di fratelli generici) - fino al primissimo elemento di pari livello.

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

) o pseudo-classi (: primo figlio, ecc.).

Come per la conformità delle proprietà, vale la pena notare che molti sviluppatori trovano molto utile il condizionamento posizionale. L'autore dell'articolo è d'accordo con loro purché la condizionalità non superi i confini del blocco, poiché in questo caso c'è una chiara violazione dell'incapsulamento degli stili.

Ovviamente, l'incapsulamento ideale degli stili CSS dovrebbe eliminare eventuali perdite.

La seconda parte dell'articolo ("Encapsulating CSS Styles - Part 2. Solutions") analizzerà come gli approcci attuali (OOCSS, SMACSS, ACSS, BEM, preprocessori CSS) corrispondono all'ideale, nonché la loro classificazione.

sarò felice consigli utili e critica costruttiva.

Ereditarietà CSS e raggruppamento

Ciao cari lettori! Oggi sotto il titolo "Tutorial CSS" i concetti più importanti raggruppamento ed ereditarietà nei CSS... Chiunque segua le mie pubblicazioni da molto tempo, probabilmente già pervaso dal pensiero della necessità di comprendere le basi dei Cascading Style Sheets. E questo è corretto, poiché un webmaster moderno deve certamente saperlo concetti basilari e un algoritmo per applicare nella pratica le conoscenze di base di HTML e CSS.

Ho già sottoposto al giudizio dei lettori una serie abbastanza decente di materiali su questo argomento, comprese pubblicazioni su tipi diversi Selettori CSS come selettori di tag, classi e identificatori e selettori di attributi artistici e il loro uso in diverse varianti. Questa parte dei fogli di stile a cascata è molto importante, tuttavia non tratteremo quelli non importanti.

Bene, ora passiamo direttamente all'argomento di oggi e analizziamo Raggruppamento CSS e regole di ereditarietà, grazie al quale diventa possibile organizzare e ottimizzare i documenti che descrivono gli stili degli elementi delle pagine web del sito.

Raggruppamento in CSS

Prendete, ad esempio, i tag di intestazione h1 h2 h3 che hanno uno stile nel file style.css. Ad esempio, in questo modo:

Se osservi attentamente, noterai che esiste un elemento comune degli stili CSS per tutti i tag di intestazione, vale a dire il valore della famiglia di caratteri, che determina l'aspetto del carattere. Puoi combinare i selettori h1-h3 su questa base e comporre per loro regola generale per quanto riguarda il valore della famiglia di caratteri:

E le singole proprietà per ciascun selettore, che non sono comuni, dovrebbero essere emesse separatamente:

Questo è il raggruppamento in CSS. Consente una certa ottimizzazione delle voci di design dello stile e rende possibile semplificare la lettura del documento. Penso che l'abbiamo capito, non c'è niente di complicato qui, passare al concetto di eredità.

Ereditarietà CSS

Come suggerisce il nome, l'ereditarietà implica il trasferimento di regole di stile per elementi che si trovano all'interno di altri. Tali elementi sono chiamati figli ed ereditano le proprietà stilistiche dei loro genitori. L'esempio di maggior successo in cui puoi esplorare visivamente le sfumature Ereditarietà CSS, è, a mio modesto parere, tabella html che viene creato utilizzando i tag table, tr e td. Supponiamo che le proprietà del design siano impostate per il tag della tabella:

Ora creiamo una semplice tabella di 4 celle:

Sulla pagina web, sarà simile a questo:

Per questa tavola è apparecchiata colore verde testo, quindi le parole nelle celle hanno assunto questa sfumatura. Questa è una conseguenza del fatto che il tag td dell'elemento figlio eredita le proprietà del tag della tabella genitore... Spero che qui sia tutto chiaro. Ma devi capire che non tutte le proprietà di stile sono ereditate.

Ad esempio, border definisce un bordo intorno alla tabella, ma non intorno alle celle, quindi quelle celle non sono incorniciate all'interno della tabella. Inoltre, la proprietà background non viene ereditata. Tuttavia, in questo caso, sorge la domanda: perché il colore di sfondo delle celle ha acquisito il colore sabbia, che è specificato come valore del tag della tabella padre, se non è ereditato?

Il punto qui è che la proprietà background ha trasparente come valore predefinito per il tag td, cioè trasparenza... Pertanto, il colore di sfondo dell'elemento padre è "visibile" attraverso lo sfondo dell'elemento figlio, che è trasparente. Nota che in molti casi ci sono valori predefiniti per la maggior parte delle proprietà CSS. Pertanto, se nessun parametro è impostato in modo esplicito per una proprietà, il valore predefinito precedente ha effetto.

L'ereditarietà consente di definire i valori una volta impostandoli sull'elemento genitore di livello superiore. Supponiamo di voler impostare il colore e il carattere per il corpo del testo di un blog o di una pagina web di un sito web. Per fare questo è sufficiente definire valori desiderati per il selezionatore del corpo e il compito sarà svolto:

Ora qualsiasi paragrafo su questa pagina web, ad esempio, in questo modo:

Sarà decorato con lo stile appropriato:

Grazie all'ereditarietà, non è necessario definire le proprietà per ogni elemento in modo assolutamente separato. Tuttavia, a volte è necessario apportare modifiche per un contenitore separato, ad esempio per un paragrafo univoco, il cui testo dovrebbe essere evidenziato. In questo caso, impostiamo i parametri per questo elemento in modo esplicito:

Ora un normale paragrafo sulla pagina sarà simile a questo:

E un paragrafo unico con un valore di colore scritto separatamente sarà così:

In questo modo, utilizzando algoritmi di raggruppamento ed ereditarietà ove necessario, è possibile ottimizzare il più possibile il file di stile, rendendolo allo stesso tempo di facile lettura. Ho già detto sopra che non tutte le proprietà CSS sono ereditate, quindi ti darò una delle pagine del sito web ufficiale del W3C, dove puoi ottenere maggiori informazioni se vuoi. informazioni dettagliate su questa domanda. Quindi, la pagina "Tabella proprietà completa":

Nello screenshot, viene utilizzato un bordo rosso per indicare quali proprietà CSS sono ereditate e quali no. E infine, spiegherò più in dettaglio per colonne quali informazioni vengono presentate qui:

"Nome" - il nome della proprietà CSS;
"Valori" - tutti valori possibili per questa proprietà;
"Valore iniziale" - valore iniziale per di questa proprietà che viene utilizzato di default (ho menzionato questo)
"Si applica a": a quali elementi viene applicata la regola che include la proprietà CSS;
"Ereditato?" - se questa regola è ereditata o meno.

Questo è tutto ciò che volevo dirti oggi. Ho cercato di insegnare le sfumature del raggruppamento e dell'ereditarietà CSS nel modo più accessibile ed efficiente possibile. Come ho fatto? Sta a te giudicare. Il tuo livello di attività quando ti iscrivi a nuovi contenuti del blog risponderà a questa domanda. Ora permettimi di prendere congedo. Infine un po' di relax non guasta, soprattutto per chi non è indifferente a KVN:

goldbusinessnet.com

Ultimo aggiornamento: 21.04.2016

Per semplificare la definizione degli stili, i CSS utilizzano un meccanismo di ereditarietà degli stili. Questo meccanismo presuppone che gli elementi annidati possano ereditare gli stili dei loro elementi contenitore. Ad esempio, supponiamo di avere un'intestazione e un paragrafo su una pagina web che dovrebbe avere un testo rosso. Possiamo applicare separatamente lo stile appropriato al paragrafo e all'intestazione, che imposterà colore desiderato font:

Eredità di stile

Tuttavia, poiché sia ​​l'elemento p che l'elemento h2 si trovano nell'elemento body, ereditano molti degli stili da questo contenitore, l'elemento body. E per non duplicare la definizione dello stile, potremmo scrivere così:

Eredità di stile

Testo dell'ereditarietà dello stile CSS 3

Di conseguenza, definire gli stili è diventato più semplice, ma il risultato è rimasto lo stesso.

Se non vogliamo lo stile ereditato, possiamo sovrascriverlo per alcuni elementi:

Corpo (colore: rosso;) p (colore: verde;)

A più livelli di annidamento, gli elementi ereditano gli stili solo del contenitore più vicino:

Copyright MyCorp.com

Qui la pagina web ha la seguente struttura:

Il colore del testo viene sovrascritto per l'elemento div. E poiché l'elemento h2 e uno dei paragrafi sono in elemento div quindi ereditano lo stile dell'elemento div. Il secondo paragrafo si trova direttamente nell'elemento body e quindi eredita lo stile dell'elemento body.

Tuttavia, non tutte le proprietà CSS applicano l'ereditarietà dello stile. Ad esempio, le proprietà che rappresentano i margini (margini, riempimento) e i bordi (bordo) degli elementi non vengono ereditate.

Inoltre, i browser predefiniti applicano anche una serie di stili predefiniti agli elementi. Ad esempio, le intestazioni hanno un'altezza specifica, ecc.

Ciao, caro lettore.

Questa è la nona lezione imparare i CSS... In questo tutorial vedremo cos'è l'ereditarietà e come evitare errori nell'ereditarietà.

Prima di studiare questa lezione(ereditarietà in CSS) segui i tutorial precedenti:

Teoria e pratica

Quando si scrive Stili CSS ci troviamo di fronte al problema che alcune delle nostre proprietà possono sovrapporsi ad altre proprietà che hanno una priorità maggiore. Ma anche, come già saprai dalle lezioni precedenti, alcune proprietà possono ereditare valori dai loro genitori. Vediamo come questo è chiaramente nel codice.

Esempio 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 adesso esempio CSS codice con ereditarietà. Ammettiamolo per

Principali articoli correlati