Nasljeđivanje css svojstava. CSS

Napomena: aktiviran adaptivna verzija stranica, koja se automatski prilagođava mala veličina vaš preglednik i skriva neke pojedinosti stranice radi lakšeg čitanja. Uživajte u gledanju!

Drago mi je što vas sve ponovno mogu pozdraviti na stranicama bloga. stranica na! U prošlom smo članku ukratko govorili i ispitali nekoliko njih jednostavni primjeri. Danas je naša tema tako važna stvar kao što je nasljeđivanje u CSS-u. Nasljeđivanje u CSS-u naziva se prijenos svojstava s nadređenog elementa na podređene elemente. Ili ako vam je jasnije: prosljeđivanje CSS svojstava s gornje oznake na njezine ugniježđene. Štoviše, hoće li se svojstvo naslijediti ili ne ovisi o samom svojstvu, a ne o oznakama na koje se primjenjuje. Kako radi? Da, vrlo je jednostavno, vratimo se našem rasporedu s kojim smo naučili:

Ako pišemo u CSS-u:

Tijelo (boja: zelena; )

Tada će boja natpisa "I ovdje pišemo bilo koji tekst koji nas zanima", čudno, postati zelena. Što će se dogoditi ako svoj natpis zatvorimo u blok? Odnosno, ovo je ono što je postao dio koda koji nas zanima:

Tada će natpis i dalje ostati zelen, budući da je vlasništvo boja je naslijeđeno, što znači da je proslijeđeno s oznake tijelo na svoju ugniježđenu oznaku div i dalje (ako je bilo gdje). I odmah imate problem: koje će boje biti naš natpis ako imamo sljedeći kod

Za referencu - oznaka koja jednostavno označava dio teksta. Ako u CSS-u za njega nije ništa navedeno, onda ne radi ništa.

Točan odgovor: crveno. Budući da je div oznaka prekinula nasljeđivanje iz tijela (ali samo za oznake ugniježđene unutar diva).

Koji prioritet ima nasljeđivanje u CSS-u?

Da, apsolutno ništa. Prvenstvo nasljeđivanja u CSS-u čak nije ni nula, jednostavno ne postoji. Što nam ovo govori? Da, da će se svako svojstvo navedeno izravno u ugniježđenoj oznaci izvršiti umjesto svojstva koje bi naslijedilo (ali nismo dopustili da se to dogodi, jer smo naveli isto svojstvo, ali s drugačijom vrijednošću).

To jasno dokazuje prethodni primjer, gdje je oznaka div nije označio raspon naslijediti zelenu boju teksta iz oznake tijelo, a sve zato što smo za tag div jasno su najavili crvenu boju, što znači da crvena ima najveći prioritet...

Ili možda ne? Pogledajmo primjer u nastavku, gdje će isto svojstvo biti eksplicitno navedeno, ali na drugačiji način, za istu oznaku. Pa pogledajmo naš CSS:

Div p ( Boja: zelena; ) p ( Boja: crvena; )

U oba slučaja, boja je jasno naznačena posebno za odlomke, ali u jednom od slučajeva, samo za odlomke unutar bloka, da vidimo rezultat:

I samo unutar paragrafa - crveno

Da, prijatelji, ovaj put ništa revolucionarno, logika je pobijedila :) Dapače, zato su to kaskadne tablice, tako da možete posebno odrediti boje za ugniježđene elemente i ne brinuti o svojstvima koja se "preklapaju".

Ukratko: Nasljeđivanje u CSS-u ima najniži mogući prioritet, ali vrijedi zapamtiti da se sva svojstva ne nasljeđuju. Svojstva koja imaju specifične okolnosti (pri prelasku miša, kada je jedna oznaka ugniježđena unutar druge, itd.) imaju prednost nad svojstvima navedenim za sve ostale slučajeve.

Još važna točka: ako poslije CSS vrijednosti svojstva stavite razmak i napišite !važno, tada će ta nekretnina uvijek i svugdje imati najveći prioritet. Primjer unosa:

P( boja:crvena !važno; )

Savjetovao bih da izbjegavate ovu tehniku ​​i umjesto toga razmislite o tome unaprijed. ispravna struktura, tako da ne morate tako grubo preklapati jedno svojstvo s drugim, ali ponekad njegova upotreba može biti vrlo praktična.

I na kraju, evo što trebate imati na umu ako vam nešto ne uspije - ako to ovako napišete:

P(boja:crvena; ) p(boja:zelena; )

Tada će se primijeniti vrijednost koja je ispod u kodu, tj zelena. Može biti mnogo sličnih slučajeva, pogotovo ako imate malo iskustva, au isto vrijeme mogu biti vrlo raznoliki; kako biste brzo riješili problem, savjetujem vam da koristite. Na gornjoj poveznici možete pročitati kako ih koristiti i što su.

1) Svojstva navedena za klasu (class) ili jedinstveni identifikator (id) imaju najveći prioritet, a prioritet id-a je viši od prioriteta klase. Sve o ovim selektorima i općenito pojmu selektora saznat ćete u sljedećem članku.

