Trashëgimia e vetive css. CSS

Shënimi: aktivizuar version adaptiv faqe që përshtatet automatikisht në madhësi të vogël Shfletuesi juaj dhe fsheh disa nga detajet e sajtit për lexueshmëri. Shikim i lumtur!

Jam i lumtur t'ju mirëpres përsëri të gjithëve në faqet e blogut. Faqe në! Në artikullin e fundit, ne folëm shkurtimisht dhe zgjidhëm disa shembuj të thjeshtë... Sot tema jonë është një gjë kaq e rëndësishme si trashëgimia në CSS. Trashëgimia CSS quhet kalimi i vetive nga elementi prind tek fëmijët. Ose nëse jeni më të qartë: kalimi i vetive CSS nga etiketa e sipërme tek ato të ndërthurura. Për më tepër, nëse një pronë është e trashëguar apo jo e trashëguar varet nga vetë prona, dhe jo nga etiketat në të cilat është aplikuar. Si punon? Është shumë e thjeshtë, le të kthehemi në paraqitjen tonë, me ndihmën e së cilës mësuam:

Nëse shkruajmë në CSS:

Trupi (ngjyra: jeshile;)

Ajo ngjyrë e mbishkrimit "Dhe këtu ne shkruajmë çdo tekst me interes për ne" në mënyrë të çuditshme do të bëhet e gjelbër. Dhe çfarë do të ndodhë nëse e mbyllim mbishkrimin tonë në një bllok? Kjo është ajo që është bërë pjesa e kodit të interesit për ne:

Pastaj mbishkrimi do të mbetet ende i gjelbër, që nga prona ngjyrë trashëguar, që do të thotë se është kaluar nga etiketa trupi në etiketën e bashkangjitur me të div dhe më tej (nëse ishte ku). Dhe menjëherë një detyrë për ju: çfarë ngjyre do të jetë mbishkrimi ynë nëse kemi kodin e mëposhtëm

Per referim - një etiketë që thjesht tregon një pjesë të tekstit. Nëse asgjë nuk është specifikuar për të në CSS, atëherë nuk bën asgjë.

Përgjigja e saktë: e kuqe. Meqenëse etiketa div ka thyer trashëgiminë nga trupi (por vetëm për etiketat e vendosura brenda një div).

Cili është prioriteti i trashëgimisë në CSS?

Po, absolutisht asnjë. Precedenca e trashëgimisë në CSS nuk është as zero, thjesht nuk është aty. Çfarë na thotë kjo? Po, se çdo pronë e vendosur drejtpërdrejt në etiketën e mbivendosur do të ekzekutohet në vend të vetive që do të kishte trashëguar (por ne nuk e lamë këtë të ndodhte, pasi specifikuam të njëjtën pronë, por me një vlerë të ndryshme).

Kjo tregohet qartë nga shembulli i mëparshëm, ku etiketa div nuk dha një etiketë shtrirje trashëgoni ngjyrën e gjelbër të tekstit nga etiketa trupi, dhe të gjitha sepse ne jemi për etiketën div Ata e kanë shpallur qartë ngjyrën e kuqe, që do të thotë se e kuqja ka përparësinë më të madhe...

Apo ndoshta jo? Le të shohim një shembull më poshtë, ku për të njëjtën etiketë do të jetë në mënyrë eksplicite, por në një mënyrë tjetër, specifikohet e njëjta veti. Pra, le të hedhim një vështrim në CSS tonë:

Div p (Ngjyra: jeshile;) p (ngjyra: e kuqe;)

Si atje ashtu edhe atje ngjyra tregohet qartë për paragrafët, por në një nga rastet, vetëm për paragrafët brenda një blloku, le të shohim rezultatin:

Dhe vetëm brenda një paragrafi - e kuqe

Po miq, këtë herë asgjë revolucionare, fitoi logjika :) Vërtet, kjo është arsyeja pse ato janë tabela kaskadë, në mënyrë që të mund të specifikoni ngjyrat veçmas për elementët e mbivendosur dhe të mos shqetësoheni për vetitë "ndërprerëse".

Le të përmbledhim: Trashëgimia CSS ka përparësinë më të ulët të mundshme, por mbani mend se jo të gjitha pronat trashëgohen. Vetitë që kanë një sqarim të rrethanave (në maus mbi; nëse një etiketë është e vendosur brenda një tjetër, etj.) kanë përparësi ndaj vetive të specifikuara për të gjitha rastet e tjera.

Një tjetër pikë e rëndësishme: nëse pas Vlerat CSS vetitë vendosin një hapësirë ​​dhe shkruajnë e rëndësishme, atëherë kjo pronë do të ketë gjithmonë dhe kudo prioritetin më të lartë. Shembull regjistrimi:

P (ngjyra: e kuqe! E rëndësishme;)

Unë do t'ju këshilloja të shmangni këtë teknikë, në vend që të mendoni paraprakisht strukturë korrekte në mënyrë që të mos keni nevojë të mbivendosni një pronë me një tjetër në mënyrë kaq të vrazhdë, por ndonjëherë përdorimi i saj mund të jetë shumë praktik.

Dhe së fundi, ja çfarë duhet të keni parasysh nëse diçka nuk ju shkon - nëse e shkruani kështu:

P (ngjyra: e kuqe;) p (ngjyra: jeshile;)

Pastaj do të aplikohet vlera që është më poshtë në kod, d.m.th jeshile... Mund të ketë shumë raste të tilla, veçanërisht kur keni pak përvojë, dhe në të njëjtën kohë ato mund të jenë mjaft të larmishme, për të naviguar shpejt problemin, ju këshilloj ta përdorni. Ju mund të lexoni se si t'i përdorni ato dhe cilat janë ato në lidhjen e mësipërme.

1) Karakteristikat e specifikuara për një klasë (klasë) ose një identifikues unik (id) kanë përparësinë më të lartë dhe përparësia e id-së është më e lartë se ajo e klasës. Do të mësoni gjithçka rreth këtyre përzgjedhësve dhe konceptit të një përzgjedhësi në përgjithësi në artikullin vijues.

