Shënimi: aktivizuar version adaptiv faqe interneti që përshtatet automatikisht me madhësi të vogël shfletuesin tuaj dhe fsheh disa detaje të faqes për lexueshmëri. Shijojeni shikimin!

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 shkurt dhe analizuam disa shembuj të thjeshtë. Tema jonë sot është po aq e rëndësishme sa trashëgimia në CSS. Trashëgimia në CSS quhet kalimi i vetive nga një element prind tek elementët fëmijë. Ose nëse ka më shumë kuptim për ju: kalimi i vetive CSS nga etiketa e sipërme tek ato të vendosura brenda tij. Për më tepër, nëse një pronë është e trashëguar apo jo, varet nga vetë prona dhe jo nga etiketat në të cilat është aplikuar. Si punon? Po, shumë e thjeshtë, përsëri në paraqitjen tonë, me të cilën mësuam:

Nëse shkruajmë në CSS:

Trupi (ngjyra: jeshile; )

Pastaj ngjyra e mbishkrimit "Dhe këtu shkruajmë çdo tekst që na intereson" 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ë, kjo është ajo që është bërë pjesa e kodit që na intereson:

Mbishkrimi do të mbetet ende i gjelbër, që nga prona ngjyrë trashëguar, që do të thotë se është transmetuar nga etiketa trupi te etiketa e mbivendosur div dhe më tej (nëse do të ishte ku). Dhe menjëherë keni një problem: çfarë ngjyre do të jetë mbishkrimi ynë nëse kemi kodin e mëposhtëm

Per referim - një etiketë që thjesht përcakton 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. Sepse etiketa div anulon trashëgiminë nga trupi (por vetëm për etiketat e vendosura brenda div-ve).

Cila është përparësia e trashëgimisë në CSS?

Po, absolutisht asnjë. Precedenca e trashëgimisë në CSS nuk është as zero, thjesht nuk ekziston. Çfarë na thotë kjo? Po, se çdo pronë e vendosur direkt në etiketën e ndërthurur do të ekzekutohet në vend të pronës që do të trashëgonte (por ne nuk e lejuam këtë të ndodhë, pasi kemi specifikuar të njëjtën pronë, por me një vlerë të ndryshme).

Kjo dëshmohet qartë nga shembulli i mëparshëm, ku etiketa div nuk dha një etiketë shtrirje trashëgo ngjyrën e gjelbër të tekstit nga etiketa trupi, dhe të gjitha sepse ne jemi për etiketën div në mënyrë eksplicite kanë deklaruar ngjyrën e kuqe, që do të thotë se përparësia e ngjyrës së kuqe është më e larta ...

Apo ndoshta jo? Le të shohim shembullin më poshtë, ku e njëjta pronë do të specifikohet në mënyrë eksplicite për të njëjtën etiketë, por në një mënyrë të ndryshme. Pra, le të shohim CSS-në tonë:

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

Si këtu ashtu edhe atje ngjyra është e specifikuar në mënyrë eksplicite për paragrafët, por në një nga rastet, vetëm për paragrafët brenda bllokut, le të shohim rezultatin:

Dhe vetëm brenda paragrafit - e kuqe

Po, miq, këtë herë asgjë revolucionare, logjika fitoi :) Në fund të fundit, ato janë tabela në 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".

Për të përmbledhur: trashëgimia në CSS ka përparësinë më të ulët të mundshme, por ia vlen të kujtohet se jo të gjitha pronat trashëgohen. Vetitë që kanë përsosje të rrethanave (kur rri pezull miun, nëse një etiketë është e vendosur brenda një tjetri, etj.) kanë përparësi ndaj vetive të specifikuara për të gjitha rastet e tjera.

Nje me shume pikë e rëndësishme: nëse pas vlerës Karakteristikat e CSS vendos një hapësirë ​​dhe shkruaj !e rendesishme, 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ë këshilloja të shmangni një teknikë të tillë, në vend që të mendoni përpara strukturë korrekte në mënyrë që të mos keni nevojë të anashkaloni një pronë kaq përafërsisht me një tjetër, 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; )