Dopustite mi da vas još jednom podsjetim da je najbolji učitelj u HTML-u i CSS-u praksa + referentna knjiga, koju sam, usput, preporučio u članku o . Također preporučujem da se pretplatite na ažuriranja mog bloga, jer ću nakon općeobrazovnih i uvodnih članaka sigurno pisati o nekim suptilnostima i, da tako kažem, tajnama ispravnog izgleda web stranice.

To je sve za danas, hvala na pažnji!

Sva CSS svojstva dijele se na ona koja nasljeđuju elementi potomci od svojih elemenata predaka i ona koja nisu naslijeđena. Tako, na primjer, ako postavite obrub za odlomak (tvorite okvir), tada svi ugniježđeni elementi (elementi potomci) neće naslijediti ovo CSS svojstvo, jer u ovom slučaju nasljedstvo nema pozitivan učinak. Slažem se, ne bi bilo sasvim razumno redefinirati granice naslijeđene od nadređenog odlomka za svaki element potomak. Ali, ako postavimo paragraf, na primjer, Plava boja font, tada će ga naslijediti svi elementi potomci dok ga ne redefiniramo ako je potrebno za određeni element, a to je učinkovitije od definiranja fonta zasebno za svaki element potomak. Na službenoj web stranici W3C možete vidjeti koja su svojstva stila naslijeđena, a koja nisu (tablica CSS svojstva ).

Kaskadni CSS stilovi

Kaskadni stilovi- ovo je ugrađena značajka CSS-a, a to je da ako se nekoliko stilova primijeni na element odjednom, rezultirajući stil će biti formiran od svih vrsta svojstava prisutnih u tim stilovima, a ako postoje dva ili više identičnih svojstava , vrijednost svojstva će se primijeniti na element s najvećim prioritetom u danoj situaciji.

Pogledajmo najprije najjednostavniji slučaj prikazan u primjeru 1.26.

Jednostavan tekst odlomka.

Tekst odlomka s razredom.

Redefiniramo i boju fonta i širinu odlomka.

Primjer 1.26. Najjednostavniji slučaj kaskadni CSS stilovi

Kao što možete vidjeti iz primjera, samo prvi stil iz unutarnjeg lista stilova primjenjuje se na prvi odlomak, što mu daje crnu pozadinu i crvenu boju fonta. Dva stila iz unutarnjeg lista stilova već su primijenjena na drugi odlomak, pa se rezultirajući stil formira na sljedeći način: prvo se uzimaju sva svojstva stila čija je specifičnost (specifičnost) selektora veća (u našem slučaju to je drugi stil), zatim se svojstva koja nedostaju iz ostalih dodaju, primjenjuju se na ovaj element stilovi koji imaju manju specifičnost selektora (u našem slučaju to je prvi stil). Na ovaj način, širina će biti dodana drugom odlomku, a pozadina će biti redefinirana iz crne u žutu. Tri stila primjenjuju se na treći odlomak: dva iz interne stilske tablice i vlastiti ugrađeni stil. Umetnuti stil ima najveći prioritet, tako da će nadjačati boju fonta postavljenu u prvom stilu i širinu postavljenu u drugom stilu umetnutog lista stilova.

Dakle, kako biste ispravno izračunali rezultirajući stil primijenjen na element, morate znati pravila za oblikovanje ovog stila u slučaju primjene nekoliko stilova odjednom. Ova se pravila svode na izračun specifičnosti selektora primijenjenih na element stilova koji sadrže ista CSS svojstva s različita značenja, a također, u slučaju iste specifičnosti selektora, za usporedbu vrsta stilova, usporedite raspored tablica s tim stilovima ili ako završe u istom stilski list, uspoređujući njihov položaj u kodu ove tablice. Razmotrimo ovo pitanje detaljnije.

Specifičnost CSS selektora

Ako se na isti element primijene dva pravila koja sadrže ista CSS svojstva, ali imaju različite vrijednosti, dolazi do sukoba koji se može riješiti usporedbom specifičnosti selektora pravila. Kao rezultat ove odluke, na element će se primijeniti svojstvo pravila s većom specifičnošću selektora.

Specifičnost selektora izračunava se pomoću tri broja (a, b, c). To se događa na sljedeći način:

• broju a dodijeljen je broj identifikatora u selektoru;
• broju b dodijeljen je ukupan broj klasa, atributa i pseudoklasa u selektoru;
• broju c dodijeljen je ukupan broj elemenata i pseudoelemenata.

Nakon prebrojavanja brojeva za sve uspoređivane selektore, selektor s većom specifičnošću bit će onaj s veći broj a, bez obzira na veličinu brojeva b i c. Ako je broj a uspoređivanih selektora isti, uspoređivat će se njihov broj b, a po potrebi i broj c (vidi primjer 1.27).

/* Zapišimo primjer html koda */ /*

Tekst...

*/ /* Ovdje je a=1, jer postoji 1 identifikator u selektoru; */ /* b=0, jer postoji 0 klasa, 0 atributa i 0 pseudo-klasa; */ /* s=0, jer postoji 0 elemenata i 0 pseudo elemenata; */ /* To. specifičnost je (1,0,0). */ #m_id( color: blue; ) /* Ovdje je a=0, jer u selektoru nema identifikatora; */ /* b=3, jer postoji 1 klasa, 1 atribut i 1 pseudoklasa; */ /* s=2, jer postoje dva elementa: "p" i "em"; */ /* To. specifičnost je (0,3,2). */ p.my_class em:hover( color: red; ) /* Dakle, boja teksta u primjeru koda će biti plava, jer u drugom pravilu broj a=0, a u prvom pravilu a=1. */ /* Ali da su specifičnosti selektora jednake, tada bi stil nižeg pravila imao prednost. */