Më lejoni t'ju kujtoj edhe një herë se mësuesi më i mirë HTML dhe CSS është praktika + referencë, të cilën, nga rruga, e rekomandova në artikullin rreth. Unë rekomandoj gjithashtu të abonoheni në përditësimet në blogun tim, sepse pas arsimit të përgjithshëm dhe artikujve hyrës, patjetër do të shkruaj për disa nga ndërlikimet dhe, nëse mund të them kështu, sekretet e paraqitjes së saktë të faqes.

Kjo është e gjitha për sot, faleminderit për vëmendjen tuaj!

Të gjitha vetitë CSS ndahen në ato që trashëgohen nga elementët pasardhës nga elementët e tyre paraardhës dhe ato që nuk janë. Kështu, për shembull, nëse vendosni një kufi për një paragraf (formoni një kufi), atëherë të gjithë elementët e mbivendosur (elementët pasardhës) nuk do të trashëgojnë këtë pronë CSS, pasi në në këtë rast trashëgimia nuk ka efekt të dobishëm. Dakord, nuk do të ishte plotësisht e arsyeshme të anashkaloheshin kufijtë e trashëguar nga paragrafi prind për çdo element fëmijë. Por, nëse vendosim për një paragraf, për shembull, ngjyre blu font, atëherë ai do të trashëgohet nga të gjithë elementët pasardhës derisa ta ripërcaktojmë, nëse është e nevojshme, për një element specifik, dhe kjo është më efikase sesa të përcaktojmë një font veçmas për secilin element pasardhës. Ju mund të shihni se cilat veçori të stilit janë trashëguar dhe cilat jo, mundeni në faqen zyrtare të W3C (tabela Karakteristikat e CSS ).

Stilet Cascading CSS

Stilet kaskadë- kjo është një veçori e integruar CSS, e cila konsiston në faktin se nëse disa stile aplikohen në një element në të njëjtën kohë, atëherë stili që rezulton do të formohet nga të gjitha llojet e vetive të pranishme në këto stile, dhe nëse ka dy ose më shumë prona identike, vlera e pronës do të zbatohet për elementin me përparësinë më të lartë në këtë situatë.

Le të fillojmë duke parë rastin më të thjeshtë të paraqitur në Shembullin 1.26.

Tekst i thjeshtë i paragrafit.

Teksti i paragrafit me klasën.

Ne anashkalojmë ngjyrën e fontit dhe gjerësinë e paragrafit.

Shembulli 1.26. Rasti më i thjeshtë stilet kaskadë CSS

Siç mund ta shihni nga shembulli, vetëm stili i parë nga fleta e brendshme e stilit zbatohet në paragrafin e parë, i cili i jep atij një sfond të zi dhe një ngjyrë të kuqe fonti. Dy stile nga fleta e brendshme e stilit janë aplikuar tashmë në paragrafin e dytë, kështu që stili që rezulton formohet si më poshtë: së pari, të gjitha vetitë e stilit merren me specifikën (specifitetin) e përzgjedhësit më të madh (në rastin tonë, kjo është stili i dytë), më pas shtohen vetitë që mungojnë nga të tjerët këtë element stile me më pak specifikë (specifitet) të përzgjedhësit (në rastin tonë, ky është stili i parë). Kjo do të shtojë një gjerësi për paragrafin e dytë dhe do të ripërcaktojë sfondin nga e zeza në të verdhë. Në paragrafin e tretë zbatohen njëherësh tre stile: dy nga fleta e brendshme e stilit dhe stili i tij inline. Stili inline ka përparësinë më të lartë, kështu që do të anashkalojë ngjyrën e fontit të specifikuar në stilin e parë dhe gjerësinë e specifikuar në stilin e dytë në fletën e brendshme të stilit.

Kështu, për të llogaritur saktë stilin që rezulton i aplikuar në një element, është e nevojshme të njihen rregullat për formimin e këtij stili në rastin e mbivendosjes së disa stileve në të njëjtën kohë. Këto rregulla përfundojnë në llogaritjen e specifikës së përzgjedhësve të aplikuar për një element të stileve që përmbajnë të njëjtat veti css me kuptime të ndryshme, dhe gjithashtu, në rastin e barazisë së specifikës së përzgjedhësve, për të krahasuar llojet e stileve, krahasoni vendndodhjen e tabelave me këto stile, ose, nëse ato janë të njëjta fletë stili, duke krahasuar vendndodhjen e tyre në kodin e kësaj tabele. Le ta shqyrtojmë këtë çështje në më shumë detaje.

Specifikimi i përzgjedhësve CSS

Nëse dy rregulla zbatohen për të njëjtin element që përmbajnë të njëjtat veti CSS, por kanë vlera të ndryshme, lind një konflikt që mund të zgjidhet duke krahasuar specifikat e përzgjedhësve të këtyre rregullave. Si rezultat i këtij vendimi, vetia e rregullit me specifikën më të lartë të përzgjedhësit do të zbatohet për elementin.

Specifikimi i përzgjedhësit llogaritet duke përdorur tre numra (a, b, c). Kjo ndodh si më poshtë:

• numrit a i caktohet numri i identifikuesve në përzgjedhës;
• b i caktohet numri total i klasave, atributeve dhe pseudo-klasave në përzgjedhës;
• numrit c i caktohet numri i përgjithshëm i elementeve dhe pseudoelementeve.

Pas numërimit të numrave për të gjithë përzgjedhësit e krahasuar, përzgjedhësi me specifikë më të madhe do të konsiderohet ai me më shumë numër a, pavarësisht nga madhësia e numrave b dhe c. Nëse përzgjedhësit e krahasuar kanë të njëjtin numër a, numri i tyre b do të krahasohet, dhe nëse është e nevojshme, numri c (shih shembullin 1.27).

/ * Le të shkruajmë një shembull të kodit html * / / *

Teksti...