Kjo do të zbatojë vlerën që është në kodin më poshtë, d.m.th jeshile. Mund të ketë shumë raste të ngjashme, veçanërisht kur keni pak përvojë dhe në të njëjtën kohë ato mund të jenë mjaft të ndryshme, për të lundruar shpejt problemin, ju këshilloj t'i 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 përsëri se mësuesi më i mirë për HTML dhe CSS është praktika + referenca, të cilën, nga rruga, e rekomandova në një artikull rreth . Unë rekomandoj gjithashtu të abonoheni në përditësimet e blogut tim, sepse pas artikujve të përgjithshëm arsimorë dhe prezantues, unë patjetër do të shkruaj për disa nga hollësitë 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!

Në këtë kapitull:

Trashëgimia

Kur specifikoni një stil për një element, disa nga vetitë mund të trashëgohen nga elementët dhe pasardhësit e tij fëmijë, ky efekt quhet trashëgimi.

Për shembull, të gjithë elementët e vendosur brenda elementit , janë fëmijët dhe pasardhësit e saj. Nëse në stil për pyesni me duke përdorur CSS ngjyra e pronës ngjyra e kuqe e tekstit, atëherë ngjyra e tekstit të të gjithë fëmijëve dhe pasardhësve të tij do të bëhet gjithashtu e kuqe:

Titulli i tekstit është ngjyra e kuqe

Ngjyra e tekstit të paragrafit është gjithashtu e kuqe.

Karakteristikat e trashëguara mund të anashkalohen duke aplikuar një rregull individual për elementin e dëshiruar:

Ngjyra e tekstit të titullit blu

Ngjyra e tekstit të paragrafit është e kuqe.

Llogaritja e specifikës (përparësisë) së përzgjedhësve

Ka shumë mënyra për të aplikuar një stil vizual elementi i dëshiruar. Por çfarë ndodh nëse i njëjti element zgjidhet nga dy ose më shumë përzgjedhës reciprokisht ekskluzivë? Kjo dilemë zgjidhet me dy Parimet CSS: specifika e selektorëve dhe kaskadës.

Specifikimi i përzgjedhësit(specifiteti i përzgjedhësit) përcakton përparësinë e tyre në fletën e stilit. Sa më specifik të jetë zgjedhësi, aq më i lartë është prioriteti i tij. Për të llogaritur specifikën e përzgjedhësit përdoren tre grupe numrash (a, b, c), llogaritja është si vijon:

• Numri i identifikuesve në përzgjedhës numërohet (grupi a)
• Numërohet numri i përzgjedhësve të klasës, atributeve dhe pseudo-klasave në përzgjedhës (grupi b)
• Numëron numrin e përzgjedhësve të tipit dhe pseudoelementeve në përzgjedhës (grupi c)
• Një përzgjedhës brenda një pseudo-klase mohimi (:not) llogaritet si çdo përzgjedhës tjetër, por vetë pseudo-klasa e mohimit nuk merr pjesë në vlerësimin e përzgjedhësit
• Zgjedhësi universal (*) dhe kombinatorët nuk marrin pjesë në llogaritjen e peshës së përzgjedhësit

Në shembullin e mëposhtëm, përzgjedhësit janë rregulluar sipas specifikës në rritje:

* /* a=0 b=0 c=0 -> specifika = 0 */ li /* a=0 b=0 c=1 -> specifika = 1 */ ul li /* a=0 b=0 c= 2 -> specifika = 2 */ ul ol+li /* a=0 b=0 c=3 -> specifika = 3 */ h1 + * /* a=0 b=1 c=1 -> specifika = 11 * / ul ol li.red /* a=0 b=1 c=3 -> specifika = 13 */ li.red.niveli /* · a=0 b=2 c=1 -> specifika = 21 */ # x34y / * a=1 b=0 c=0 -> specifika = 100 */ #s12:not(p) /* a=1 b=0 c=1 -> specifika = 101 */