Primjer 1.27. Usporedba specifičnosti selektora

Vrste i prioritet CSS stilova

Ako je specifičnost selektora uspoređivanih pravila jednaka, prioritet će biti određen vrstom stila, lokacijom listova stilova ili, ako su u istom listu stilova, usporedbom njihovog položaja u kodu ovaj stol. Nabrojimo glavne vrste stilova prema rastućem prioritetu.

• Stil preglednika ima najniži prioritet i primjenjuje se prema zadanim postavkama na elemente html koda na koje se ne primjenjuje nikakvo drugo oblikovanje, jednostavnije rečeno - na "goli" html kod.
• Korisnički stil postavlja korisnik u postavkama preglednika i u biti je korisnički izmijenjen zadani stil preglednika. Dakle, ako korisnik promijeni stil preglednika, korisnički će se stil primijeniti prema zadanim postavkama.
• Autorski stil postavlja autor stranice (programer) i ima još veći prioritet. On će nas najviše zanimati.

Autorski stil je rezultirajući stil, koji se formira iz različitih vrsta njegovih pojedinačnih stilova, opet, na temelju kaskadiranja. Navodimo ih prema rastućem prioritetu kada se primjenjuju na isti element, pod uvjetom da je specifičnost selektora jednaka.

• Stilovi koje su podređeni elementi naslijedili od svojih roditelja imaju najniži prioritet.
• Stilovi navedeni u vanjskim tablicama imaju veći prioritet. U ovom slučaju, pravila koja se pojavljuju u kodu vanjskog stilskog lista ispod (tj. pojavljuju se kasnije) imaju veći prioritet u odnosu na pravila koja se pojavljuju u kodu ove gornje tablice (tj. ranije). Osim toga, nekoliko vanjskih listova stilova, onih povezanih s dokumentom pomoću elementa "veza" ispod u kodu ovog dokumenta. Sukladno tome, ako je tablica uključena u gornji kod dokumenta, tada će prioritet njezinih stilova biti niži.
• Interni stilovi tablica(nalaze se unutar kontejnera "stil") imaju prednost nad vanjskim stilovima tablice, ali samo ako se nalaze niže u kodu od elementa "veza", s kojim je bila povezana vanjska stilska tablica. Opet, pravila koja se pojavljuju u internom kodu lista stilova u nastavku imaju prednost nad pravilima koja se pojavljuju u kodu internog lista stilova iznad. Osim toga, ako dokument koristi više internih listova stilova, npr. postoji nekoliko elemenata "stil", tada stilovi onih tablica koje se nalaze u donjem kodu dokumenta imaju veći prioritet.
• Imajte još veći prioritet umetnuti stilovi, koji nadjačavaju pravila s bilo kojom specifičnošću selektora. Dapače, puno je specifičnije ako se stil nalazi u početnoj oznaci elementa.

Servisni parametar!važno

Zasebno treba reći o parametru usluge !important, koji je naznačen, ako je potrebno, u internim i vanjskim listovima stilova nakon vrijednosti css svojstva odvojene razmakom, na primjer, p (boja: zelena !important;) . Svojstvo stila u kojem je navedeno ovaj parametar, ima najveći prioritet bez obzira na mjesto stilske tablice u kodu dokumenta ili samog pravila unutar stilske tablice, ali samo u situaciji kada su specifičnosti stilova jednake (ne treba zaboraviti da specifičnost inline stil treba smatrati najvišim u svakom slučaju!). Opet, ako postoji nekoliko svojstava s ovim parametrom, a čak su i specifičnosti odgovarajućih selektora iste, tada će prioritet biti određen vrstom stila, lokacijom lista stilova ili, ako su u istom stilski list, uspoređujući njihov položaj u kodu ove tablice.

Iz navedenog slijedi jednostavan zaključak: što je stil bliže elementu i što je njegov selektor specifičniji, to ima veći prioritet.

Korištenje istih CSS svojstava u jednom pravilu

Konačno ovog paragrafa Dodajmo da su u istom pravilu ponekad navedena dva identična svojstva, ali s različitim vrijednostima. To se obično radi kada neku od vrijednosti svojstva ne podržava neki preglednik, tada se postavlja na drugo mjesto u bloku deklaracije (stil), a prvo se postavlja drugo pravilo koje podržavaju svi preglednici. Kao rezultat toga, ako se stranica otvori u pregledniku u kojem drugo pravilo nije valjano, ono će biti zanemareno i preglednik će primijeniti prvo pravilo. Ako je stranica otvorena u pregledniku u kojem vrijede i prvo i drugo pravilo, tada će drugo pravilo imati veći prioritet, jer slijedi u kodu kasnije. Dakle, u svakom slučaju, ideja programera će biti implementirana, a vrijednost svojstva koju je preglednik postavio prema zadanim postavkama ili naslijeđena od nadređenog elementa neće se primijeniti.

Brzo idite na druge stranice