* / / * Këtu a = 1, pasi ka 1 identifikues në përzgjedhës; * / / * b = 0, sepse ka 0 klasa, 0 atribute dhe 0 pseudo-klasa; * / / * c = 0, sepse ka 0 elemente dhe 0 pseudoelemente; */ /* atëherë. specifika është (1,0,0). * / #m_id (ngjyra: blu;) / * Këtu a = 0, sepse nuk ka identifikues në përzgjedhës; * / / * b = 3, sepse ka 1 klasë, 1 atribut dhe 1 pseudo-klasë; * / / * c = 2, sepse ka dy elemente: "p" dhe "em"; */ /* atëherë. specifika është (0,3,2). * / p.my_class em: hover (ngjyra: e kuqe;) / * Kjo do të thotë që ngjyra e tekstit në kodin e shembullit do të jetë blu, sepse në rregullin e dytë numri a = 0, dhe në rregullin e parë a = 1. * / / * Por nëse specifikat e përzgjedhësve do të ishin të barabarta, atëherë stili i rregullit të poshtëm do të kishte përparësi. * /

Shembulli 1.27. Krahasimi i specifikave të përzgjedhësve

Llojet dhe përparësia e stileve CSS

Nëse specifika e përzgjedhësve të rregullave të krahasuara është e barabartë, përparësia do të përcaktohet nga lloji i stilit, vendndodhja e fletëve të stilit ose, nëse ato shfaqen në të njëjtën fletë stili, duke krahasuar vendndodhjen e tyre në kodin e këtë fletë. Le të rendisim kryesoren llojet e stileve sipas renditjes në rritje të përparësisë.

• Stili i shfletuesit ka përparësinë më të ulët dhe aplikohet si parazgjedhje për elementët e kodit html, për të cilët nuk aplikohet asnjë formatim tjetër, më thjesht - në kodin html "lakuriq".
• Stili i përdoruesit vendoset në cilësimet e shfletuesit nga përdoruesi dhe është në thelb një stil i paracaktuar i modifikuar nga përdoruesi. Pra, nëse përdoruesi ka ndryshuar stilin e shfletuesit, si parazgjedhje do të jetë stili i përdoruesit.
• Stili i autorit vendosur nga autori i faqes (programuesi) dhe ka prioritet edhe më të lartë. Është ai që do të na interesojë më së shumti.

Stili i një autori është një stil që rezulton i formuar nga llojet e ndryshme të stileve individuale që e përbëjnë atë, përsëri në një bazë kaskade. Ne i rendisim në rendin rritës të përparësisë kur aplikohen për të njëjtin element, me kusht që specifika e përzgjedhësve të jetë e barabartë.

• Stilet e trashëguara nga elementët pasardhës nga prindërit e tyre kanë përparësinë më të ulët.
• Stilet e specifikuara në tabelat e jashtme kanë përparësi. Në këtë rast, rregullat që shfaqen në kodin e fletës së stilit të jashtëm më poshtë (d.m.th., ndodhin më vonë) kanë një përparësi më të madhe ndaj rregullave që gjenden në kodin e kësaj tabele më sipër (d.m.th., më herët). Përveç kësaj, nga disa fletë të jashtme të stilit, tabelat lidhen me dokumentin duke përdorur elementin "lidhje" më poshtë në kodin e këtij dokumenti. Prandaj, nëse tabela përfshihet në kodin e dokumentit të mësipërm, atëherë përparësia e stileve të saj do të jetë më e ulët.
• Stilet e brendshme të tabelave(ndodhet brenda kontejnerëve "stili") kanë përparësi ndaj stileve të tabelave të jashtme, por vetëm nëse ato janë të vendosura në kodin poshtë elementit "lidhje" me të cilën lidhej fleta e jashtme e stilit. Përsëri, rregullat që shfaqen në kodin për fletën e brendshme të stilit më poshtë kanë përparësi ndaj rregullave që shfaqen në kodin për këtë fletë stili më sipër. Gjithashtu, nëse një dokument përdor fletë të shumta stilesh të brendshme, d.m.th. ka disa elemente "stili", atëherë stilet e atyre tabelave që ndodhen në kodin e dokumentit më poshtë kanë një përparësi më të madhe.
• Edhe më shumë prioritet i jepet stilet inline të cilat anashkalojnë rregullat me çdo specifikë përzgjedhësi. Në të vërtetë, është shumë më specifike nëse stili ndodhet në etiketën hapëse të elementit.

Parametri i shërbimit! E rëndësishme

Më vete, duhet thënë për parametrin e shërbimit! E rëndësishme, e cila specifikohet, nëse është e nevojshme, në fletët e stilit të brendshëm dhe të jashtëm pas vlerës së vetive css të ndarë me një hapësirë, për shembull, p (ngjyra: jeshile! E rëndësishme; ). Vetia e stilit në të cilën është specifikuar këtë parametër, ka përparësinë më të lartë pavarësisht nga vendndodhja e fletës së stilit në kodin e dokumentit ose vetë rregulli brenda fletës së stilit, por vetëm në një situatë ku specifikat e stileve janë të barabarta (mos harroni se specifika e stilit të brendshëm duhet të jetë konsiderohet më i larti në çdo rast!). Përsëri, nëse ka disa veti me një parametër të tillë, madje edhe specifika e përzgjedhësve përkatës janë të njëjta, atëherë përparësia do të përcaktohet nga lloji i stilit, vendndodhja e fletëve të stilit ose, nëse ato përfundojnë në të njëjtën fletë stili, duke krahasuar vendndodhjen e tyre në kodin e kësaj flete. ...

Nga sa më sipër, del një përfundim i thjeshtë: sa më afër një elementi të jetë një stil dhe sa më specifik përzgjedhësi i tij, aq më shumë prioritet ka.

Përdorimi i të njëjtave veti CSS në një rregull

Së fundi të këtij paragrafi shtoni se në të njëjtin rregull, ndonjëherë vendosen dy veti identike, por me vlera të ndryshme. Kjo zakonisht bëhet kur një nga vlerat e vetive nuk mbështetet nga ndonjë shfletues, atëherë ajo vendoset e dyta në bllokun e deklarimit (stilit) dhe një rregull tjetër, i cili mbështetet nga të gjithë shfletuesit, vendoset i pari. Si rezultat, nëse faqja hapet në një shfletues në të cilin rregulli i dytë nuk ka efekt, ajo do të shpërfillet dhe shfletuesi do të zbatojë rregullin e parë. Nëse faqja hapet në një shfletues në të cilin rregullat e para dhe të dyta janë të vlefshme, atëherë rregulli i dytë do të ketë një përparësi më të lartë, sepse vijon në kodin më vonë. Kështu, në çdo rast, ideja e programuesit do të zbatohet dhe vlera e vetive e vendosur nga shfletuesi si parazgjedhje ose e trashëguar nga elementi prind nuk do të zbatohet.

Kërcim i shpejtë në faqet e tjera

• Trashëgimia, kaskada dhe përparësia e CSS

Trashëgimia e pronës CSS

Shumica e pronave nuk i kalojnë vlerat e tyre nga prindi tek fëmija.

Për disa, parazgjedhja është rregulluar që të përputhet me prindin

Dhe vetëm disa (shih listën e pronave CSS2 nëse kolona "Trashëguar" është "po") trashëgojnë vlerën e pronës nga prindi

Veti që ndryshon të gjitha stilet CSS përveç drejtimit dhe unicode-bidi

Këto janë vlerat që mund të aplikohen në çdo pronë CSS. Stili i shfletuesit rivendoset kudo, duke përfshirë etiketat e hyrjes, progresi etj.

Stilet e trashëgimit të CSS nga prindi: trashëgojnë

Nëse paraardhësi dhe pasardhësi duhet të specifikohen të njëjtat vlera pronat, është më i përshtatshëm për të përdorur trashëgiminë për modifikim të mëtejshëm - do të jetë e mjaftueshme për të ndryshuar vlerën vetëm për prindin.

inherit nuk transferon vlerën përfundimtare, por atë që specifikohet në stilet e prindit

Shembulli 1: Cili është ndryshimi midis gjerësisë: trashëgoj; dhe gjerësia: 100%;

Shembulli 2: lartësia maksimale: 100%; nuk punon

Shembulli 3: Si të dublikoni stilet CSS të një prindi

trashëgim mbart vlerën e prindit të drejtpërdrejtë, jo pozicionin specifik

Gjithçka kopjohet, edhe ajo që nuk specifikohet nga zhvilluesi në stilet e prindërve

CSS fillestare: zhbëj trashëgiminë

Për të gjetur vlerat fillestare të vetive që varen nga shfletuesi, si ngjyra dhe font-familja, mund të përdorni fillestarin

Shembulli 1: Mos lejo trashëgiminë e pronës

Shembulli 2: hiqni pronën për një përzgjedhës më të ngushtë

fillestar ju lejon të rivendosni të gjitha stilet, duke përfshirë ato që shfletuesi ka vendosur për etiketën e paracaktuar

Shembull: për miniaplikacionet e palëve të treta, çaktivizoni trashëgiminë e stilit dhe stilet e vendosura nga shfletuesi

unset CSS: rivendos stilin e shfletuesit

Sjellja është standarde, vetëm të gjitha etiketat bëhen jopersonale, sikur të ishin prerë në të njëjtën mënyrë. Kjo është, si fillimi, elementet e bllokut bëhen inline.

Shembull: anuloni të gjitha stilet e mundshme të hyrjes

Detyrë shtëpie: në komente, sugjeroni shembullin tuaj të përdorimit të vlerave trashëgimore, fillestare dhe të pacaktuara, përndryshe imagjinata ime tashmë është rraskapitur 🙂

5 komente:

Anonim Përshëndetje!
Mund të më thoni pse është kështu?
https://jsfiddle.net/og96q6x5/

Pse ky i poshtër H2 po e shtyn DIV-në e verdhë poshtë? Në përgjithësi doja pa të kuqe. Lëvizi të verdhën. Unë e bëra atë në një DIV më shumë, kështu që ai lëvizi si të verdhë ashtu edhe të kuq.
Pse?
NMitra Pershendetje me sa kuptoj nuk jeni te kenaqur me shembjen? Shikoni http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html#m-parent Ka zgjidhje për problemin Anonim Faleminderit. Unë e kam gërmuar tashmë këtë boshllëk se si ta zgjidh këtë kolaps. Ose si e juaja ose pastrimi DIV.

nuk kam dicka tjeter.
Ja çfarë ndodhi. E cila është ajo që doja.
Duket se arritëm ta qetësojmë me ekran: inline-block.
https://jsfiddle.net/og96q6x5/2/

Por pyetja mbeti. A është brenda Divës, ai nuk duhet të lëvizë përgjatë kësaj Diva. Mos prek njeri?
Dhe pse me ekran: inline margiņ-top: Nuk funksionon?
https://jsfiddle.net/og96q6x5/1/
Anonim Faleminderit u gjet.
vertikal-align: me ekran: inline; dhe shfaqja: inline-block;

Po. Sa qesharake është e gjitha.
NMitra Dhe pse margiņ-top nuk funksionon me ekranin: inline? - Sepse nuk është bllok, nuk ka lartësi

shpargalkablog.ru

A mundet një klasë CSS të trashëgojë nga një ose më shumë klasa të tjera?

Ndihem budalla që jam programues në internet për kaq shumë kohë dhe nuk e dija përgjigjen për këtë pyetje, shpresoj vërtet që kjo të jetë e mundur dhe thjesht nuk e dija për këtë, jo ajo që mendoj se është përgjigjja (domethënë: e pamundur) .

Pyetja ime është nëse është e mundur të bëhet një klasë CSS që "trashëgon" nga një klasë tjetër CSS (ose më shumë se një).

Për shembull, le të themi se kishim:

Ajo që do të doja të bëja është diçka si kjo:

ku klasa.composite do të shfaqet në vijë dhe do të ketë një sfond të kuq

27 Përgjigje

Ka mjete si LESS që ju lejojnë të kompozoni CSS për më shumë nivel të lartë abstraksion i ngjashëm me atë që po përshkruani.

Më pak thirrje për këto miksime

Ju mund të shtoni disa klasa në një element DOM p.sh.

Trashëgimia nuk është pjesë e standardit CSS.

Po, por jo plotësisht me këtë sintaksë.

Një element mund të marrë disa klasa:

Dhe është pothuajse aq afër sa ju, për fat të keq. Do të doja ta shihja këtë veçori së bashku me disa pseudonime interesante.

Mbani atributet e përgjithshme dhe caktoni përsëri atribute specifike (ose mbizotëruese).

Jo, nuk mund të bësh diçka të tillë

Këta nuk janë "emra klasash" në kuptimin OO. .diçka dhe .tjetër nuk janë më përzgjedhës.

Por ju mund të specifikoni dy klasa për elementin

ose mund të eksploroni një formë tjetër trashëgimie

Aty ku abstraksionet e ngjyrës së sfondit dhe ngjyrave trashëgojnë nga cilësimet në ndarjen mbyllëse që ka stilin .foo. Mund t'ju duhet të kontrolloni specifikimet e sakta të W3C. inherit është parazgjedhja për shumicën e pronave si parazgjedhje, por jo të gjitha.

Unë hasa në këtë problem dhe përfundova duke përdorur zgjidhjen e JQuery për ta bërë të duket sikur klasa mund të trashëgojë nga klasa të tjera.

Kjo do të gjejë të gjithë elementët me klasën "përbërë" dhe do t'u shtojë elementeve klasat "diçka" dhe "tjetër". Pra diçka si

Koha perfekte... Unë kalova nga kjo pyetje në timen e-mail për të gjetur një artikull mbi Less, një bibliotekë Ruby që e bën këtë, meqë ra fjala:

Meqenëse super duket si fundi, por me një font të ndryshëm, unë do të përdor metodën e përfshirjes së klasës më pak (ata e quajnë atë mixin) për të përfshirë edhe këto deklarata:

Gjëja më e mirë që mund të bëni është

SCSS për këtë shembull do të duket diçka si kjo:

Fatkeqësisht, CSS nuk ofron "trashëgimi" ashtu siç bëjnë gjuhët e programimit si C ++, C # ose Java. Ju nuk mund të deklaroni një klasë CSS dhe më pas ta zgjeroni atë me një klasë tjetër CSS.

Megjithatë, ju mund të aplikoni më shumë se një klasë në një etiketë në shënimin tuaj. në këtë rast, ekziston një grup kompleks rregullash që përcaktojnë se cilat stile aktuale do të aplikohen nga shfletuesi.

CSS do të kërkojë të gjitha stilet që mund të aplikohen bazuar në shënimin tuaj dhe do të kombinojë stilet CSS nga ato pak rregulla së bashku.

Në mënyrë tipike, stilet kombinohen, por kur lindin konflikte, zakonisht fiton stili i deklaruar më vonë (përveç nëse një atribut i rëndësishëm specifikohet në një nga stilet, në këtë rast ai fiton). Gjithashtu, stilet aplikohen drejtpërdrejt në Elementi HTML, kanë përparësi ndaj stileve të klasës CSS.

E kuptoj që kjo pyetje është shumë e vjetër tani, por nuk ka asgjë këtu!

Nëse qëllimi është të shtoni një klasë të vetme që nënkupton vetitë e klasave të shumta, si një zgjidhje me porosi, unë do të rekomandoja përdorimin e JavaScript / jQuery (jQuery nuk është vërtet i nevojshëm, por definitivisht i dobishëm)

Nëse keni, për shembull, .umbrellaClass që "trashëgon" nga .baseClass1 dhe .baseClass2, mund të keni disa JavaScript gati për t'u përdorur.

Tani të gjithë elementët .umbrellaClass do t'i kenë të gjitha vetitë si .baseClass s. Vini re se, si trashëgimia OOP, .umbrellaClass mund ose nuk mund të ketë vetitë e veta.

E vetmja paralajmërim këtu është të shqyrtojmë nëse ka elementë që janë krijuar në mënyrë dinamike që nuk do të ekzistojnë kur të aktivizohet ky kod, por ka edhe mënyra të thjeshta kalo këtë.

Css sucks nuk ka trashëgimi amtare.

Trashëgimia

Trashëgimia është transferimi i rregullave të formatimit për elementët që janë brenda të tjerëve. Elementë të tillë janë fëmijët dhe ata trashëgojnë disa nga vetitë e stilimit të prindërve të tyre, brenda të cilëve ndodhen.

Le të hedhim një vështrim në trashëgiminë duke përdorur një shembull tabele. Një tipar i tabelave mund të konsiderohet i rreptë struktura hierarkike etiketa. Së pari vjen kontejneri

Shembulli 18.1. Trashëgimia e ngjyrave

HTML5 CSS 2.1 IE Cr Op Sa Fx

V ky shembull ngjyra e tekstit është vendosur në të kuqe për të gjithë tabelën, kështu që në qeliza vlen edhe për shkak të etiketës

Për të përcaktuar nëse vlera e një veçorie stili është e trashëguar apo jo, duhet të shikoni në referencën e vetive CSS dhe të shikoni atje. Është e kotë të lidhni intuitën tuaj në një rast të tillë, gjithashtu mund t'ju zhgënjejë.

Trashëgimia ju lejon të vendosni vlerat e disa pronave një herë, duke i përcaktuar ato për prindërit niveli më i lartë... Le të themi se dëshironi të vendosni ngjyrën dhe fontin për tekstin e trupit. Mjafton të përdorni përzgjedhësin BODY, të shtoni vetitë e dëshiruara për të dhe ngjyrën e tekstit brenda paragrafëve dhe të tjerëve elementet e tekstit do të ndryshojë automatikisht (shembulli 18.2).

Shembulli 18.2. Opsionet e tekstit për të gjithë faqen e internetit

Në këtë shembull, fonti serif dhe ngjyra e tekstit të paragrafëve vendosen duke përdorur përzgjedhësin BODY. Falë trashëgimisë, nuk ka më nevojë të vendosni ngjyrën për secilin element të dokumentit veç e veç. Megjithatë, ka opsione kur ende duhet të ndryshoni ngjyrën për një enë të veçantë. Në këtë rast, do të duhet të anashkaloni parametrat e dëshiruar në mënyrë eksplicite, siç tregohet në shembullin 18.3.

Shembulli 18.3. Ndryshimi i vetive të një elementi të trashëguar

Në këtë shembull, ngjyra e paragrafit të parë trashëgohet nga përzgjedhësi BODY, dhe për të dytin, vendoset në mënyrë eksplicite përmes një klase të quajtur e kuqe.

Trashëgimia e pronës Css

Drejtuesi kryesor i rritjes së internetit në fillim të mijëvjeçarit ishte konsumi përmbajtjen. Uebfaqet u krijuan për t'u ofruar vizitorëve të tyre ndonjë informacione të dobishme ose përmbajtje argëtuese. Por në vitet e fundit Rëndësia e burimeve të internetit që u ofrojnë përdoruesve shërbime është rritur në mënyrë dramatike duke gjeneruar Përmbajtja (teksti dhe redaktues grafik, spreadsheets, lajmëtarët e çastit, etj.). Kjo shkaktoi transformimin e faqeve në aplikacione me një faqe dhe migrimin në ueb të ndërfaqeve komplekse që më parë ishin prerogativë e programeve të aplikacionit.

Në procesin e këtyre transformimeve dhe migrimeve, rezultoi se rritja e intensitetit të punës për krijimin dhe mbajtjen e një ndërfaqeje në internet tejkalon ndjeshëm rritjen e kompleksitetit të saj. Ata u përpoqën (dhe po përpiqen ende) ta zgjidhin problemin duke u ndarë në module, abstraksion, kapsulim. Për këtë qëllim u krijua nje numer i madh i Kornizat JavaScript (Backbone, Ember, Angular), motorët e modelimit HTML (Jade, Handlebars), sistemet e menaxhimit të varësisë (RequireJS), etj.

Më e vështira nga ky këndvështrim doli të ishte CSS, ku, nga dizajni i gjuhës, çdo pronë e deklaruar në çdo skedar të përfshirë CSS ose etiketë stili mund të ndikojë në shfaqjen e çdo elementi të pemës DOM.

Formalizimi i detyrës.

Për hir të thjeshtësisë, le të supozojmë se i gjithë kodi JavaScript është i mbështjellë në module që nuk dinë asgjë për njëri-tjetrin dhe përmbledhin gjithçka që u nevojitet për të punuar. Moduli di se si të gjenerojë përfaqësimin e tij HTML (le ta quajmë atë bllokoj) dhe ku duhet futur në pemën DOM. Në këtë rast, blloqet mund të futen brenda njëri-tjetrit. Në nivelin e shënjimit, blloku përbëhet nga element rrënjë dhe elementet fëmijë.
Detyra është që shfaqja e elementeve të çdo blloku mund të ndikohet vetëm nga i qëllimshëm një ndryshim në pamjen HTML dhe skedarët përkatës CSS dhe etiketat e stilit.

Çdo ndryshim i paqëllimshëm në shfaqjen e elementeve të bllokut do të thirret stilet e rrjedhjes.

Rrjedhjet e stileve mund të ndodhin si kur ndryshoni vetitë e elementeve të blloqeve të tjera ( vetitë që rrjedhin), dhe me ndryshime në pemën DOM ( rrjedhjet në kaskadë).

Burimet e rrjedhjeve të stilit

Nëse marrim parasysh çdo bllok në vetvete, atëherë stilet mund të rrjedhin si nga jashtë ashtu edhe nga jashtë. Për shkak të faktit se një rrjedhje nga jashtë për një bllok do të jetë një rrjedhje nga jashtë për një tjetër, kur klasifikojmë rrjedhjet, mund të kufizohemi në rastin e rrjedhjeve nga jashtë.

1. Trashëgimia e pasurisë

Nëse ndonjë element mungon në një pronë CSS, në mënyrë të qartë vlerë të caktuar përdoret standardi. Nëse kjo vlerë është e trashëguar, atëherë vlera e vetive vendoset në vlerën e vetive të elementit mëmë.
Kështu, elementi rrënjë i bllokut aktual mund të trashëgojë stilet e prindit të tij, i cili sipas përkufizimit i përket një blloku tjetër.

2. Konformiteti i vetive

Nëse vetia CSS e ndonjë elementi nuk ka një vlerë të qartë, përdoret vlera e paracaktuar. Nëse kjo veti përputhet me një veti të elementit mëmë (për shembull, p.sh vetitë e gjerësisë dhe lartësia me një vlerë të paracaktuar të auto) ose imitues (për shembull, si vetia e ngjyrës së sfondit me një vlerë të paracaktuar transparente), më pas keni përdoruesi përfundimtar do të krijojë përshtypjen se stilet e elementit prind kanë rrjedhur në stile element fëmijë.

Vlen të theksohet se vetë ekzistenca e rrjedhjeve të stilit përmes konformizmit mund të vihet në dyshim, pasi stilet e elementit mëmë zyrtarisht nuk aplikohen për elementin fëmijë, por në praktikë kjo sjellje madje mund të konsiderohet e dëshirueshme. Por nëse nisemi nga formale këndvështrimi, duhet të pranosh që konformizmi i stileve padyshim që cenon kapsulimin e tyre. Si praktike provë autori fton lexuesin kureshtar të përdorë testin e rosës.

3. Kaos kaskadë

(kombinatori i përgjithshëm i vëllezërve) - deri në elementin e parë të motrës.

Mënyra e vetme për të kufizuar hapësirën e kërkimit është përdorimi i kombinatorit të fëmijëve dhe kombinatorit ngjitur me motrat dhe motrat. Për ta bërë këtë, duhet të vendosni shtegun e saktë në pemën DOM nga elementi i synuar në elementin rrënjë të bllokut, gjë që çon në një rritje të bashkimit të kodit CSS dhe HTML.

Në hapin e tretë, vetitë e stilit u caktohen objektivave të zgjedhur dhe të filtruar. Për më tepër, nëse për të njëjtin element të synuar aplikojnë disa përzgjedhës, secili me variantin e vet të pronës, atëherë vlera e pronës përcaktohet në bazë të specifikës së përzgjedhësve dhe nëse është e barabartë, në bazë të rendit të deklarimit.

Kështu, në kushte të caktuara (kombinatorët e përdorur, raporti i specifikës, rendi i deklarimit), stilet e elementeve të bllokut të jashtëm mund të ndikojnë në stilet e elementeve të bllokut të mbivendosur. Ky ndikim mund të shmangej nëse do të ishte e mundur të specifikohej rajoni i pemës DOM në të cilin do të zgjidheshin dhe filtroheshin elementët e synuar.

4. Kushtëzimi i pozicionit

) ose pseudo-klasa (: fëmija i parë, etj.).

Ashtu si me konformitetin e pronës, vlen të përmendet se shumë zhvillues e shohin kushtëzimin pozicional shumë të dobishëm. Autori i artikullit pajtohet me to për sa kohë që kushtëzimi nuk shkon përtej kufijve të bllokut, pasi në këtë rast ka një shkelje të qartë të kapsulimit të stileve.

Natyrisht, kapsulimi ideal i stileve CSS duhet të eliminojë çdo rrjedhje.

Pjesa e dytë e artikullit ("Enkapsulimi i stileve CSS - Pjesa 2. Zgjidhjet") do të analizojë se si qasjet aktuale (OOCSS, SMACSS, ACSS, BEM, CSS paraprocesorët) korrespondojnë me idealin, si dhe klasifikimin e tyre.

do të jem i kënaqur këshilla të dobishme dhe kritika konstruktive.

Trashëgimia dhe grupimi i CSS

Përshëndetje të dashur lexues! Sot nën titullin "CSS Tutorial" konceptet më të rëndësishme grupimi dhe trashëgimia në CSS... Kushdo që i ka ndjekur botimet e mia për një kohë të gjatë, ndoshta tashmë është i mbushur me mendimin e nevojës për të kuptuar bazat e fletëve të stilit Cascading. Dhe kjo është e saktë, pasi një webmaster modern me siguri duhet ta dijë konceptet bazë dhe një algoritëm për zbatimin e njohurive bazë të HTML dhe CSS në praktikë.

Unë kam paraqitur tashmë në gjykimin e lexuesve një seri mjaft të mirë materialesh mbi këtë temë, duke përfshirë botime rreth tipe te ndryshme Përzgjedhës CSS të tilla si përzgjedhësit e etiketave, klasat dhe identifikuesit, dhe përzgjedhësit e atributeve të artit dhe përdorimi i tyre në variacione të ndryshme. Kjo pjesë e fletëve të stilit kaskadë është shumë e rëndësishme, megjithatë, ne nuk do të mbulojmë ato të parëndësishmet.

Epo, tani le të kalojmë drejtpërdrejt në temën e sotme dhe të analizojmë Rregullat e grupimit dhe trashëgimisë CSS, falë të cilave bëhet i mundur organizimi dhe optimizimi i dokumenteve që përshkruajnë stilet e elementeve të faqeve të internetit të faqes në internet.

Grupimi në CSS

Merrni, për shembull, etiketat e titullit h1 h2 h3 që janë stilizuar në skedarin style.css. Për shembull, si kjo:

Nëse shikoni nga afër, do të vini re se ekziston një element i përbashkët i stileve CSS për të gjitha etiketat e titullit, domethënë vlera e fontit-familjes, e cila përcakton pamjen e fontit. Ju mund të kombinoni përzgjedhësit h1-h3 mbi këtë bazë dhe të kompozoni për ta rregull i përgjithshëm në lidhje me vlerën e familjes së shkronjave:

Dhe pronat individuale për secilin përzgjedhës, të cilat nuk janë të zakonshme, duhet të lëshohen veçmas:

Ky është grupimi në CSS. Ai lejon disa optimizime të hyrjeve të dizajnit të stilit dhe bën të mundur thjeshtimin e leximit të dokumentit. Unë mendoj se e kuptuam, nuk ka asgjë të komplikuar këtu, duke kaluar në konceptin e trashëgimisë.

Trashëgimia CSS

Siç sugjeron emri, trashëgimia nënkupton transferimin e rregullave të stilit për elementët që janë brenda të tjerëve. Elementë të tillë quhen fëmijë dhe trashëgojnë vetitë e stilimit të prindërve të tyre. Shembulli më i suksesshëm ku mund të eksploroni vizualisht nuancat Trashëgimia CSS, është, sipas mendimit tim modest, tabela html e cila krijohet duke përdorur tabelat, tr dhe td. Le të themi se vetitë e dizajnit janë vendosur për etiketën e tabelës:

Tani le të krijojmë një tabelë të thjeshtë me 4 qeliza:

Në faqen e internetit, do të duket kështu:

Për këtë tabelë është vendosur ngjyrë jeshile teksti, kështu që fjalët në qeliza morën këtë hije. Kjo është pasojë e faktit se Etiketa e elementit fëmijë td trashëgon vetitë e etiketës së tabelës mëmë... Shpresoj se gjithçka është e qartë këtu. Por ju duhet të kuptoni se jo të gjitha vetitë e stilit janë të trashëguara.

Për shembull, kufiri përcakton një kufi rreth tabelës, por jo rreth qelizave, kështu që ato qeliza nuk janë të përshtatura brenda tabelës. Gjithashtu, prona e sfondit nuk është e trashëguar. Megjithatë, në këtë rast, lind pyetja: pse ngjyra e sfondit të qelizave mori ngjyrën e rërës, e cila specifikohet si vlera e etiketës së tabelës mëmë, nëse nuk trashëgohet?

Çështja këtu është se vetia e sfondit ka transparente si vlerën e paracaktuar për etiketën td, domethënë transparencës... Kështu, ngjyra e sfondit të elementit prind është "e dukshme" përmes sfondit të elementit fëmijë, i cili është transparent. Vini re se në shumë raste ka vlera të paracaktuara për shumicën e pronave CSS. Prandaj, nëse asnjë parametër nuk është caktuar në mënyrë eksplicite për një pronë, vlera e paracaktuar më parë hyn në fuqi.

Trashëgimia ju lejon të përcaktoni vlerat një herë duke i vendosur ato në elementin prind të nivelit të lartë. Le të themi se duam të vendosim ngjyrën dhe fontin për tekstin e trupit të një faqeje interneti në blog ose uebsajt. Për ta bërë këtë, mjafton të përcaktohet vlerat e dëshiruara për përzgjedhësin e trupit dhe do të kryhet detyra:

Tani çdo paragraf në këtë faqe interneti, për shembull, si ky:

Do të dekorohet me stilin e duhur:

Falë trashëgimisë, nuk ka nevojë të përcaktohen vetitë për absolutisht çdo element veç e veç. Sidoqoftë, ndonjëherë ju duhet të bëni ndryshime për një enë të veçantë, të themi, për ndonjë paragraf unik, teksti i të cilit duhet të theksohet. Në këtë rast, ne vendosim parametrat për këtë element në mënyrë eksplicite:

Tani një paragraf normal në faqe do të duket kështu:

Dhe një paragraf unik me një vlerë ngjyrash të shkruar veçmas do të jetë si ky:

Kështu, duke përdorur algoritmet e grupimit dhe trashëgimisë aty ku është e nevojshme, mund të optimizoni skedarin e stilit sa më shumë që të jetë e mundur, duke e bërë të lehtë leximin në të njëjtën kohë. E përmenda tashmë më lart se jo të gjitha pronat CSS janë të trashëguara, ndaj do t'ju jap një nga faqet në faqen zyrtare të W3C, ku mund të merrni më shumë informacion nëse dëshironi. informacion i detajuar në lidhje me këtë pyetje. Pra, faqja "Tabela e plotë e pronave":

Në pamjen e ekranit, një kufi i kuq përdoret për të treguar se cilat veti CSS janë të trashëguara dhe cilat jo. Dhe së fundi, unë do të shpjegoj më në detaje sipas kolonave se çfarë informacioni paraqitet këtu:

"Emri" - emri i pronës CSS;
"Vlerat" - të gjitha vlerat e mundshme për këtë pronë;
"Vlera fillestare" - vlera fillestare për të kësaj pasurie e cila përdoret si parazgjedhje (e përmenda këtë)
"Zbatohet për" - për cilët elementë zbatohet rregulli që përfshin veçorinë CSS;
"Trashëguar?" - nëse ky rregull është i trashëguar apo jo.

Kjo është gjithçka që doja t'ju tregoja sot. Unë u përpoqa të mësoja nuancat e grupimit dhe trashëgimisë CSS sa më të aksesueshme dhe efikase. Si e bëra? Ju takon ju të gjykoni. Niveli juaj i aktivitetit kur abonoheni në përmbajtjen e re të blogut do t'i përgjigjet kësaj pyetjeje. Tani më lejoni të marr lejen time. Më në fund, pak relaksim nuk do të dëmtojë, veçanërisht për ata që nuk janë indiferentë ndaj KVN:

goldbusinessnet.com

Përditësimi i fundit: 21.04.2016

Për të thjeshtuar përkufizimin e stileve, CSS përdor një mekanizëm të trashëgimisë së stilit. Ky mekanizëm supozon se elementët e mbivendosur mund të trashëgojnë stilet e elementeve të tyre të kontejnerit. Për shembull, le të themi se kemi një titull dhe një paragraf në një faqe interneti që duhet të ketë tekst të kuq. Mund të aplikojmë veçmas stilin e duhur për paragrafin dhe titullin, i cili do të vendoset ngjyra e dëshiruar font:

Trashëgimia e stilit

Megjithatë, duke qenë se si elementi p ashtu edhe elementi h2 janë në elementin e trupit, ata trashëgojnë shumë nga stilet nga ky kontejner, elementi i trupit. Dhe për të mos dublikuar përkufizimin e stilit, mund të shkruajmë kështu:

Trashëgimia e stilit

Teksti i trashëgimisë së stilit CSS 3

Si rezultat, përcaktimi i stileve u bë më i lehtë, por rezultati mbeti i njëjtë.

Nëse nuk duam stilin e trashëguar, atëherë mund ta anashkalojmë atë për disa elementë:

Trupi (ngjyra: e kuqe;) p (ngjyra: jeshile;)

Në nivele të shumta të foleve, elementët trashëgojnë stilet e vetëm kontejnerit më të afërt:

E drejta e autorit MyCorp.com

Këtu faqja e internetit ka strukturën e mëposhtme:

Ngjyra e tekstit anashkalohet për elementin div. Dhe meqenëse elementi h2 dhe një nga paragrafët janë në element div atëherë ata trashëgojnë stilin e elementit div. Paragrafi i dytë qëndron drejtpërdrejt në elementin e trupit dhe për këtë arsye trashëgon stilin e elementit të trupit.

Megjithatë, jo të gjitha vetitë CSS aplikojnë trashëgiminë e stilit. Për shembull, vetitë që përfaqësojnë kufijtë (margjinat, mbushja) dhe kufijtë (kufijtë) e elementeve nuk trashëgohen.

Përveç kësaj, shfletuesit e paracaktuar aplikojnë gjithashtu një numër stilesh të paracaktuara për elementët. Për shembull, kokat kanë një lartësi specifike, etj.

Përshëndetje, i dashur lexues.

Ky është mësimi i nëntë mësimi i CSS... Në këtë tutorial do të shohim se çfarë është trashëgimia dhe si të shmangim gabimet në trashëgimi.

Para se të studioni këtë mësim(trashëgimi në CSS) ndiqni udhëzimet e mëparshme:

Teoria dhe praktika

Kur shkruani Stilet CSS jemi përballur me problemin që disa nga pronat tona mund të mbivendosen me prona të tjera që kanë prioritet më të lartë. Por gjithashtu, siç e dini tashmë nga mësimet e mëparshme, disa prona mund të trashëgojnë vlera nga prindërit e tyre. Le të shohim se si kjo është qartë në kod.

Shembull kodi 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> <kokë> <titull> në shtëpi</ titulli> <meta http-equiv = "Lloji i përmbajtjes" përmbajtja = "tekst / html; grup i karaktereve = utf-8"> <lidhje rel = "stylesheet" type = "tekst / css" href = "style.css"> </ kokë> <trup> <div id = "përmbajtje"> <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> </ trupi> </ html>

Tani hidhini një sy pemës, e cila është html:

Tani ju shihni se çfarë është në lidhje me atë dhe si të lidheni. Dhe tani shembull CSS kod me trashëgimi. Le të pranojmë për

Artikujt kryesorë të lidhur