Edhe përpara specifikimit të nivelit 2 të CSS të vitit 1998, elementët e formës ishin tashmë të mbështetur gjerësisht në të gjithë shfletuesit kryesorë. Specifikimi CSS 2 ende nuk i është përgjigjur pyetjes se si elementët e formës duhet t'u paraqiten përdoruesve. Për shkak se elementët e formularit janë pjesë e ndërfaqes së përdoruesit në çdo dokument në internet, autorët e specifikimit zgjodhën të largoheshin paraqitje vizuale elementet e paracaktuar të formës html për çdo shfletues.
Për shumë vite, mungesa e detajeve në specifikimet në lidhje me elementët e formës i ka detyruar zhvilluesit të krijojnë nje numer i madh i teste dhe shembuj, detyra kryesore e të cilave ishte të sillnin përbërësit vizualë të të gjithë elementëve të formës në një pamje ndër-shfletuesi. Në këtë artikull do të shohim disa Modelet CSS, e cila do t'ju lejojë të sillni elementet e formave në një emërues të përbashkët.
Testet e Roger Johansson për stilimin e elementeve të formës
Në vitin 2004, dhe përsëri në 2007, Roger Johansson krijoi paketa speciale testimi për elementët e formës dhe CSS. Kishte një përfundim nga këto teste që e mërziti Roger:
Pra, çfarë tregoi eksperimenti? Siç e vura re tashmë, testet treguan se me duke përdorur CSS Nuk është e mundur të kontrollohen stilet e formave për të shfaqur elementet e formës në mënyrë të qëndrueshme në të gjithë shfletuesit dhe platformat. Testet kanë treguar gjithashtu se shumica e shfletuesve injorojnë shumë veti CSS kur ato përdoren për të stiluar elementët e formës.
Pavarësisht nga e vërteta e pamohueshme e këtyre gjetjeve, zhvilluesit e uebit vazhdojnë të eksperimentojnë Elementet CSS forma në kërkim të Graalit të Shenjtë, ose të paktën një kompromis të arsyeshëm midis paraqitjes së parazgjedhur të shfletuesit dhe stilimit të personalizuar.
Modeli i parazgjedhur i shfaqjes së elementit të formës
Si parazgjedhje, specifikimi CSS 2.1 për HTML4 vendos elemente të formës si zona e tekstit, futja dhe zgjedhja për modalitetin e ekranit të bllokimit të brendshëm:
Textarea, futje, zgjidh (ekrani: inline-block; )
Në të kundërt, elementët e formës dhe grupit të fushave kanë një modalitet të shfaqjes së bllokut:
Grupi i fushave, forma ( shfaqja: bllok; )
Modeli i specifikimit CSS për elementët e stilimit në forma përfundon në këtë hap. Të gjitha aspektet e tjera të shfaqjes vizuale të elementeve të formës varen nga fleta e stilit e paracaktuar e shfletuesit. Sidoqoftë, rregullat e mësipërme nënkuptojnë sa vijon:
- Elementet e blloqeve inline mund të stilohen duke përdorur kontekstin e formatimit inline. Kjo nënkupton duke përdorur CSS veçori të tilla si lartësia e vijës dhe rreshtimi vertikal për të kontrolluar lartësinë e elementit dhe shtrirjen vertikale. Vetitë e mbushjes dhe kufirit mund të përdoren gjithashtu për të kontrolluar mbushjen dhe mbushjen e elementeve të formës. Vlen të përmendet se elementët e bllokut të brendshëm mund të kontrollohen gjithashtu duke përdorur gjerësinë dhe lartësinë; sjellja e tyre në këtë drejtim nuk ndryshon nga elementët e zakonshëm të bllokut.
- Elementet e bllokut mund të stilohen në mënyrë standarde, duke përdorur një kontekst të rregullt të formatimit të bllokut. Megjithatë, ka probleme me grupin e fushave dhe elementët e formës së legjendës, sepse ato mbështeten tërësisht në stilin e vetë shfletuesit.
Shtrohet pyetja, si mund t'i zgjidhin zhvilluesit këto probleme?
Zgjidhja e problemeve të madhësisë së elementit të formës
Zhvilluesit e uebit shpejt panë se shfletuesit i trajtonin elementët e blloqeve të brendshme në mënyrë të çuditshme kur ishte fjala për përcaktimin e madhësive të tyre. Përcaktimi i lartësisë mjaft shpesh çon në rezultate të papritura:
Hyrja, zgjidhni (gjerësia: 120 px; lartësia: 32 px; )
Zhvilluesit u përpoqën ta zgjidhnin këtë problem duke përdorur bllokun inline:
Hyrja, zgjidhni (gjerësia: 120 px; lartësia: 32 px; ekrani: blloku; )
Rezultatet lënë ende shumë për të dëshiruar, me përjashtim të elementit textarea. Për të zgjidhur këtë problem, së pari duhet të normalizoni fontin dhe madhësinë e shkronjave për elementët e formës:
Hyrja, zgjidhni ( gjerësia: 120 px; fonti: 1em Arial, sans-serif; )
Pasi të instalohet fonti, mund të shtoni mbushje:
Hyrja, zgjidhni ( gjerësia: 120 px; fonti: 1em Arial, sans-serif; mbushja: 3px 6px; )
Elementëve të hyrjes dhe zonës së tekstit mund t'u jepet gjithashtu një kufi, i cili do të ndikojë në dimensionet e tyre në përputhje me modelin e kutisë:
Hyrja, hyrja, zona e tekstit (kufi: 1px solid #ccc; )
Elementet lloji i hyrjes butoni dhe dërgo mund të ketë mbushje shtesë të shtuar nga shfletuesi. Një praktikë e zakonshme është normalizimi i tyre:
Hyrja, hyrja (mbushja: 2px; )
Problemi me këtë qasje është se shfletuesit shpesh aplikojnë prefikset e shitësit në vetitë e elementit, kështu që normalizimi i mbushjes nuk është gjithmonë i mundur. Për shembull, për ueb-kitin mund ta normalizoni si kjo:
Hyrja, hyrja, hyrja, hyrja::-butoni i skedarit-webkit-upload-button, butoni ( -webkit-box-align: qendër; rreshtimi i tekstit: qendër; kursori: i parazgjedhur; ngjyra: teksti i butonit; mbushja: 2px 6px 3px; kufiri : 2 pikselë fillimi i butonit; kufiri-imazhi: fillestari; ngjyra e sfondit: faqja e butonit; madhësia e kutisë: kutia e kufirit; ) hyrja, hyrja, hyrja ( -kit-uebfaqja: butoni me shtypje; hapësira e bardhë: para; )
Mbushja ndikon gjithashtu në elementët e grupit të fushave dhe legjendës, por me rezultate të ndryshme:
- Vendosja e mbushjes për grupin e fushave në 0 rivendos mbushjen e paracaktuar vetëm në disa shfletues (jo IE)
- Vendosja e mbushjes së legjendës në 0 bën që elementi të tkurret
Zgjidh, kutia e kontrollit, elementët e radios mund të normalizohen me rezultate të mira vetëm për disa veti:
- Font-familje
- Përmasa e germave
- Gjerësia (për zgjedhje)
- Mbushje
Zbatimi i veçorive të tjera në këto elemente të formës prodhon rezultate jokonsistente.
Rreshtimi i elementeve në forma
Elementet e formës mund të rreshtohen vertikalisht dhe horizontalisht. Ato mund të vendosen në të njëjtën linjë ose në një grup. Për t'i lidhur ato përgjatë një linje, mund të përdorni float ose kontekstin standard të blloqeve inline.
Kur përdorni elementë lundrues, elementët kthehen automatikisht në elementë blloku. Kjo do të thotë se kontrolli i këtyre elementeve tani sigurohet nga nëntë rregulla të tjera të modelit të kutisë.
Me elementë lundrues, detyra kryesoreështë të arrihet një shtrirje e mirë vertikale në linjë aktuale. Në këtë rast, një praktikë e zakonshme është përdorimi i diferencës vertikale ose mbushjes:
Hyrja, zgjidhni ( gjerësia: 120 px; notimi: majtas; margjina në krye: 0.4em; )
Kjo qasje funksionon kur nuk keni nevojë të rreshtoni blloqet e tekstit, siç është elementi i etiketës. Në këtë rast, mund të përdorni pozicionimin relativ, mbushjen ose margjinën në një element që përmban vetëm tekst:
Një problem tjetër lind me butonat. Në këtë rast, kur keni një buton, madhësia e të cilit është më e madhe se elementët e tjerë, mund ta vendosni shtrirje vertikale duke përdorur pozicionimin relativ:
Hyrja ( notimi: majtas; gjerësia: 90 px; pozicioni: relative; lart: 0.4em; )
Kjo qasje e pozicionimit relativ funksionon gjithashtu për kutitë e kontrollit dhe butonat e radios. Pozicionimi relativ madje mund të përdoret për të normalizuar mbushjen e majtë të një elementi legjendë në një grup fushash.
Nëse jeni duke përdorur elementë në kontekstin e formatimit inline, mund të përdorni veçorinë vertikale-linjë për shtrirjen vertikale:
Etiketa, hyrja (vertikal-rreshtimi: mes; margjina-djathtas: 1em; )
Rezultate të mira mund të arrihet duke e kombinuar këtë veti me vetinë line-height. Megjithatë, kjo veti duhet të vendoset në elementin prind. Nëse e vendosni drejtpërdrejt në vetë elementin e formës, lartësia e elementit do të ndikohet:
Rreshti i formës (lartësia e rreshtit: 1.4; )
Përdorimi i një deklarate lartësie për elementi prindçiftëzimi me të njëjtën vlerë të lartësisë së vijës është gjithashtu praktikë e mirë:
Rreshti i formës (lartësia e vijës: 1.8; lartësia: 1.8em; )
Në kontekstin e formatimit inline, mund të përdorni vetia e rreshtimit të tekstit që një element prind të rreshtojë përmbajtjen e elementit të formës majtas, qendër ose djathtas.
Sjellje e çuditshme e hyrjeve të skedarëve
Një element hyrës i tipit file është rast i veçantë. Një element i tillë duhet të jetë gjithmonë i dukshëm dhe i dallueshëm në ndërfaqen e shfletuesit për arsye sigurie. Kjo do të thotë që shfletuesit shpërfillin qëllimisht disa rregulla stili (të tilla si ato që lidhen me dukshmërinë) dhe, si rregull, zbatojnë algoritmet e tyre të përcaktuara nga fleta e stilit të tyre të paracaktuar.
Për më tepër, disa shfletues shfaqin vetëm një buton, ndërsa të tjerët shtojnë gjithashtu një fushë për shtegun e skedarit.
Sidoqoftë, zhvilluesit e uebit kanë gjetur mënyra për të zgjidhur këtë kufizim. Së pari, ata e mbështjellën elementin në një enë.
CSS (Cascading Style Sheets), ose fletë stilesh kaskadë, përdoren për të përshkruar pamjen dokument i shkruar në gjuhën e shënjimit. Në mënyrë tipike, stilet CSS përdoren për të krijuar dhe ndryshuar stilin e elementeve të faqes së internetit dhe ndërfaqet e përdoruesit shkruar në Gjuhët HTML dhe XHTML, por gjithashtu mund të aplikohet në çdo lloj dokumenti XML, duke përfshirë XML, SVG dhe XUL.
Fletët e stilit kaskadë përshkruajnë rregullat për formatimin e elementeve duke përdorur vetitë dhe vlerat e pranueshme këto veti. Për secilin element, mund të përdorni një grup të kufizuar të vetive; vetitë e tjera nuk do të kenë asnjë efekt mbi të.
Një deklaratë stili përbëhet nga dy pjesë: elementi i faqes së internetit − përzgjedhës, dhe komandat e formatimit - bllok reklamash. Përzgjedhësi i tregon shfletuesit se cilin element të formatojë dhe blloku i deklarimit (kodi në kllapa kaçurrelë) liston komandat e formatimit - vetitë dhe vlerat e tyre.
Oriz. 1. Struktura e deklarimit të stilit CSS Llojet e fletëve të stilit kaskadë dhe specifikat e tyre
1. Llojet e fletëve të stilit
1.1. Fletë e jashtme e stilit
Fletë e jashtme e stilit përfaqëson skedar teksti me zgjerimin .css, i cili përmban një grup stilesh CSS për elementët. Skedari krijohet në një redaktues kodi, ashtu si një faqe HTML. Skedari mund të përmbajë vetëm stile, pa shënime HTML. Një fletë stili e jashtme lidhet me një faqe interneti duke përdorur një etiketë , i vendosur brenda seksionit
. Këto stile funksionojnë për të gjitha faqet e faqes.Ju mund të bashkëngjitni fletë të shumta stilesh në secilën faqe interneti duke shtuar etiketa të shumta në rend , duke treguar qëllimin e kësaj fletë stili në atributin e etiketës media. rel="stylesheet" specifikon llojin e lidhjes (lidhja me një fletë stili).
Atributi type="text/css" nuk kërkohet nga standardi HTML5, kështu që mund të hiqet. Nëse atributi mungon, vlera e paracaktuar është type="text/css" .
1.2. Stilet e brendshme
Stilet e brendshme ngulitur në një seksion
Dokumenti HTML dhe përcaktohen brenda etiketës. Stilet e brendshme kanë përparësi ndaj atyre të jashtme, por janë inferiore ndaj stileve inline (të specifikuara nëpërmjet atributit të stilit)....
1.3. Stilet e integruara
Kur shkruajmë stilet inline, ne shkruajmë kodin CSS në skedarin HTML, direkt brenda etiketës së elementit duke përdorur atributin e stilit:
Kushtojini vëmendje këtij teksti.
Stilet e tilla ndikojnë vetëm në elementin për të cilin janë vendosur.
1.4. Rregulli @import
Rregulli @import Ju lejon të ngarkoni fletë stilesh të jashtme. Që direktiva @import të funksionojë, ajo duhet të shfaqet në fletën e stilit (të jashtme ose të brendshme) përpara të gjitha rregullave të tjera:
Rregulli @import përdoret gjithashtu për të përfshirë fontet në ueb:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cirilik);
2. Llojet e përzgjedhësve
Përzgjedhës përfaqësojnë strukturën e një faqe interneti. Ato ndihmojnë në krijimin e rregullave për formatimin e elementeve të faqes së internetit. Zgjedhësit mund të jenë elementë, klasat dhe identifikuesit e tyre, si dhe pseudo-klasa dhe pseudo-elemente.
2.1. Zgjedhës universal
Përputhet me çdo element HTML. Për shembull, * (margjina: 0;) do të rivendoset në zero kufijtë për të gjithë elementët e faqes. Zgjedhësi mund të përdoret gjithashtu në kombinim me një pseudo-klasë ose pseudo-element: *:after (stilet CSS) , *:checked (stilet CSS) .
2.2. Zgjedhësi i elementeve
Zgjedhësit e elementeve ju lejojnë të formatoni të gjithë elementët të këtij lloji në të gjitha faqet e faqes. Për shembull, h1 (font-family: Lobster, cursive;) do të vendosë stilin e përgjithshëm të formatimit për të gjithë titujt h1.
2.3. Përzgjedhësi i klasës
Zgjedhësit e klasave ju lejojnë të specifikoni stilet për një ose më shumë elementë me të njëjtin emër klasa e vendosur në vende të ndryshme në faqe ose në faqe të ndryshme faqe. Për shembull, për të krijuar një titull me klasën e titullit, duhet të shtoni atributin e klasës me titullin e vlerës në etiketën hapëse
dhe vendosni stilin për klasën e specifikuar. Stilet e krijuara duke përdorur një klasë mund të aplikohen në elementë të tjerë, jo domosdoshmërisht të atij lloji.
Udhëzime për përdorim Kompjuter personal
.titulli (transformimi i tekstit: shkronja të mëdha; ngjyra: blu e lehtë; )2.4. përzgjedhës ID
Zgjedhësi ID ju lejon të formatoni një element specifik. ID-ja duhet të jetë unike dhe mund të shfaqet vetëm një herë në një faqe.
#bari anësor (gjerësia: 300 px; float: majtas; )
2.5. Përzgjedhës pasardhës
Zgjedhësit pasardhës aplikojnë stile për elementët brenda një elementi kontejner. Për shembull, ul li (transformimi i tekstit: shkronja të mëdha;) - do të zgjedhë të gjithë elementët li që janë fëmijë të të gjithë elementëve ul.
Nëse dëshironi të formatoni pasardhësit e një elementi të caktuar, duhet t'i jepni atij elementi një klasë stili:
p.së pari a (ngjyra: jeshile;) - këtë stil do të zbatohet për të gjitha lidhjet pasardhëse të një paragrafi me klasën e parë;
p .first a (ngjyra: jeshile;) - nëse shtoni një hapësirë, lidhjet e vendosura brenda çdo etikete të klasit të parë që është një fëmijë i elementit do të stilohen
Së pari a (ngjyra: jeshile;) - ky stil do të aplikohet në çdo lidhje që ndodhet brenda një elementi tjetër, të caktuar nga class.first .
2.6. Përzgjedhës për fëmijë
Një element fëmijë është një fëmijë i drejtpërdrejtë i elementit që përmban. Një element mund të ketë disa elementë fëmijë, por secili element mund të ketë vetëm një element prind. Zgjedhësi fëmijë ju lejon të aplikoni stile vetëm nëse elementi fëmijë vjen menjëherë pas elementit prind dhe nuk ka elementë të tjerë midis tyre, domethënë, elementi fëmijë nuk është i futur brenda asgjëje tjetër.
Për shembull, p > strong do të zgjedhë të gjithë elementët e fortë që janë fëmijë të elementit p.
2.7. Motra përzgjedhëse
Motërsia ndodh midis elementeve që ndajnë një prind të përbashkët. Zgjedhësit e vëllezërve ju lejojnë të zgjidhni elementë nga një grup elementësh të të njëjtit nivel.
h1 + p - do të zgjedhë të gjithë paragrafët e parë menjëherë pas çdo etikete
pa prekur paragrafët e mbetur;
h1 ~ p - do të zgjedhë të gjithë paragrafët që janë të ngjashëm me çdo titull h1 dhe menjëherë pas tij.
2.8. Përzgjedhësi i atributeve
Zgjedhësit e atributeve zgjedhin elementë bazuar në emrin e atributit ose vlerën e atributit:
[atribut] - të gjithë elementët që përmbajnë atributin e specifikuar - të gjithë elementët për të cilët është specifikuar atributi alt;
përzgjedhës[atributi] - elementë të këtij lloji që përmbajnë atributin e specifikuar, img - vetëm imazhe për të cilat është specifikuar atributi alt;
përzgjedhës[atribute="vlera"] - elementë të këtij lloji që përmbajnë atributin e specifikuar me një vlerë specifike, img - të gjitha fotografitë, titulli i të cilave përmban fjalën lule;
përzgjedhës[atribut~="vlera"] - elemente që përmbajnë pjesërisht vlerën e dhënë, për shembull, nëse disa klasa janë specifikuar për një element të ndarë me një hapësirë, p - paragrafë emri i klasës së të cilëve përmban tipar ;
përzgjedhës[atribut|="vlera"] - elementet, lista e vlerave të atributeve të të cilëve fillon me fjalën e specifikuar, p - paragrafë, emri i klasës së të cilëve është tipar ose fillon me tipar;
përzgjedhës[atributi^="vlera"] - elementet vlera e atributit të të cilëve fillon me vlerën e specifikuar, a - të gjitha lidhjet duke filluar me http:// ;
përzgjedhës[atributi$="vlera"] - elemente vlera e atributit të të cilëve përfundon vlera e specifikuar, img - të gjitha imazhet në formatin png;
përzgjedhës[atributi*="vlera"] - elementë vlera e atributit të të cilëve përmban fjalën e specifikuar kudo, a - të gjitha lidhjet emri i të cilave përmban librin .
2.9. Përzgjedhës i pseudo-klasës
Pseudo-klasat janë klasa që në fakt nuk janë bashkangjitur me etiketat HTML. Ato ju lejojnë të aplikoni rregullat CSS për elementët kur ndodh ose i nënshtrohet një ngjarje një rregull të caktuar. Pseudo-klasat karakterizojnë elementet me vetitë e mëposhtme:
:hover - çdo element mbi të cilin është vendosur kursori i miut;
:fokus - një element ndërveprues që është lundruar në tastierë ose është aktivizuar duke përdorur miun;
:active - element që është aktivizuar nga përdoruesi;
:valid - fusha të formës, përmbajtja e të cilave është kontrolluar në shfletues për pajtueshmëri me llojin e specifikuar të të dhënave;
:invalid - formoni fusha, përmbajtja e të cilave nuk përputhet me llojin e specifikuar të të dhënave;
:enabled - të gjitha fushat aktive të formës;
:disabled - fushat e bllokuara të formës, d.m.th., në gjendje joaktive;
:in-range - formoni fusha, vlerat e të cilave janë në intervalin e specifikuar;
:jashtë diapazonit - formoni fusha, vlerat e të cilave nuk janë brenda intervalit të specifikuar;
:lang() - elemente me tekst në gjuhën e specifikuar;
:not(selector) - elemente që nuk përmbajnë përzgjedhësin e specifikuar - klasën, identifikuesin, emrin ose llojin e fushës së formës - :not() ;
:target është një element me simbolin # që është referuar në dokument;
:checked - elemente të formularit të zgjedhur (të zgjedhur nga përdoruesi).
2.10. Përzgjedhës strukturor i pseudo-klasës
Pseudo-klasat strukturore zgjedhin elementet fëmijë sipas parametrit të specifikuar në kllapa:
:nth-child(tek) - elemente tek fëmijë;
:nth-child(edhe) - elemente edhe fëmijë;
:nth-child(3n) - çdo element i tretë tek fëmijët;
:nth-child(3n+2) - zgjedh çdo element të tretë, duke filluar nga fëmija i dytë (+2);
:nth-child(n+2) - përzgjedh të gjithë elementët duke filluar nga i dyti;
:nth-child(3) - zgjedh elementin e tretë fëmijë;
:nth-last-child() - në listën e elementeve fëmijë, zgjedh elementin me vendndodhjen e specifikuar, ngjashëm me:nth-child() , por duke u nisur nga i fundit, në drejtim të kundërt;
:first-child - ju lejon të stiloni vetëm elementin e fëmijës së parë të etiketës;
:last-child - ju lejon të formatoni elementin e fundit fëmijë të etiketës;
:only-child - zgjedh një element që është elementi i vetëm fëmijë;
:bosh - përzgjedh elementë që nuk kanë fëmijë;
:root - zgjedh elementin që është rrënja në dokument - element html.
2.11. Përzgjedhës i pseudo-klasës së tipit strukturor
Tregon një lloj specifik të etiketës së fëmijëve:
:nth-of-type() - zgjedh elementë të ngjashëm me :nth-child() , por merr parasysh vetëm llojin e elementit;
:first-of-type - zgjedh fëmijën e parë të një lloji të caktuar;
:last-of-type - zgjedh elementi i fundit të këtij lloji;
:nth-last-of-type() - zgjedh një element lloji i dhënë në listën e elementeve sipas vendndodhjes së specifikuar, duke filluar nga fundi;
:only-of-type - zgjedh të vetmin element të llojit të specifikuar midis elementeve fëmijë të elementit prind.
2.12. Përzgjedhës i pseudo elementeve
Pseudo elementët përdoren për të shtuar përmbajtje, e cila krijohet duke përdorur veçorinë e përmbajtjes:
:first-letter - zgjedh shkronjën e parë të çdo paragrafi, vlen vetëm për elementet e bllokut;
:first-line - zgjedh rreshtin e parë të tekstit të elementit, zbatohet vetëm për elementët e bllokut;
:before - fut përmbajtjen e gjeneruar para elementit;
:after - shton përmbajtjen e gjeneruar pas elementit.
3. Kombinimi i përzgjedhësit
Për të zgjedhur më saktë elementët për formatim, mund të përdorni kombinime të përzgjedhësve:
img: n-të e llojit (edhe) - do të zgjedhë të gjitha fotot çift, tekst alternativ e cila përmban fjalë css.
4. Grupimi i përzgjedhësve
I njëjti stil mund të aplikohet në shumë elementë në të njëjtën kohë. Për ta bërë këtë, duhet të renditni përzgjedhësit e kërkuar në anën e majtë të deklaratës, të ndarë me presje:
H1, h2, p, shtrirje ( ngjyra: domate; sfondi: i bardhë; )
5. Trashëgimia dhe kaskada
Trashëgimia dhe kaskada janë dy koncepte themelore në CSS që janë të lidhura ngushtë. Trashëgimia është ajo ku elementët trashëgojnë vetitë nga prindi i tyre (elementi që i përmban ato). Kaskada manifestohet në mënyrën se si tipe te ndryshme Fletët e stileve aplikohen në një dokument dhe se si rregullat kontradiktore mbizotërojnë njëra-tjetrën.
5.1. Trashëgimia
Trashëgimiaështë mekanizmi me të cilin disa veti transmetohen nga një paraardhës te pasardhësit e tij. Specifikimi CSS lejon trashëgimin e vetive që lidhen me përmbajtjen e tekstit të faqes, si ngjyra, fonti, hapësira e shkronjave, lartësia e rreshtit, stili i listës, rreshtimi i tekstit, indentja e tekstit, transformimi i tekstit, dukshmëria, e bardha -hapësirë dhe ndërmjet fjalëve. Në shumë raste, kjo është e përshtatshme sepse nuk keni nevojë të vendosni madhësinë e shkronjave dhe familjen e shkronjave për çdo element në faqen e internetit.
Vetitë që lidhen me formatimin e bllokut nuk trashëgohen. Këto janë sfondi , kufiri , ekrani , notimi dhe i qartë , lartësia dhe gjerësia , diferenca , min-max-lartësia dhe gjerësia , skica , tejmbushja , mbushja , pozicioni , dekorimi i tekstit , rreshtimi vertikal dhe indeksi z .
Trashëgimia e detyruar
Duke përdorur fjalë kyçe trashëgim mund të detyrojë një element të trashëgojë çdo vlerë pronësie të elementit të tij mëmë. Kjo funksionon edhe për pronat që nuk trashëgohen si parazgjedhje.
Si vendosen dhe funksionojnë stilet CSS
1) Stilet mund të trashëgohen nga elementi mëmë (veti të trashëguara ose duke përdorur vlerën trashëguese);
2) Stilet e vendosura në fletën e stileve më poshtë anashkalojnë stilet e vendosura në tabelën e mësipërme;
3) Mund të aplikohen stile nga një element burime të ndryshme. Mund të kontrolloni se cilat stile janë aplikuar në modalitetin e zhvilluesit të shfletuesit. Për ta bërë këtë, klikoni në elementin klikoni me të djathtën miun dhe zgjidhni "Shiko kodin" (ose diçka të ngjashme). Kolona e djathtë do të listojë të gjitha vetitë që janë vendosur në këtë element ose të trashëguara nga një element prind, së bashku me skedarët e stilit në të cilët janë specifikuar, dhe numër serik rreshtat e kodit.
Oriz. 2. Modaliteti i zhvilluesit në Shfletuesi i Google krom 4) Kur përcaktoni një stil, mund të përdorni çdo kombinim përzgjedhësish - një përzgjedhës elementi, një pseudo-klasë elementi, një klasë ose një identifikues elementi.
div (kufiri: 1px solid #eee;) #wrap (gjerësia: 500px;).box (float: majtas;).clear (e qartë: të dyja;)
5.2. Kaskada
Kaskadëështë një mekanizëm që kontrollon rezultatin përfundimtar në një situatë ku rregulla të ndryshme CSS zbatohen për të njëjtin element. Ekzistojnë tre kritere që përcaktojnë rendin në të cilin zbatohen vetitë—rregulli i rëndësishëm!, specifika dhe renditja në të cilën përfshihen fletët e stilit.
Rregulla! e rëndësishme
Pesha e një rregulli mund të specifikohet duke përdorur fjalën kyçe!important, e cila shtohet menjëherë pas vlerës së vetive, për shembull, span (pesha e shkronjave: bold!i rëndësishëm;) . Rregulli duhet të vendoset në fund të deklaratës përpara kllapës mbyllëse, pa hapësirë. Një njoftim i tillë do të ketë përparësi ndaj të gjitha rregullave të tjera. Ky rregull ju lejon të anuloni një vlerë pronësie dhe të vendosni një të re për një element nga një grup elementësh në rastin kur nuk ka akses direkt te skedari i stilit.
Specifikimi
Për çdo rregull, shfletuesi llogarit specifika e përzgjedhësit, dhe nëse një element ka deklarata kundërshtuese të pasurisë, merret parasysh rregulli që ka më shumë specifikë. Vlera e specifikës ka katër pjesë: 0, 0, 0, 0. Specifikimi i përzgjedhësit përcaktohet si më poshtë:
për id, shtohet 0, 1, 0, 0;
për klasën 0, 0, 1, 0 shtohet;
për çdo element dhe pseudoelement, shtohet 0, 0, 0, 1;
për një stil inline të shtuar drejtpërdrejt në një element - 1, 0, 0, 0 ;
Një përzgjedhës universal nuk ka specifikë.
H1 (ngjyra: blu e lehtë;) /*specifiteti 0, 0, 0, 1*/ em (ngjyra: argjend;) /*specifiteti 0, 0, 0, 1*/ h1 em (ngjyra: ari;) /*specifiteti: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div# p.kryesore rreth (ngjyra: blu;) /*specifiteti: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .bar (ngjyra: gri;) /*specifiteti 0, 0, 1, 0 */ #shirit anësor (ngjyra: portokalli;) /*specifiteti 0, 1, 0, 0*/ li#bari anësor (ngjyra: aqua;) /*specifiteti: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Si rezultat, ato rregulla që janë më specifike do të zbatohen për elementin. Për shembull, nëse një element ka dy specifika me vlera 0, 0, 0, 2 dhe 0, 1, 0, 1, atëherë rregulli i dytë do të fitojë.
Rendi i tabelave të lidhura
Mund të krijoni fletë të shumta stilesh të jashtme dhe t'i lidhni ato me një faqe interneti. Nëse në tabela të ndryshme do të takohemi kuptime të ndryshme vetitë e një elementi, atëherë si rezultat rregulli në fletën e stilit të renditur më poshtë do të zbatohet për elementin.
CSS do të thotë "Cascading Style Sheets", që do të thotë "Cascading Style Sheets". Përdoret për të dizajnuar ueb faqe. Nëse kodi HTML përmban përmbajtjen (çfarë do të tregojë shfletuesi), atëherë CSS përcakton dizajnin e tij (si do ta tregojë shfletuesi). Bukuria e CSS është se me ndihmën e një stili ju mund të dizajnoni të gjithë të njëjtin lloj elementësh të një faqeje ose të një faqeje të tërë (të gjitha lidhjet, paragrafët, listat menjëherë). Me një stil CSS, ju përcaktoni një herë se si duhet të duket një element i veçantë, për shembull, fotografitë, dhe ata ndryshojnë dizajnin e tyre në të gjitha dokumentet menjëherë. Për të ndryshuar formatimin e tekstit në të gjithë faqen tuaj, duhet të ndryshoni vetëm një herë kodin CSS.
Elementet bazë të CSS
Ashtu si HTML përbëhet nga etiketa, atribute dhe vlera, edhe CSS përbëhet prej saj elementet e veta. Thelbi i konstrukteve CSS mund të shpjegohet si më poshtë: "Specifikoni cilin element faqe duhet të stiloni dhe specifikoni se si ta stiloni atë." Këtu janë blloqet e ndërtimit të CSS.
- Përzgjedhësi. Një identifikues që i tregon shfletuesit se cilit element faqe duhet të aplikojë dizajnin. Falë tij, shfletuesi "kupton" që stili ka për qëllim, për shembull, të hartojë lista ose tabela.
- Blloku i deklarimit të stilit. Shkruhet pas përzgjedhësit dhe përmbahet në mbajtëset. Ai specifikon stilin e elementit (dizajni i tij). Blloku i deklarimit të stilit përbëhet nga dy pjesë.
- Prona. Një analog i një atributi në HTML. Përcakton se cila pronë e pamjes do të ndryshohet.
- Kuptimi. Specifikuar në një pronë përmes një dy pika dhe përcakton saktësisht se si do të ndryshohet prona.
Mund të ketë disa veti dhe vlera në një bllok të deklarimit të stilit, në të cilin rast ato renditen të ndara me një pikëpresje.
Llojet e përzgjedhësve
Në varësi të vetive të elementeve të faqes që përcaktojnë, përzgjedhësit vijnë në lloje të ndryshme.
- Universale. Vendos rregulla për të gjithë elementët e faqes që nuk kanë rregulla të tjera të vendosura.
Kodi * (madhësia e shkronjave: 14 px;) vendos madhësinë e shkronjave në 14 piksele për të gjithë elementët e dokumentit për të cilët rregulla të tjera nuk janë specifikuar duke përdorur përzgjedhës të tjerë. - Tega. Ky lloj përzgjedhësi specifikon rregullat e formatimit për përmbajtjen e një etikete specifike HTML. Emri i përzgjedhësit është i njëjtë me emrin e përshkruesit, i shkruar vetëm pa kllapa këndore: fq, h1, ul.
Për shembull, kodi h2 (ngjyra: e kuqe;) grupe ngjyrë jeshile tekst për të gjithë titujt e nivelit të dytë, domethënë përmbajtjen e etiketave . - atribut. Duke përdorur këtë grup përzgjedhësish, mund të përcaktoni stilin e përmbajtjes së të gjitha etiketave që kanë një atribut specifik të specifikuar. Përzgjedhësit mund të specifikohen më saktë duke specifikuar jo vetëm emrin e atributit, por edhe vlerën e caktuar për të, si dhe emrin e etiketës që e përmban atë. Kjo mund të përdoret për ta bërë dizajnin më individual.
- klasës. Një lloj përzgjedhësish kur duhet të formatoni ndryshe përmbajtjen e etiketave të të njëjtit lloj. Për shembull, ju dëshironi t'i bëni lidhjet në fund të faqes të kuqe, ndërsa të gjitha të tjerat duhet të mbeten blu, siç ishin. Për të aplikuar rregullat e klasës në një element site, duhet të specifikoni emrin e klasës në atribut klasës etiketën përkatëse.
Le të themi duke përdorur klasën hap elemente individuale ju duhet të vendosni margjinën e majtë në 15 piksele.
Kodi CSS do të jetë si ky:
Hapi (diferencë-majtas: 15 px;)
Kodi HTML që do të lidhë elementin me rregullin do të jetë:
Teksti i futur
- ID. Përdoret në lidhje me atributin id Etiketa HTML dhe përdoret kur vetitë duhet të vendosen për një element të vetëm. Ndryshe nga një përzgjedhës i klasës, emri i të cilit paraprihet nga një pikë, ai shkruhet duke përdorur një hash:
#ekskluzive (ngjyra:portokalli;)
- Kontekstual. Në HTML, disa etiketa shpesh gjenden brenda etiketave të tjera, dhe përzgjedhësit kontekstualë ndihmojnë në përcaktimin e rregullave për raste të tilla. Për shembull, mund t'i përdorni ato për të formatuar artikujt brenda listave të numëruara ose tekstit të pjerrët brenda paragrafëve:
P i (fint-familje: Shekulli;)
Grupet e mbetura të përzgjedhësve bazohen në një kombinim të llojeve të listuara, si dhe në parimin e trashëgimisë, kur një element fëmijë merr vetitë e prindit të tij.
Kombinimi dhe grupimi i përzgjedhësve është i përshtatshëm në shumë situata. Për shembull, për të vendosur rregullat e klasës hap vetëm për lidhjet, duhet të specifikoni të dy përzgjedhësit të ndarë me një pikë (së pari etiketën, pastaj klasën):
A.hap (diferencë-majtas: 15px;)
Si të përfshini CSS në një faqe HTML?
Ka disa mënyra për të bërë që mjetet e krijimit të faqeve të internetit të ndërveprojnë me njëri-tjetrin. Në bazë të metodës së shtimit, stilet ndahen në kategoritë e mëposhtme.
Stilet e integruara
Vendoseni në dokument direkt brenda etiketës HTML duke përdorur atributin stil. Keni prioritetin më të lartë. Kjo do të thotë se nëse jepet i njëjti element dizajn të ndryshëm, atëherë përparësi do t'i jepet rregullit që shkruhet brenda etiketës. Zgjedhësi për stilin e integruar nuk është i nevojshëm, pasi lidhja midis stilit dhe etiketës është e dukshme - dizajni i etiketës është specifikuar në të.
Kodi i mëposhtëm përcakton madhësinë dhe ngjyrën e shkronjave për tekstin brenda etiketës
Teksti i formatuar duke përdorur një stil të brendshëm.
Stilet globale
Vendosur sipas etiketës …