• Nasljeđivanje, kaskadiranje i prvenstvo CSS stilova

Nasljeđivanje CSS svojstava

Većina svojstava ne prenosi svoje vrijednosti s nadređenog na podređeni element

Za neke je zadana vrijednost prilagođena roditelju

I samo nekoliko (pogledajte popis svojstava CSS2, ako stupac "Naslijeđeno" označava "da") nasljeđuje vrijednost svojstva od roditelja

Svojstvo koje mijenja sve CSS stilove osim smjera i unicode-bidi

Ovo su vrijednosti koje se mogu primijeniti na bilo koje CSS svojstvo. Stil preglednika poništava se posvuda, uključujući oznake za unos, napredak itd.

CSS nasljeđivanje stilova od roditelja: naslijediti

Ako treba navesti predak i dijete iste vrijednosti svojstva, tada je prikladnije koristiti nasljeđivanje za daljnje uređivanje - bit će dovoljno promijeniti vrijednost samo roditelja.

inherit ne prosljeđuje konačnu vrijednost, već ono što je navedeno u nadređenim stilovima

Primjer 1: Koja je razlika između width: inherit; i širina: 100%;

Primjer 2: max-height: 100%; Ne radi

Primjer 3: Kako duplicirati nadređene CSS stilove

nasljeđivanje prenosi vrijednost neposrednog roditelja, a ne određene pozicije

Sve se kopira, čak i ono što razvojni programer nije naveo u stilovima roditelja

početni CSS: obrnuto nasljeđivanje

Da biste saznali početne vrijednosti svojstava koja su specifična za preglednik, kao što su boja i obitelj fonta, možete koristiti početni

Primjer 1: Onemogućite nasljeđivanje svojstava

Primjer 2: uklonite svojstvo za uži selektor

Initial vam omogućuje poništavanje svih stilova, uključujući one koje je preglednik postavio za zadanu oznaku

Primjer: za widgete treće strane onemogućite nasljeđivanje stilova i stilove postavljene u pregledniku

poništi CSS: poništi stil preglednika

Ponašanje je standardno, samo sve oznake postaju bezlične, kao da su izrezane istom četkom. To jest, kao početni, blok elementiće postati inline.

Primjer: poništite sve moguće stilove unosa

Domaća zadaća: u komentarima ponudite svoj primjer korištenja vrijednosti inherit, initial i unset, inače je moja mašta već iscrpljena :)

5 komentara:

Anonimno Pozdrav!
Možete li mi reći zašto je to tako?
https://jsfiddle.net/og96q6x5/

Zašto ovaj nitkov H2 pomiče žuti DIV na dno. Zapravo nisam htjela crvenu. Pomaknuo je žuti. Stavio sam ga u drugi DIV pa se pomaknuo i žuto i crveno.
Zašto?
NMitra Pozdrav, koliko sam shvatio, nisi zadovoljan kolapsom? Pogledajte http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Postoje rješenja za problem Anonymous Hvala. Već sam smislio kako riješiti ovaj kolaps. Ili kao ti ili s DIV-om za čišćenje.

Nemam ništa drugo.
To je to. To sam htio.
Čini se da smo to uspjeli smiriti s display:inline-block.
https://jsfiddle.net/og96q6x5/2/

Ali pitanje ostaje. Ne bi li se on, budući unutar DIV-a, trebao kretati po ovom DIV-u? Ne diraj nikoga?
I zašto display:inline margiņ-top: ne radi?
https://jsfiddle.net/og96q6x5/1/
Anonimno hvala Našao sam.
okomito poravnanje: s prikazom:umetnuto; i display:inline-block;

Da. Kako je sve to smiješno.
NMitra A zašto margiņ-top ne radi s display:inline? — Zato što nije blok, nema visinu

shpargalkablog.ru

Može li CSS klasa naslijediti jednu ili više drugih klasa?

Osjećam se glupo što sam web programer toliko dugo i ne znam odgovor na ovo pitanje, stvarno se nadam da je moguće i jednostavno nisam znao za to, a ne za ono što mislim da je odgovor (naime: nemoguće).

Moje pitanje je da li je moguće napraviti CSS klasu koja "nasljeđuje" drugu CSS klasu (ili više od jedne).

Na primjer, recimo da smo imali:

Ono što bih želio učiniti je nešto poput ovoga:

gdje će se class.composite pojaviti u redu i imati crvenu pozadinu

27 odgovora

Postoje alati poput LESS koji vam omogućuju da sastavite više CSS-a visoka razina apstrakcija slična onome što opisujete.

Manje poziva ovim "miksinima"

Na primjer, jednom DOM elementu možete dodati više klasa.

Nasljeđivanje nije dio CSS standarda.

Da, ali ne baš s ovom sintaksom.

Element može imati nekoliko klasa:

I to je otprilike onoliko koliko možete dobiti, nažalost. Stvarno bih volio vidjeti ovu značajku zajedno sa cool aliasima.

Zadržite zajedničke atribute i ponovno dodijelite specifične (ili nadjačajte) atribute.

Ne, ne možete učiniti nešto slično

Ovo nisu "imena klasa" u OO smislu. .nešto i .ostalo više nisu selektori.

Ali možete navesti dvije klase za element

ili možete potražiti neki drugi oblik nasljeđa