Numri i grupit "a" ka përparësinë më të lartë, numri i grupit "b" ka përparësi mesatare, numri i grupit "c" ka përparësinë më të ulët. Numrat nga grupe të ndryshme nuk përmblidhen në një të përbashkët, d.m.th. Le të marrim nga shembulli rreshtin e fundit me specifikën e përzgjedhësit "101" - kjo nuk do të thotë numrin "njëqind e një", do të thotë që një përzgjedhës nga grupi "a" (identifikuesi) dhe një përzgjedhës. janë përdorur nga grupi "c" (përzgjedhës i tipit).

Një stil inline ka përparësi mbi një stil të përcaktuar në një fletë stili të brendshëm ose të jashtëm. Megjithatë, nëse për pronë specifike specifikoni një deklaratë të veçantë! e rëndësishme në një fletë stili të brendshëm ose të jashtëm, atëherë ajo do të ketë përparësi mbi vlerën e një vetie të ngjashme në stilin e brendshëm. Deklarata! e rëndësishme vendoset pas vlerës së pasurisë, përpara pikëpresjes:

Paragrafi i parë

Paragrafi i dytë.

Kaskadë

Cascading është një veçori CSS me të cilën shfletuesi përcakton se cilat vlera të vetive do të aplikohen në një element kur ndodh një konflikt pronësie. Një konflikt i vetive ndodh kur përcaktohen rregulla të shumta për një element, përzgjedhësit e të cilit kanë të njëjtën specifikë dhe përmbajnë të njëjtat veti, por me vlera të ndryshme.

Kaskada funksionon si më poshtë: nëse në fletën e stilit përcaktohen disa rregulla për një element, përzgjedhësit e të cilëve kanë të njëjtën specifikë dhe përmbajnë veti konfliktuale, atëherë vlerat e vetive konfliktuale të rregullit të vendosura më poshtë në fletën e stilit. janë vendosur për elementin:

Ngjyra e tekstit të paragrafit është jeshile.

Nëse rregulla të ndryshme për të njëjtin element përmbajnë veti që nuk bien ndesh, atëherë ato kombinohen në një stil, d.m.th. çdo rregull i ri shton informacione të reja rreth stilit të rregullit të mësipërm:

h1 (ngjyra: gri; font-familja: sans-serif; ) h1 (kufiri-fund: 1px e zezë;)

Kodi në shembullin e mësipërm është ekuivalent me kodin në shembullin më poshtë, ku të tre vetitë janë të specifikuara në një rregull:

H1 (ngjyra: gri; font-familja: sans-serif; kufiri-fund: 1px e zezë; )

Zakonisht, rregulla shtesë për një element specifikohen në rastet kur një stil është vendosur për disa elementë në të njëjtën kohë, por përveç kësaj, duhet të shtohet diçka tjetër për një element specifik:

H1, h2, h3 ( /* i njëjti stil për tre elementë */ ngjyra: gri; font-familje: sans-serif; ) /* rregull shtesë për titujt e nivelit të dytë */ h2 (kufiri-fund: 1px e zezë e fortë; )

