Përshëndetje, i dashur lexues.
Ky është mësimi i nëntë në mësimin e CSS. Në këtë tutorial do të shohim se çfarë është trashëgimia dhe si të shmangim gabimet në trashëgimi.
Përpara se të filloni këtë tutorial (trashëgimia CSS), plotësoni udhëzimet e mëparshme:
Teoria dhe praktika
Kur shkruajmë stile CSS, përballemi me problemin që disa nga vetitë tona mund të mbivendosen me vetitë e tjera, të cilat kanë përparësi. 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 është kjo në kod.
Shembull i kodit 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 një shembull i kodit CSS me trashëgimi. Le të pranojmë për
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #content (fonti: 14 px arial, verdana, sans-serif; ngjyra: # C91212;) .firstPar (font: trashëgoj; ngjyra: trashëgoj;) .secondPar (font: 10 px arial, verdana, sans-serif; ngjyra: # 000 CFF;) |
Si duket në shfletues.
TrashëgimiaËshtë një mekanizëm me të cilin stilet aplikohen jo vetëm për elementë të specifikuar, por edhe për pasardhësit e tyre.
Pse është e nevojshme kjo? Për ta bërë jetën tuaj më të lehtë! Shembull:
Nëse nuk do të kishte trashëgimi, përkufizimi i "bojë jeshile" do të zbatohej vetëm për vetë etiketën me klasën jeshile dhe etiketa brenda saj do të mbetej e zezë.
Në të majtë është rezultati i trashëgimisë.
Në të djathtë është rezultati që do të fitohej nëse nuk do të ekzistonte trashëgimia.
Rezulton se një veprim kaq i thjeshtë si, për shembull, vendosja e një ngjyre të zakonshme fonti për faqen, do të kthehej në një biznes të tërë! Ju do të duhet të siguroni të gjitha etiketat e brendshme. Dhe kështu çdo herë që ju duhet të vendosni stile për një element dhe pasardhësit e tij!
Shpresoj se ju kam bindur se trashëgimia është një gjë e dobishme. Tani le të shohim se si ta trajtojmë atë.
Trashëgimia e pasurisë
Le të dihet se jo të gjitha pronat janë të trashëguara. Do të ishte absurde të trashëgoje, për shembull,.
Në të vërtetë, pse do të më duheshin kufijtë rreth çdo etikete të brendshme? A është ajo që tani duhet t'i anuloj ato me duart e mia?
Mos u shqetëso - mos! Një numër pronash, trashëgimia e të cilave është në kundërshtim me sensin e përbashkët, për shembull, mbushja, madhësia, kufijtë, thjesht nuk trashëgohen.
Në fakt, është më e lehtë të renditësh ato prona që janë të trashëguara. Këtu ata janë:
Rreth specifikës
Vetitë e trashëguara, kjo është shumë e dobishme kur duhet të stiloni pasardhësit e një elementi. Por nëse do të vendosja në mënyrë eksplicite ndonjë stil, sigurisht që do të ishte gabim nëse do të "ndërpritej" nga ai i trashëguar. Për të eliminuar plotësisht këtë mundësi, ne ramë dakord që pronat e trashëguara nuk kanë fare specifikë. Nr. Edhe zero. Si rezultat, çdo stil i specifikuar në mënyrë eksplicite do të mbizotërojë gjithmonë mbi atë të trashëguar.
Një nuancë interesante lidhet me këtë. Çështja është se specifika e përzgjedhësit universal është 0 (ju mbani mend, kur llogaritni specifikën e një rregulli, ne thjesht nuk i kushtojmë vëmendje).
Ndoshta nga pikëpamja matematikore, kjo është e pakuptimtë, por në trashëgimi besohet se specifika "0" është më shumë se "nuk ka fare specifikë". Prandaj, përzgjedhësi universal do të anashkalojë të gjitha rregullat e trashëguara.
Kjo është një nga arsyet pse zgjedhësi universal duhet të përdoret me shumë kujdes (apo edhe më mirë, të mos aplikohet fare). Në fund të fundit, mund të shkaktojë një efekt të ngjashëm me një qark të shkurtër, duke ndërprerë rregullat e trashëguara. Për shembull:
* (ngjyra: # 000; / * e zezë * /) .jeshile (ngjyra: # 539127; / * jeshile * /)
Në fakt, me këtë shembull ne thyem trashëgiminë e pronës së ngjyrës dhe morëm të njëjtin rezultat të keq si në foton e parë në të djathtë. Teksti brenda hapësirës (ose çdo etiketë tjetër e brendshme) do të jetë i zi.
Trashëgimia dhe stilet e shfletuesit
Ndodh që çdo shfletues të ketë stilet e veta për disa etiketa. Kjo shihet më qartë në shembullin e një lidhjeje.
Jeshile (ngjyra: # 539127; / * jeshile * /)
Si rezultat i këtij kodi, ne do të shohim një etiketë të gjelbër dhe, ka shumë të ngjarë, një lidhje blu. Pse blu? Pse lidhja nuk trashëgoi ngjyrën e prindit?
Është e thjeshtë. Diku në fletën e stilit të shfletuesit ka diçka si kjo, e vendosur atje nga duart e kujdesshme të një zhvilluesi:
A: lidhje (ngjyra: blu)
Pra, rezulton se stili i trashëguar është ndërprerë në mënyrë eksplicite (edhe pse jo nga unë).
E gjelbër, .jeshile a (ngjyra: # 539127; / * jeshile * /)
E përmenda konkretisht këtë shembull që kur has një situatë të tillë të mos e perceptosh si dështim në mekanizmin e trashëgimisë.
Ky artikull do të fokusohet në një temë kaq të rëndësishme si trashëgimia e stilit. Qëllimi kryesor i këtij artikulli të tutorialit është t'ju përcjellë mekanizmin e trashëgimisë së stilit, t'ju shpjegojë se cilat janë avantazhet kryesore të tij dhe të rendit disa gjëra që nuk janë të dukshme në këtë drejtim.
Shpesh, nëse prindërit e një fëmije janë të çuditshëm, atëherë ai nuk mbetet pas tyre, ose siç thuhet: "një mollë nuk bie larg nga një pemë molle". Për sa i përket trashëgimisë në CSS, ajo nuk është gjë tjetër veçse një metodë e riprodhimit të veçorive të ndryshme CSS që lidhen me një element të faqes tek elementët e mbivendosur (pasardhësit).
Le të shkojmë drejtpërdrejt te një shembull dhe të shohim trashëgiminë e stilit duke përdorur një element HTML si shembull.
i cili përcakton përmbajtjen e dukshme të faqes.Stilimi i elementit
i cili do të ndryshojë ngjyrën dhe llojin e shkronjave:Titulli i nivelit të dytë
Plot paragraf
Në këtë shembull, për elementin
kemi instaluar jeshile ngjyra e tekstit dhe lloji i shkronjave Arial... Vetitë CSS të ngjyrave dhe të familjes së shkronjave trashëgohen, që do të thotë se këto veti do të zbatohen edhe për elementët e mbivendosur brenda (për të gjithë pasardhësit e tij).Unë tërheq vëmendjen tuaj për faktin se gjithmonë mund të shihni nëse një pronë e caktuar është trashëguar apo jo në referencën e plotë të CSS.
Rezultati i shembullit tonë:
Në shembullin e mësipërm, të gjithë elementët e vendosur brenda
(pasardhësit e tij) trashëguan pronat e tij. Mekanizmi i trashëgimisë ka një sistem me shumë nivele dhe shtrihet jo vetëm tek pasardhësit e drejtpërdrejtë të një elementi, por gjithashtu mbartet në të gjithë elementët e mbivendosur. Në shembullin tonë, një element i tillë është elementi , e cila, për analogji me elementë të tjerë, trashëgoi të gjitha vetitë e grupit të stilit për elementin ... Kjo është pika kryesore e trashëgimisë që përdoret në CSS.Mekanizmi i trashëgimisë zvogëlon shumë kodin CSS, për shembull, nëse elementi ynë mori ngjyrën e paracaktuar - të zezë, atëherë do të duhej të vendosnim stilin veçmas për këtë element, i cili do të përcaktonte ngjyrën dhe llojin e shkronjave, gjë që do të rriste ndjeshëm kostot e punës për zhvillimin e një faqeje specifike.
Një pikë tjetër që duhet kuptuar është se mekanizmi i trashëgimisë funksionon në mënyrë të ngjashme jo vetëm për përzgjedhësit e tipit, por edhe për të gjitha llojet e përzgjedhësve të diskutuar në artikujt e mëparshëm mbi këtë temë. Le të themi se kemi krijuar një përzgjedhës klase me veti të ngjashme CSS dhe e kemi aplikuar atë në një element
, atëherë në këtë rast të gjithë elementët e vendosur në të do të trashëgojnë gjithashtu këto veti.Më vonë do t'i përdorni këto veçori CSS për të thjeshtuar punën tuaj të stilimit të elementeve të dokumentit.
Kufizimet dhe nuancat e trashëgimisë
Kufizimet:
- Vetitë që ndikojnë në vendosjen e elementeve në faqe, vetitë që janë përgjegjëse për kufijtë e jashtëm dhe të brendshëm të një elementi, vetitë që janë përgjegjëse për kufijtë e elementeve nuk trashëgohen. Ne do t'i shqyrtojmë të gjitha këto veti në detaje më vonë në tutorial. Përsëri, gjithmonë mund të shihni nëse një pronë specifike është trashëguar apo jo në sajt në referencën CSS.
- Dua të kuptoni se shumë prona nuk trashëgohen për arsye objektive, imagjinoni që ne të krijojmë një kufi për elementin mëmë dhe pas kësaj të gjithë pasardhësit, sipas kësaj logjike, duhet ta trashëgojnë këtë pronë, e cila do të dukej absurde dhe përkundrazi. , do të rriste punën e krijimit të stileve (anulimi i tyre, ose rivendosja e tyre).
Nuancat:
Të gjithë shfletuesit modern përdorin stilet e tyre të brendshme CSS për elementët HTML, këto stile, nëse është e nevojshme, mund të shikoni një element specifik në sit në referencën HTML (vlera e parazgjedhur CSS). Në artikullin vijues, do të mësojmë se si të zero stilet inline për t'i bërë faqet tuaja të njëjta në të gjithë shfletuesit e njohur.
Dhe tani, duke përdorur shembullin e një elementi që përcakton një hiperlidhje, ne do të shqyrtojmë një shembull në të cilin do të shqyrtojmë pse disa elementë nuk trashëgojnë disa nga vetitë e paraardhësve të tyre:
Paragrafi që përmban brenda vetes href = "#">
hiperlidhje.Në këtë shembull, për elementin
ne kemi vendosur stilet e mëposhtme: jeshile ngjyra e tekstit dhe mungesa e dekorimit të tekstit (u hoq nënvizimin në fund). Kushtojini vëmendje elementit në imazh, nuk ka ndryshuar plotësisht. Le të shohim më poshtë (pasi të shohim imazhin) pse po ndodh kjo.Rezultati i shembullit tonë:
Kur ndodh një konflikt, fiton më i forti; në CSS, ky është zakonisht një stil i përcaktuar qartë. Le të hapim veglat e zhvilluesit (për Chrome është F12). Vini re cilat janë vetitë e integruara të CSS të shfletuesit ( fletën e stilit të agjentit të përdoruesit) çdo lidhje ( ndonjë lidhje) në dokument. Për të janë vendosur stilet e mëposhtme: ngjyra e tekstit blu (-lidhje e paketës së internetit- vlera e parazgjedhur e shfletuesit), dekorimi i tekstit (nënvizimi), dhe përcaktohet që shfletuesi vendos kursorin automatikisht (vlera automatike CSS e vetive të kursorit).
Më poshtë janë pronat që janë trashëguar ( Trashëguar nga) element nga ... Siç mund ta shihni, shfletuesi ka hequr të gjitha stilet e elementeve. , për arsye se elementi stili që përcakton ngjyrën e tekstit është i përcaktuar në mënyrë eksplicite (stili në linjë sipas parazgjedhjes) dhe vetia që përcakton dekorimin e tekstit jo të trashëguara dhe shfaqet me një transparencë të lehtë në mjetet e zhvilluesit, por edhe nëse do të trashëgohej, nuk do të aplikohej në analogji me ngjyrën e testit (për elementin edhe kjo veti është e përcaktuar shprehimisht).
Konflikte të tilla midis stileve zgjidhen gjithmonë nga shfletuesi, dhe sipas çfarë rregullash përcakton se kush i jep përparësi dhe si duhet të udhëheqë veten në këtë apo atë rast, cilën anë të marrë, përcaktohet nga rregullat. kaskada... Ne do të flasim më shumë për rregullat e kaskadës në artikullin tjetër të tutorialit.
Pyetje dhe detyra mbi temën
Përpara se të kaloni te artikulli tjetër, përgjigjuni pyetjeve të mëposhtme.
Drejtuesi kryesor i rritjes së internetit në fillim të mijëvjeçarit ishte konsumi përmbajtjen. Faqet u krijuan për t'u ofruar vizitorëve të tyre çdo informacion të dobishëm 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 në mënyrë dramatike. duke gjeneruar përmbajtje (redaktorë tekstesh dhe imazhesh, fletëllogaritëse, lajmëtarë të ç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 mirë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, janë krijuar një numër i madh i kornizave JavaScript (Backbone, Ember, Angular), motorët e shablloneve 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 vetia CSS e ndonjë elementi nuk ka një vlerë të qartë, përdoret vlera e paracaktuar. 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.
Për shembull,
.blloku i jashtëm (ngjyra: e kuqe;)
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ërshtatet me një veti të elementit prind (për shembull, si vetitë gjerësia dhe lartësia me një vlerë të paracaktuar të auto) ose imitohet (për shembull, si vetia e ngjyrës së sfondit me një vlerë të paracaktuar transparente), atëherë përdoruesi përfundimtar do të ketë përshtypjen se stilet e prindit kanë rrjedhur në stilet e fëmijës.Për shembull,
.blloku i jashtëm (sfondi: i kuq;)
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ë
Aplikimi i stileve për përzgjedhësit e synuar është një proces me tre hapa.Në fazën e parë nga Total Pemët DOM janë zgjedhur të gjitha elementet që përputhen me përzgjedhësin e elementit të synuar. Për shembull, për përzgjedhësin .current-block h3, hapi i parë do të zgjedhë të gjithë elementët me etiketën h3. 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 për t'u përshtatur me përzgjedhësin duke përshkuar elementet mëmë të elementit të synuar. Kur përdorni kombinatorin pasardhës, përputhja mund të shkojë deri në rrënjën e pemës DOM. Kur përdorni kombinatorin e përgjithshëm të vëllezërve ~ (kombinatori i përgjithshëm i vëllezërve), deri në elementin e parë si motra.
Për shembull,
.blloku aktual h3 (sfondi: blu;) .blloku i jashtëm h3 (sfondi: i kuq;)
Unë jam bërë qëllimisht i kuq
Unë jam i kuq për shkak të kaskadimit
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 specifik, 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 motrave (+ dhe ~) ose pseudo-klasat (: fëmija i parë, etj.) në përzgjedhës.Për shembull,
Blloku (sfondi: i kuq;) .blloku + .blloku (sfondi: blu;)
Në këtë kapitull:
Trashëgimia
Kur specifikoni një stil për një element, disa nga vetitë mund të trashëgohen nga fëmijët dhe pasardhësit e tij, ky efekt quhet trashëgimi.
Për shembull, të gjithë elementët e vendosur brenda një elementi
janë fëmijët dhe pasardhësit e tij. Nëse në stil për vendosni ngjyrën e tekstit në të kuqe duke përdorur veçorinë e ngjyrës CSS, atëherë ngjyra e tekstit të të gjithë fëmijëve dhe pasardhësve të tij do të bëhet gjithashtu e kuqe:
Ngjyra e tekstit të titullit është 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ë kokës 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 në një element të dëshiruar. Por çfarë ndodh nëse dy ose më shumë përzgjedhës reciprokisht ekskluzivë zgjedhin të njëjtin element? Kjo dilemë trajtohet nga dy parime CSS: specifika e përzgjedhësit dhe kaskada.
Specifikimi i përzgjedhësit(specifiteti i përzgjedhësit) përcakton përparësinë e tyre në fletën e stileve. Sa më specifik një përzgjedhës, aq më i lartë është prioriteti i tij. Për të llogaritur specifikën e një përzgjedhësi përdoren tre grupe numrash (a, b, c), llogaritja është kryhet si më poshtë:
- Numri i identifikuesve në përzgjedhës numërohet (grupi a)
- Numëron numrin e përzgjedhësve të klasave, atributeve dhe pseudo-klasave në përzgjedhësin (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 (: jo) llogaritet si çdo përzgjedhës tjetër, por vetë pseudo-klasa e mohimit nuk merr pjesë në llogaritjen e përzgjedhësit
- Zgjedhësi universal (*) dhe kombinatorët nuk janë të përfshirë 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: jo (p) / * a = 1 b = 0 c = 1 -> specifika = 101 * /
Prioriteti më i lartë është numri nga grupi "a", numri i grupit "b" ka përparësinë e mesme, numri nga grupi "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 nga Është përdorur 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 një deklaratë speciale e rëndësishme është specifikuar për një pronë specifike 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 shfaqet pas vlerës së pronës, 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 që ndodhen më poshtë në fletët e stilit janë caktuar për elementin:
Ngjyra e tekstit të paragrafit është jeshile.
Nëse rregulla të ndryshme për një 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 për stilin e mësipërm:
H1 (ngjyra: gri; font-familja: sans-serif;) h1 (kufiri-poshtë: 1px e zezë;)
Kodi në shembullin e mësipërm është ekuivalent me kodin në shembullin më poshtë, në të cilin 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 tregohen në rastet kur një stil është vendosur për disa elementë menjëherë, 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-poshtë: 1px e zezë e fortë;)