Ako su boja pozadine i apstrakcije boja naslijeđene iz postavki u priloženom divu koji ima stil .foo . Možda ćete morati provjeriti točnu W3C specifikaciju. inherit je zadana za većinu zadanih svojstava, ali ne za sva.

Naišao sam na ovaj problem i na kraju sam upotrijebio JQuery rješenje kako bi se činilo da klasa može naslijediti druge klase.

Ovo će pronaći sve elemente s klasom "composite" i dodati klase "something" i "else" elementima. Dakle, nešto slično

Savršeno vrijeme. Prešao sam s ovog pitanja na svoje e-pošta pronaći članak o Lessu, Ruby biblioteci koja, usput, radi ovo:

Budući da super izgleda isto kao i podnožje, ali s drugačijim fontom, upotrijebit ću metodu Less class include (oni je zovu mixin) tako da uključuje i ove deklaracije:

Najbolje što možete učiniti je

SCSS za ovaj primjer to će izgledati otprilike ovako:

Nažalost, CSS ne pruža "nasljeđivanje" na način na koji to rade programski jezici poput C++, C# ili Java. Ne možete deklarirati CSS klasu i zatim je proširiti drugom CSS klasom.

Međutim, možete primijeniti više od jedne klase na oznaku u vašem označavanju. u ovom slučaju, postoji složen skup pravila koji određuju koje će stvarne stilove primjenjivati ​​preglednik.

CSS će potražiti sve stilove koji se mogu primijeniti na temelju vašeg označavanja i kombinirati CSS stilove iz tih više pravila.

Tipično, stilovi se kombiniraju, ali kada dođe do sukoba, kasnije deklarirani stil obično pobjeđuje (osim ako je važan atribut naveden u jednom od stilova, u kojem slučaju on pobjeđuje). Osim toga, stilovi se primjenjuju izravno na HTML element, imaju prednost nad stilovima CSS klasa.

Shvaćam da je ovo pitanje sada jako staro, ali ovdje nema ničega!

Ako je cilj dodati jednu klasu koja podrazumijeva svojstva više klasa, kao izvorno rješenje, preporučio bih korištenje JavaScript/jQuery (jQuery zapravo nije potreban, ali je svakako koristan)

Ako imate, na primjer, .umbrellaClass koji "nasljeđuje" od .baseClass1 i .baseClass2, možda imate spreman JavaScript.

Sada će svi elementi .umbrellaClass imati sva svojstva kao .baseClass. Imajte na umu da, slično OOP nasljeđivanju, .umbrellaClass može, ali ne mora imati vlastita svojstva.

Jedino upozorenje ovdje je razmotriti postoje li elementi koji su dinamički stvoreni, a koji neće postojati kada se ovaj kod pokrene, ali postoje i jednostavnih načina zaobići ga.

CSS je sranje i nema izvorno nasljeđivanje.

Nasljedstvo

Nasljeđivanje je prijenos pravila oblikovanja za elemente koji se nalaze unutar drugih elemenata. Takvi elementi su djeca, a nasljeđuju neka stilska svojstva svojih roditelja unutar kojih se nalaze.

Pogledajmo nasljeđivanje koristeći tablicu kao primjer. Značajka tablica može se smatrati strogim hijerarhijska struktura oznake Prvo dolazi kontejner

Primjer 18.1. Nasljeđivanje opcija boja

HTML5 CSS 2.1 IE Cr Op Sa Fx

U u ovom primjeru Boja teksta postavljena je na crvenu za cijelu tablicu, tako da se primjenjuje iu ćelijama, od oznake

Da biste utvrdili je li vrijednost svojstva stila naslijeđena ili ne, morate pogledati referencu CSS svojstava i pogledati tamo. U tom slučaju beskorisno je koristiti intuiciju, može vas čak i iznevjeriti.

Nasljeđivanje vam omogućuje da jednom postavite vrijednosti nekih svojstava, definirajući ih za roditelje vrhunska razina. Recimo da želite postaviti boju i font za glavni tekst. Samo upotrijebite selektor BODY, dodajte mu željena svojstva, boju teksta unutar odlomaka i drugo elementi teksta automatski će se promijeniti (primjer 18.2).

Primjer 18.2. Opcije teksta za cijelu web stranicu

U ovom primjeru, boja fonta i teksta odlomka postavljaju se pomoću selektora BODY. Zahvaljujući nasljeđivanju, više nema potrebe posebno postavljati boju za svaki element dokumenta. Međutim, postoje opcije kada još uvijek trebate promijeniti boju za zasebni spremnik. U ovom slučaju morat ćete redefinirati traženi parametri eksplicitno, kao što je prikazano u primjeru 18.3.

Primjer 18.3. Promjena svojstava naslijeđenog elementa

U ovom primjeru, boja prvog odlomka je naslijeđena od BODY selektora, a boja drugog je eksplicitno postavljena kroz klasu pod nazivom crvena.

Nasljeđivanje svojstava CSS-a

Glavni pokretač web rasta na prijelazu tisućljeća bio je potrošnja sadržaj. Web stranice su stvorene kako bi svojim posjetiteljima pružile nešto korisna informacija ili zabavni sadržaj. Ali u posljednjih godina važnost web resursa koji pružaju usluge korisnicima naglo je porasla generacija sadržaj (tekst i grafički urednik, proračunske tablice, glasnici itd.). To je uzrokovalo transformaciju web stranica u aplikacije s jednom stranom i migraciju na web složenih sučelja koja su prije bila prerogativ aplikacijskih programa.