Pragu për hyrje në CSS është mjaft i ulët, kryesisht për shkak të vetë natyrës së sintaksës së saj, e cila është transparente dhe e lehtë për t'u kuptuar edhe për një projektues të papërvojë të internetit. Është kaq e lehtë sa mund të kodoni një faqe interneti të thjeshtë CSS në vetëm disa orë mësimi të fletëve të stilit Cascading. Por kjo thjeshtësi e dukshme është mashtruese. Pas disa orësh pune, faqja juaj e kompozuar në mënyrë perfekte duket e mrekullueshme në Safari, por gjithçka shkon dëm nëse nuk pranoni masat e nevojshme paraprakisht në mënyrë që gjithçka të funksionojë siç duhet dhe në Internet Explorer. Në një panik, ju shtoni një sërë hakerash dhe filtrash ku mjaftonte vetëm të rregulloni disa cilësime ose thjesht të merrnit një qasje tjetër. Njohja se si të merreni me këto çështje vjen me përvojë dhe goditje, prova dhe gabime dhe dështime që ju çojnë në rrugën e duhur për të mësuar CSS. Të kuptuarit e disa koncepteve, të cilat në shikim të parë janë mjaft të vështira për t'u kuptuar dhe duken jashtëzakonisht të mërzitshme, është jashtëzakonisht e rëndësishme për përdorim të mëtejshëm. Por shumë thjesht nuk i kushtojnë vëmendje të mjaftueshme kuptimit të tyre, gjë që shpesh është rrënja e të gjitha problemeve kur i përdorin ato. Dy koncepte të tilla janë specifika dhe trashëgimia. Fjalë jo shumë të zakonshme në fjalorin e stilistëve të uebit, apo jo? Është shumë më interesante dhe argëtuese të flasësh për rreze-kufi dhe hije teksti, por specifika dhe trashëgimia janë thelbësore. konceptet bazë, të cilin kushdo që pretendon se është ekspert i CSS duhet ta kuptojë qartë. Kuptimi i këtyre koncepteve do t'ju ndihmojë të krijoni fletë stili të pastra, të mirëmbajtura dhe fleksibël. Le të hedhim një vështrim se çfarë nënkuptojnë dhe si funksionojnë. Cascading është vetë zemra e CSS. Ai përfundimisht përcakton se cilat veti do të ndryshojë. elementi i dhënë. Kaskada shoqërohet me tre koncepte kryesore: origjinën, përparësinë dhe specifikën. Kaskada CSS kalon nëpër këto tre hapa rregullash për të përcaktuar se cilat veti t'i caktohen një elementi. Në fund të këtij procesi, një peshë do t'i caktohet çdo rregulli në një kaskadë, dhe kjo peshë përcakton se cili rregull ka përparësi në rast mosmarrëveshjeje.

Origjina dhe prioriteti

Fletët e stileve mund të kenë origjinë të shumëfishtë:

1. agjenti i përdoruesit
   • Për shembull, stili i parazgjedhur i shfletuesit
2. përdorues
   • Stili i specifikuar nga përdoruesi në cilësimet e shfletuesit
3. Autori
   • Stili i autorit i specifikuar nga autori i faqes (stili i jashtëm, inline ose inline, kur në një dokument HTML informacioni i stilit për një element specifikohet në atributin e stilit të tij)

Si parazgjedhje, ekziston një renditje në të cilën stilet nga burime të ndryshme përpunohen - për shembull, rregullat e autorit tejkalojnë rregullat e përdoruesit dhe të shfletuesit, etj. Ekziston edhe konstrukti i përparësisë !important, i cili përdoret për të balancuar përdorimin e fletëve të stilit të përdoruesit dhe autorit. Ndërsa fleta e stilit e paracaktuar e një autori ka përparësi mbi të tjerat, një rregull i personalizuar i deklaruar me konstruktin !importan do të anashkalojë edhe atë të një autori me të njëjtin konstrukt. Duke e ditur këtë, le të shohim listën përfundimtare, në rend rritës të rëndësisë sipas përparësisë dhe origjinës:

1. reklamat e agjentëve të përdoruesve,
2. reklama me porosi,
3. reklama për të drejtat e autorit,
4. Deklaratat e autorit me ndërtimin!e rëndësishme,
5. Deklarata të personalizuara me konstruktin !important.

Ky fleksibilitet për sa i përket prioriteteve është thelbësor në Fletët e stileve Cascading, pasi u lejon përdoruesve të anashkalojnë stilet që përndryshe do të parandalonin aksesimin e një faqe interneti. (Përdoruesi mund të kërkojë më shumë se shtyp i madh ose një ngjyrë të ndryshme teksti, për shembull.)

Specifikimi

Siç e kemi parë më lart, secili rregulli css ka një peshë të caktuar, domethënë mund të jetë pak a shumë i rëndësishëm se të tjerët, ose mund të jetë i barabartë në shkallën e rëndësisë. Kjo peshë përcakton se cilat veti do të zbatohen për elementin kur ka norma konkurruese. Pas renditjes sipas përparësisë dhe origjinës, kaskada i rendit rregullat që rezultojnë të barabarta për sa i përket specifikës - nëse një rregull është më specifik (konkret) se një tjetër, ai e tejkalon atë. Nëse dy rregulla kanë të njëjtën peshë (origjina, përparësia dhe specifika), përdoret ai i deklaruar më vonë.