Tijekom procesa ovih transformacija i migracija postalo je jasno da povećanje intenziteta rada kreiranja i održavanja web sučelja značajno nadmašuje povećanje njegove složenosti. Pokušali su (i još uvijek pokušavaju) riješiti problem dijeleći ga na module, apstrakciju i enkapsulaciju. U tu svrhu stvorena je veliki broj JavaScript okviri (Backbone, Ember, Angular), HTML predlošci (Jade, Handlebars), sustavi za upravljanje ovisnostima (RequireJS), itd.

Pokazalo se da je najsloženiji s ove točke gledišta CSS, gdje, prema dizajnu jezika, bilo koje svojstvo deklarirano u bilo kojoj uključenoj CSS datoteci ili oznaci stila može utjecati na prikaz bilo kojeg elementa DOM stabla.

Formalizacija zadatka.

Pretpostavimo radi jednostavnosti da je sav JavaScript kod zatvoren u module koji ne znaju ništa jedni o drugima i sadrže sve što im je potrebno za obavljanje posla. Modul zna kako generirati vlastiti HTML prikaz (nazovimo ga blok) i gdje ga umetnuti u DOM stablo. U tom slučaju blokovi se mogu ugniježditi jedan u drugi. Na razini označavanja, blok se sastoji od korijenski element I dječji elementi.
Cilj je osigurati da se na prikaz elemenata bilo kojeg bloka može utjecati samo namjeran promjene u HTML prikazu i odgovarajućim CSS datotekama i stilskim oznakama.

Svaku nenamjernu promjenu u prikazu elemenata bloka nazvat ćemo curenje stilova.

Curenje stila može se pojaviti kao rezultat promjena u svojstvima elemenata drugih blokova ( svojstva propuštanja), i s promjenama u DOM stablu ( kaskadno curenje).

Izvori curenja stilova

Ako uzmemo u obzir bilo koji blok sam po sebi, tada stilovi mogu curiti izvana i izvana. Zbog činjenice da će curenje prema van za jednu jedinicu biti curenje izvana za drugu, pri klasifikaciji curenja možemo se ograničiti na slučaj curenja izvana.

1. Nasljeđivanje imovine

Ako CSS svojstvo bilo kojeg elementa ne eksplicitno postavljena vrijednost koristi se zadana vrijednost. Ako je vrijednost naslijediti, tada je vrijednost svojstva postavljena na vrijednost svojstva nadređenog elementa.
Dakle, korijenski element trenutnog bloka može naslijediti stilove svog roditelja, koji po definiciji pripada drugom bloku.

2. Konformizam svojstava

Ako CSS svojstvo elementa nema eksplicitno specificiranu vrijednost, koristi se zadana vrijednost. Ako se ovo svojstvo prilagodi da odgovara svojstvu nadređenog elementa (na primjer, as svojstva širine i visina sa zadanom vrijednošću auto) ili oponaša (na primjer, kao svojstvo boje pozadine sa zadanom vrijednošću transparentno), zatim krajnji korisnikčinit će se da su stilovi nadređenog elementa prešli na stilove element djeteta.

Vrijedno je napomenuti da se samo postojanje stilova koji cure kroz konformizam može dovesti u pitanje, budući da stilovi nadređenog elementa formalno ne primjenjuju se na element dijete, ali na praksi takvo se ponašanje čak može smatrati poželjnim. Ali ako krenemo od formalan S gledišta, moramo priznati da usklađenost stilova definitivno narušava njihovu enkapsulaciju. Kao praktični Kao dokaz, autor poziva znatiželjnog čitatelja da upotrijebi test patke.

3. Kaskadno haos

(opći sibling kombinator) - do samog prvog sibling elementa.

Jedini način da se ograniči prostor pretraživanja je korištenje podređenog kombinatora i susjednog srodnog kombinatora. Za to je potrebno postaviti točan put u DOM stablu od ciljnog elementa do korijenskog elementa bloka, što dovodi do povećane kohezije između CSS i HTML koda.

U trećem koraku, svojstva stila se dodjeljuju odabranim i filtriranim ciljnim elementima. Štoviše, ako nekoliko selektora zahtijeva isti ciljni element, svaki sa svojom varijantom svojstva, tada se vrijednost svojstva određuje na temelju specifičnosti selektora, a ako je jednaka, na temelju redoslijeda deklaracije.

Dakle, pod određenim uvjetima (korišteni kombinatori, omjer specifičnosti, redoslijed deklaracije), stilovi elemenata vanjskog bloka mogu utjecati na stilove elemenata ugniježđenog bloka. Ovaj bi se utjecaj mogao izbjeći ako bi bilo moguće specificirati regiju DOM stabla u kojoj bi ciljni elementi trebali biti odabrani i filtrirani.

4. Položajno uvjetovanje

) ili pseudo-klase (:prvo dijete, itd.).