Si të llogarisni specifikën?

Nëse ekzistojnë disa metoda për llogaritjen e specifikës së përzgjedhësve. Shumica mënyrë të shpejtëështë si më poshtë: Shtoni 1 për çdo element ose pseudoelement (p.sh. :para dhe :pas); shtoni 10 për çdo atribut (p.sh. ), klasë ose pseudo-klasë (:link ose :hover); shtoni 100 për çdo ID dhe shtoni 1000 në stilin inline. Le të llogarisim specifikën e përzgjedhësve të mëposhtëm duke përdorur kjo metodë: p.shënim - 1 klasë + 1 element = 11 #bari anësor p - 1 ID + 1 atribut + 1 element = 111 trupi #main .post ul li:fëmija e fundit - 1 ID + 1 klasë + 1 pseudo klasë + 3 elementë = 123 Një metodë e ngjashme, e përshkruar në specifikimin W3C, sugjeron që të fillojmë me një rezultat specifikiteti zero (në numrin abcd, çdo bit është zero a = 0, b = 0, c = 0 dhe d = 0) dhe zëvendësoni shifrat sipas nëse zgjedhësi ka elemente, atribute etj.):

• a = 1 nëse stili inline,
• b = numri i identiteteve,
• c= numri i atributeve të përzgjedhësve, klasave dhe pseudo-klasave,
• d = numri i emrave të elementeve dhe pseudo elementeve.

Le të llogarisim specifikën e grupit të mëposhtëm të përzgjedhësve:

• a=1, b=0, c=0, d=0 → 1000 në fund të faqes në:fëmija e fundit
• a=0, b=0, c=1, d=3 → 0013 #hyrja e shiritit anësor:not()
• a=0, b=1, c=1, d=1 → 0111

Mos harroni se shënimi prezantues jo-CSS i jepet një vlerë specifike zero, e cila do të zbatohej për etiketën e shkronjave, për shembull. Duke u rikthyer te konstrukti !important, mos harroni se përdorimi i kësaj përparësie për vetitë e stenografisë e vendos atë automatikisht në të gjitha nënvetitë, edhe nëse i kthen ato në vlerat e tyre origjinale. Nëse jeni duke përdorur fletë stilesh të importuara CSS (@import), duhet t'i deklaroni ato përpara të gjitha rregullave të tjera në mënyrë që të konsiderohen se paraprijnë të gjitha rregullat në skedarin CSS.

Si ta bëni specifikën të funksionojë për ju

Nëse e ndiqni pa kujdes specifikën, atëherë kjo mund t'ju çojë të krijoni, në vend të një fletë stili kompetent, diçka të errët me një masë masive. struktura hierarkike rregulla të panevojshme dhe tepër të ndërlikuara. Për të shmangur këtë, nuk duhet të harroni rregullat themelore për të punuar me specifikat:

• Kur fillojmë të punojmë në CSS, përdorni përzgjedhës të përgjithshëm dhe shtoni specifika ndërsa shkojmë dhe përsosim atë.
• Përdorimi i përzgjedhësve kompleks nuk do të thotë t'i bësh ato sa më komplekse
• Mbështetja më shumë në specifikat sesa në renditjen e përzgjedhësit i bën fletët e stilit tuaj më të lehtë për t'u modifikuar dhe mirëmbajtur (veçanërisht për të huajt).

Rifaktorimi Përzgjedhës CSS, më pak specifike në një shkallë eksponenciale, është më e vështirë sesa thjesht shtimi i rregullave specifike kur lindin situata.

Trashëgimia