Kao i kod konformizma svojstava, vrijedi napomenuti da mnogi razvojni programeri smatraju položajno uvjetovanje vrlo korisnim. Autor članka se slaže s njima sve dok uvjetovanje ne nadilazi granice bloka, jer u ovom slučaju postoji jasno kršenje enkapsulacije stila.

Očito, savršena enkapsulacija CSS stilova trebala bi eliminirati svaku mogućnost njihovog curenja.

Drugi dio članka (“Enkapsulacija CSS stilova - 2. dio. Rješenja”) bit će posvećen analizi koliko trenutni pristupi (OOCSS, SMACSS, ACSS, BEM, CSS predprocesori) odgovaraju idealu, kao i njihovoj klasifikaciji .

bit će mi drago korisni savjeti i konstruktivnu kritiku.

Nasljeđivanje i grupiranje u CSS-u

Pozdrav, dragi čitatelji! Danas, u sklopu odjeljka “CSS Tutorial”. najvažniji pojmovi grupiranje i nasljeđivanje u CSS-u. Svatko tko već duže vrijeme prati moje publikacije vjerojatno je već bio inspiriran potrebom da razumije osnove Cascading Style Sheets. I to je točno, budući da moderni webmaster svakako mora znati Osnovni koncepti te algoritam za primjenu osnovnih znanja HTML-a i CSS-a u praksi.

Čitateljima sam već pružio prilično pristojan niz materijala o ovoj temi, uključujući publikacije o različite vrste CSS selektori, poput selektora oznaka, klasa i identifikatora, kao i selektora atributa i njihove različite upotrebe. Ovaj dio kaskadnih stilskih listova je vrlo važan, međutim, ne smatramo nevažnim.

Pa, sada prijeđimo izravno na današnju temu i pogledajmo Pravila grupiranja i nasljeđivanja u CSS-u, zahvaljujući kojem postaje moguće organizirati i optimizirati dokumente koji opisuju stilove elemenata web stranica web stranice.

Grupiranje u CSS-u

Uzmimo za primjer oznake naslova h1 h2 h3, čiji su stilovi zapisani u datoteci style.css. Na primjer, ovako:

Ako pažljivo pogledate, možete primijetiti da sve oznake zaglavlja imaju jednu zajedničku komponentu CSS stila, naime vrijednost obitelji fonta, koja određuje vrstu fonta. Na toj osnovi možete kombinirati selektore h1-h3 i sastavljati za njih opće pravilo u vezi s vrijednosti obitelji fontova:

A pojedinačna svojstva za svaki selektor koja nisu uobičajena trebaju biti dizajnirana zasebno:

Ovo je grupiranje u CSS. Omogućuje vam da donekle optimizirate unose stila i čini dokument lakšim za čitanje. Mislim da smo ovo shvatili, nema tu ništa komplicirano, Prijeđimo na koncept nasljeđivanja.

Nasljeđivanje u CSS-u

Kao što naziv implicira, nasljeđivanje uključuje prijenos stilskih pravila na elemente koji se nalaze unutar drugih elemenata. Takvi elementi se nazivaju podređeni elementi i oni nasljeđuju stilska svojstva svojih roditelja. Najuspješniji primjer na kojem možete jasno istražiti nijanse CSS nasljeđivanje, je, po mom skromnom mišljenju, html tablica, koji se stvara pomoću oznaka table, tr i td. Recimo da su postavljena svojstva dizajna za oznaku tablice:

Kreirajmo sada jednostavnu tablicu od 4 ćelije:

Na web stranici to će izgledati ovako:

Za ovaj stol je postavljeno zelene boje teksta, pa su riječi u ćelijama poprimile ovu nijansu. To je posljedica činjenice da podređeni element td oznake nasljeđuje svojstva roditeljske oznake tablice. Nadam se da je ovdje sve jasno. Ali morate razumjeti da nisu sva stilska svojstva podložna nasljeđivanju.

Na primjer, obrub definira obrub oko tablice, ali ne i oko ćelija, tako da te ćelije nisu obrubljene unutar tablice. Svojstvo pozadine također se ne nasljeđuje. Međutim, u ovom slučaju postavlja se pitanje: zašto je boja pozadine ćelija dobila boju pijeska, koja je navedena kao vrijednost oznake nadređene tablice, ako nije naslijeđena?

Cijela poanta ovdje je da svojstvo pozadine ima transparent kao zadanu vrijednost za oznaku td, tj prozirnost. Na ovaj način, boja pozadine nadređenog elementa se “provlači” kroz pozadinu podređenog elementa, koja je prozirna. Imajte na umu da u mnogim slučajevima većina CSS svojstava ima zadane vrijednosti. Stoga, ako nijedan parametar nije izričito postavljen za svojstvo, navedena zadana vrijednost stupa na snagu.

Nasljeđivanje vam omogućuje da jednom definirate vrijednosti tako da ih dodijelite nadređenom elementu najviše razine. Recimo da trebamo postaviti boju i font za glavni tekst web stranice bloga ili web stranice. Da biste to učinili, dovoljno je odrediti tražene vrijednosti za izbornik tijela i zadatak će biti izvršen:

Svaki odlomak na ovoj web stranici, na primjer, izgleda ovako:

Bit će uređena u odgovarajućem stilu:

Zahvaljujući nasljeđivanju, nema potrebe za definiranjem svojstava za apsolutno svaki element posebno. Međutim, ponekad morate napraviti izmjene za određeni spremnik, recimo, za neki jedinstveni odlomak čiji bi se tekst trebao istaknuti. U ovom slučaju, eksplicitno postavljamo parametre za ovaj element:

Sada će uobičajeni paragraf na stranici izgledati ovako:

A jedinstveni odlomak s zasebno navedenom vrijednošću boje bit će ovakav:

Ovo je način na koji, koristeći algoritme grupiranja i nasljeđivanja gdje je to potrebno, možete optimizirati stilsku datoteku što je više moguće, čineći je istovremeno lakom za čitanje. Već sam gore spomenuo da nisu sva svojstva CSS-a naslijeđena, pa ću vam dati jednu od stranica službene W3C web stranice, gdje možete saznati više ako želite. detaljne informacije o ovom pitanju. Dakle, stranica "Potpuna tablica svojstava":

Na snimci zaslona crveni okvir ocrtava podatke o tome koja su CSS svojstva naslijeđena, a koja nisu. I na kraju, detaljnije ću objasniti, stupac po stupac, koje su informacije ovdje predstavljene:

“Naziv” — naziv CSS svojstva;
"Vrijednosti" - sve moguće vrijednosti za ovu nekretninu;
"Početna vrijednost" — početna vrijednost Za ovog posjeda, što je zadano (ovo sam spomenuo)
“Primjenjuje se na” - na koje elemente se primjenjuje pravilo, koje uključuje CSS svojstvo;
"Naslijeđen?" — je li to pravilo naslijeđeno ili ne.

To je sve o čemu sam ti danas htio reći. Pokušao sam poučavati nijanse CSS grupiranja i nasljeđivanja što je moguće pristupačnije i učinkovitije. Kako sam ovo napravio? Ti budi sudac. Vaša razina aktivnosti kada se pretplaćujete na nove materijale bloga će odgovoriti na ovo pitanje. Stoga, dopustite mi da se oprostim. Konačno, malo opuštanja ne bi škodilo, posebno onima koji su pristrasni prema KVN-u:

goldbusinessnet.com

Zadnja izmjena: 21.04.2016

Kako bi pojednostavio definiciju stilova, CSS koristi mehanizam nasljeđivanja stilova. Ovaj mehanizam omogućuje ugniježđenim elementima da naslijede stilove svojih elemenata spremnika. Na primjer, recimo da imamo naslov i odlomak na web stranici koji bi trebao imati crveni tekst. Možemo zasebno primijeniti odgovarajući stil na odlomak i naslov, što će uspostaviti željenu boju font:

Nasljeđe stila

Međutim, budući da su i element p i element h2 u elementu tijela, oni nasljeđuju mnoge stilove iz tog spremnika, elementa tijela. A kako bismo izbjegli dupliciranje definicije stila, mogli bismo je napisati ovako:

Nasljeđe stila

Tekst o nasljeđivanju stilova u CSS 3

Kao rezultat toga, definiranje stilova postalo je lakše, ali je rezultat ostao isti.

Ako ne želimo naslijeđeni stil, možemo ga nadjačati za određene elemente:

Tijelo (boja: crvena;) p (boja: zelena;)

Kada su ugniježđeni na više razina, elementi nasljeđuju stilove samo najbližeg spremnika:

Autorska prava MyCorp.com

Ovdje web stranica ima sljedeću strukturu:

Boja teksta div elementa je poništena. A budući da su element h2 i jedan od odlomaka unutra div element, tada nasljeđuju stil elementa div. Drugi odlomak nalazi se izravno u elementu tijela i stoga nasljeđuje stil elementa tijela.

Međutim, sva CSS svojstva ne primjenjuju nasljeđivanje stilova. Na primjer, svojstva koja predstavljaju margine (margina, padding) i granice (border) elemenata se ne nasljeđuju.

Osim toga, preglednici prema zadanim postavkama primjenjuju niz unaprijed postavljenih stilova na elemente. Na primjer, naslovi imaju određenu visinu itd.

zdravo, dragi čitatelju.

Ovo je deveta lekcija učenje CSS-a. U ovoj lekciji ćemo pogledati što je nasljeđivanje i kako izbjeći greške prilikom nasljeđivanja.

Prije učenja ovu lekciju(nasljeđivanje u CSS-u) prođite kroz prethodne lekcije:

Teorija i praksa

Prilikom pisanja CSS stilovi Suočeni smo s problemom da se neka od naših svojstava mogu preklapati s drugim svojstvima koja imaju viši prioritet. Ali također, kao što već znate iz prethodnih lekcija, neka svojstva mogu naslijediti vrijednosti od svojih roditelja. Pogledajmo kako ova situacija jasno funkcionira u kodu.

Primjer html kod:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html > <glava > <naslov > Dom</naslov> <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <veza rel = "stylesheet" type = "text/css" href = "style.css" > </glava> <tijelo > <div id = "sadržaj" > <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 condimentum</li> <li > aliquam volutpat</li> <li > elementum interdum</li> </ul> </div> </div> </tijelo> </html>

Sada pogledajte stablo koje je html:

Sada vidite što je u odnosu na što i kako se odnositi. A sada CSS primjer kod s nasljeđivanjem. Recimo za

Najbolji članci na temu