Trashëgimia është një mënyrë për të përhapur vlerën e vetive të elementit nga prindërit te fëmijët. Disa veti CSS trashëgohen nga fëmijët e elementeve si parazgjedhje. Për shembull, nëse vendosni etiketë e trupit fontin specifik të faqes, atëherë fonti do të trashëgohet nga elementë të tjerë, si titujt dhe paragrafët, pa kërkuar çdo herë mbushjen e duhur. Specifikimi CSS përcakton kur secila pronë trashëgohet si parazgjedhje. Jo të gjitha pronat trashëgohen, por ne mund të detyrojmë disa veti të trashëgohen duke caktuar një vlerë trashëgimore. Edhe pse kjo është disi përtej qëllimit të këtij artikulli, megjithatë vlen të përmendet se trashëgimia në CSS nuk duhet të ngatërrohet me trashëgiminë në programimin e orientuar drejt objektit (OOP). Ja se si duket përkufizimi i Wikipedia-s për trashëgiminë OOP, i cili sqaron se nuk po flasim për të njëjtën gjë: Në programimin e orientuar nga objekti (OOP), trashëgimia është një mënyrë për të formuar klasa të reja [...] nga klasa që kanë tashmë është përcaktuar. Trashëgimia përdoret për të ndihmuar përdorimin kodin ekzistues me ndryshime minimale. [Klasat...] të reja trashëgojnë atributet dhe sjelljen e klasave tashmë ekzistuese. ...

Si funksionon trashëgimia?

Kur një element trashëgon një vlerë nga paraardhësi i tij, ai trashëgon vlerën e tij të llogaritur. Çfarë do të thotë kjo? Çdo pronë në CSS kalon nëpër një proces katër hapash të përcaktimit të një vlere. Këtu është një citat nga specifikimi i W3C: Vlera përfundimtare e një prone është rezultat i një llogaritjeje me katër hapa: vlera e përcaktuar nga specifikimi (vlera e specifikuar), më pas zgjidhet në vlerën e përdorur për trashëgimi (vlera e llogaritur), e cila , nëse është e nevojshme, konvertohet në një vlerë absolute dhe tashmë përfundimisht transformohet në një vlerë, në përputhje me kufizimet e mjedisit lokal ("vlera aktuale"). Me fjale te tjera:

1. Vlera e specifikuar.
Agjenti i përdoruesit (vegla e përdoruesit, i njëjti shfletues) përcakton se nga duhet të përdoret vlera për pronën - nga fleta e stilit, ajo është e trashëguar ose ka formën e saj origjinale.
2. Vlera e llogaritur.
Vlera e specifikuar zgjidhet në një vlerë të llogaritur dhe ekziston edhe kur vetia nuk zbatohet. Dokumenti nuk duhet të shtypet për të vlerën e dhënëështë përcaktuar.
3. Vlera për t'u përdorur.
Vlera e përdorur merr vlerën e llogaritur dhe zgjidh me të të gjitha varësitë që mund të llogariten vetëm më pas
4. Vlera reale.
Kjo vlerë përdoret për paraqitjen përfundimtare, pas aplikimit të çdo përafrimi (p.sh. transformimi numra dhjetorë në një tërësi).

Nëse shikoni specifikimin e ndonjë vetie CSS, do të shihni se e përshkruan atë vlera fillestare(parazgjedhja), elementet ku aplikohet, statusi i trashëgimisë dhe vlera e llogaritur e saj (ndër të tjera). Për shembull, specifikimi i vetive të ngjyrës së sfondit (ngjyra e sfondit) është si vijon: Emri: ngjyra e sfondit Vlera: Fillestare: transparente Zbatohet për: të gjithë elementët e trashëguar: jo Përqindjet: N/A Media: vizuale Vlera e llogaritur: Ngjyra(t) e llogaritura Jeni të hutuar disi? Ndoshta. Pra, çfarë duhet të kuptojmë nga e gjithë kjo? Dhe pse ka të bëjë me trashëgiminë? Le të hedhim një vështrim në fjalinë e parë. këtë seksion, e cila tani do të jetë më e qartë për ne. Kur një element trashëgon një vlerë nga paraardhësi i tij, ai trashëgon vlerën e tij të llogaritur. Vlera e llogaritur ekziston edhe nëse nuk ishte në fletën e stilit, dhe në përputhje me rrethanat, edhe në këtë rast, ajo mund të trashëgohet dhe të marrë vlerën që ekzistonte si parazgjedhje. Kështu, ju mund të përdorni trashëgiminë edhe nëse elementi prind nuk kishte një vlerë të caktuar të specifikuar.

Përdorimi i trashëgimisë

Gjëja më e rëndësishme që duhet të dini për trashëgiminë është ekzistenca e saj dhe mënyra se si funksionon. Në përgjithësi, në fakt, trashëgimia në këtë rast mjaft e thjeshtë për t'u kuptuar. Imagjinoni nëse do t'ju duhej të specifikoni një madhësi fonti ose familje font për çdo element në vend që ta shtoni atë në etiketën e trupit? Kjo do të ishte tmerrësisht e pafuqishme, prandaj trashëgimia është kaq e dobishme. Mos e prishni duke përdorur përzgjedhësin universal (*) me vetitë që trashëgohen si parazgjedhje. Nuk është e nevojshme të mbani mend të gjitha vlerat e trashëguara, por duhet t'i mbani mend ato me radhë. Rrallëherë një artikull CSS nuk përmban disa lajm i keq rreth Internet Explorer. Ky artikull nuk bën përjashtim. IE mbështet vetëm trashëgiminë e vlerës nga versioni 8, me përjashtim të vetive të drejtimit dhe dukshmërisë. I ftohtë.

Duke përdorur mjete

Nëse përdorni mjete si Firebug ose Safari Web Inspector, mund të shihni se si funksionon kjo kaskadë, cilët përzgjedhës kanë specifikë më të lartë dhe si funksionon trashëgimia për një element të caktuar. Për shembull, më poshtë është Firebug në veprim, duke kontrolluar një element në faqe. Ju mund të shihni se disa veti janë ripërcaktuar (ato janë të kryqëzuara në pamjen e ekranit) në rregulla të tjera, më specifike (konkrete):
Në pamjen e mëposhtme të ekranit Safari, shfaqet inspektori i uebit vlerat e llogaritura element. Në këtë mënyrë ju mund t'i shihni vlerat edhe nëse ato nuk janë shkruar qartë në fletën e stilit:

konkluzioni

Edhe nëse nuk mendoni shumë për to, këto pyetje janë në mendjen tuaj puna e përditshme si puna e një personi kodues CSS. Sidomos në rastin e specifikës, është e rëndësishme të dini se si ndikon në fletët e stilit dhe si të planifikohet për të në mënyrë që të shkaktojë vetëm numrin minimal të problemeve të kodimit. Ose më mirë akoma, mos telefononi fare. 11 mars 2014 në orën 06:23

Përmbledhja e stileve CSS - Pjesa 1. Problemi

• css,
• HTML

Drejtuesi kryesor i rritjes së internetit në fillim të mijëvjeçarit ishte konsumi përmbajtjen. Faqet e internetit u krijuan për t'u ofruar vizitorëve të tyre një lloj informacione të dobishme ose përmbajtje argëtuese. Por në vitet e fundit Rëndësia e burimeve të internetit që ofrojnë shërbime për përdoruesit është rritur ndjeshëm brezi 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 kompleksitetit të krijimit dhe mirëmbajtjes së një ndërfaqeje në internet tejkalon ndjeshëm rritjen në kompleksitetin e saj. Ata u përpoqën (dhe po përpiqen ende) ta zgjidhin problemin duke e ndarë atë në module, duke abstraguar, duke e përmbledhur. Për këtë qëllim u krijua nje numer i madh i Kornizat JavaScript (Backbone, Ember, Angular), shabllonet HTML (Jade, Handlebars), sistemet e menaxhimit të varësisë (RequireJS), etj.

CSS doli të ishte më e vështira nga ky këndvështrim, 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.

Le të supozojmë për thjeshtësi se i gjithë kodi JavaScript është i mbyllur në module që nuk dinë asgjë për njëri-tjetrin dhe përmbledhin gjithçka që u nevojitet për punën e tyre. 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 në njëra-tjetrën. Në nivelin e shënjimit, blloku përbëhet nga element rrënjë Dhe elementet fëmijë.
Detyra është të sigurohet që shfaqja e elementeve të çdo blloku mund të ndikohet vetëm nga i qëllimshëm ndryshimi 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 stilit mund të ndodhin si rezultat i ndryshimeve në vetitë e elementeve të blloqeve të tjera ( vetitë e rrjedhjes), si dhe ndryshimet në pemën DOM ( rrjedhjet në kaskadë).

Burimet e rrjedhjeve të stilit

Nëse marrim parasysh çdo bllok në vetvete, atëherë rrjedhjet e stilit mund të jenë 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, klasifikimi i rrjedhjeve mund të kufizohet në rastin e rrjedhjeve nga jashtë.

1. Trashëgimia e pasurisë

Nëse një veti CSS nuk ka një element në mënyrë të qartë vlerë të caktuar përdoret vlera e paracaktuar. Nëse kjo trashëgojnë vlerën, 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.

Për shembull,
.blloku i jashtëm ( ngjyra: e kuqe; )

2. Konformizmi i vetive

Nëse një veti CSS nuk ka një vlerë të qartë për një element, përdoret vlera e paracaktuar. Nëse kjo veti përshtatet me vetinë e elementit mëmë (për shembull, si vetitë e gjerësisë dhe lartësia me një vlerë të paracaktuar të auto) ose imiton (për shembull, si veti e ngjyrës së sfondit me një vlerë të paracaktuar transparente), më pas përdoruesi përfundimtar do të duket se stilet e elementit prind kanë rrjedhur në stilet e elementit fëmijë.

Për shembull,
.blloku i jashtëm ( sfondi: i kuq; )

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

3. Kaskadë kaosi

Zbatimi i stileve në elementët e synuar të përzgjedhësve ndodh në tre hapa.
Në fazën e parë nga Total Pemët DOM janë zgjedhur të gjitha elemente që përputhen me përzgjedhësin e elementit të synuar. Për shembull, për përzgjedhësin .current-block h3, të gjithë elementët me etiketën h3 do të zgjidhen në hapin e parë. Nuk ka asnjë mënyrë për të kufizuar hapësirën e përzgjedhjes në ndonjë pjesë të pemës DOM.
Në hapin e dytë, elementët e përzgjedhur filtrohen që të përputhen me përzgjedhësin duke përshkuar elementet mëmë elementi i synuar. Kur përdorni hapësirën e kombinatorit pasardhës (kombinatori pasardhës), kërkimi për një ndeshje mund të shkojë deri në elementin rrënjë të pemës DOM. Kur përdorni kombinatorin e vëllezërve ~ (kombinatori i përgjithshëm i vëllezërve) - deri në elementin e parë të vëllezërve.

Për shembull,
.blloku aktual h3 ( sfondi: blu; ) .blloku i jashtëm h3 ( sfondi: i kuq; )

E vetmja mënyrë për të kufizuar hapësirën e kërkimit është përdorimi i kombinatorit të fëmijëve > (kombinatori i fëmijëve) dhe i kombinatorit më të afërt + (kombinatori i vëllezërve të afërt). Kjo kërkon një shteg të saktë në pemën DOM nga elementi i synuar në elementin rrënjë të bllokut, gjë që çon në më shumë kohezion midis kodit CSS dhe HTML.

Në hapin e tretë, vetitë e stilit u caktohen elementëve të synuar të zgjedhur dhe të filtruar. Në këtë rast, nëse disa përzgjedhës pretendojnë të njëjtin element objektiv, secili me variantin e vet të pasurisë, atëherë vlera e pasurisë përcaktohet në bazë të specifikës së përzgjedhësve dhe nëse është e barabartë, në bazë të urdhrit të deklarimit.

Kështu, në kushte të caktuara (kombinatorët e përdorur, lidhja e specifikave, 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

Elementet e bllokut mund të ndryshojnë shfaqjen e tyre në varësi të pozicionit të bllokut në pemën DOM kur përdorin kombinuesit e vëllezërve (+ dhe ~) ose pseudo-klasat (:first-child, etj.) në përzgjedhës.

Për shembull,

Blloku ( sfondi: i kuq; ) .blloku + .blloku ( sfondi: blu; )