Klasat dhe ID-të ndihmojnë Zgjeroni CSS-në tuaj
Ndërtimi i faqeve në uebin e sotëm kërkon një kuptim të thellë të CSS (Cascading Style Sheets). Këto janë udhëzimet që ju jepni një faqe interneti për të përcaktuar se si do të vendoset në dritaren e shfletuesit. Ju aplikoni një seri "stilesh" në dokumentin tuaj HTML i cili do të krijojë pamjen dhe ndjenjën e faqes suaj.
Ka shumë mënyra për të aplikuar këto stile të lartpërmendura në një dokument, por shpesh doni të përdorni një stil vetëm për disa nga elementët në një dokument, por jo të gjitha rastet e atij elementi.
Ju gjithashtu mund të dëshironi të krijoni një stil që mund të aplikoni për disa elementë në një dokument, pa pasur nevojë të përsërisni rregullin e stilit për çdo rast të veçantë. Për të arritur këto stilet e dëshiruara, ju do të përdorni atributet e klasës dhe HTML. Këto atribute janë atribute globale që mund të aplikohen në pothuajse çdo tag HTML . Kjo do të thotë se nëse jeni duke modifikuar ndarjet, paragrafët, lidhjet, listat ose ndonjë pjesë tjetër të HTML në dokumentin tuaj, ju mund t'i drejtoheni atributeve të klasës dhe ID-së të ju ndihmojë të përmbushni këtë detyrë!
Zgjedhësit e klasës
Zgjedhësi i klasës ju lejon të vendosni stile të shumta në të njëjtin element ose etiketë në një dokument. Për shembull, mund të dëshironi të keni seksione të caktuara të tekstit tuaj të thirrur në një ngjyrë të ndryshme nga pjesa tjetër e tekstit në dokument. Këto seksione të theksuara mund të jenë një "alarm" që po vendosni në faqe. Ju mund të caktoni paragrafët tuaj me klasa si kjo:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
Këto stile do të vendosnin ngjyrën e të gjitha paragrafeve në ngjyrë blu (# 0000ff), por çdo paragraf me një atribut të klasës "alarm" do të vendosej në vend të saj me ngjyrë të kuqe (# ff0000). Kjo është për shkak se atributi i klasës ka një specifikë më të lartë se rregulli i parë CSS, i cili përdor vetëm një përzgjedhës të etiketave.
Kur punoni me CSS, një rregull më specifik do të anashkalojë një mënyrë më pak specifike. Pra, në këtë shembull, rregulli më i përgjithshëm përcakton ngjyrën e të gjitha paragrafëve, por rregulli i dytë, më i saktë se mbivlerëson atë vendosje vetëm në disa paragrafë.
Këtu është se si kjo mund të përdoret në disa shënime HTML:
Ky paragraf do të shfaqet në ngjyrë blu, e cila është parazgjedhja për faqen.
Ky paragraf gjithashtu do të jetë në ngjyrë blu.
Dhe ky paragraf do të shfaqet në të kuqe pasi atributi i klasës do të mbivendosë ngjyrën standarde blu nga styling përzgjedhësi i elementit.
Në atë shembull, stili i "p.alert" do të zbatohej vetëm për elementët e paragrafëve që përdorin atë klasë "alarmi". Nëse dëshironi të përdorni atë klasë nëpër elementë të shumtë HTML, thjesht do të hiqni elementin HTML që nga fillimi i style (vetëm të jetë i sigurt për të lënë periudhën (.) në vend), si kjo:
.alert {background-color: # ff0000;}
Kjo klasë tani është në dispozicion për çdo element që ka nevojë për të. Çdo pjesë e HTML-it tuaj që ka një vlerë atribut të klasës së "alarmit" tani do të marrë këtë stil. Në HTML më poshtë, ne kemi edhe një paragraf dhe një nivel të titullit 2 që përdorin klasën "alert". Të dyja këto do të kishin një sfond të kuq në bazë të CSS që treguam.
Ky paragraf do të shkruhej në të kuqe.
Dhe kjo h2 do të ishte gjithashtu e kuqe.
Në faqet e internetit sot, atributet e klasës shpesh përdoren në shumicën e elementeve, sepse ato janë më të lehta për të punuar me një perspektivë specifike që janë ID. Ju do të gjeni faqet më të hershme të HTML që do të mbushen me atributet e klasës, disa prej të cilave përsëriten disa herë në një dokument dhe të tjerat të cilat mund të shfaqen vetëm një herë.
Përzgjedhësit e ID
Selektori i ID-së ju lejon të jepni një emër për një stil të caktuar pa e lidhur atë me një tag ose element tjetër HTML . Thuaj se keni pasur një ndarje në shenjën tuaj të HTML që përmban informacion në lidhje me një ngjarje.
Ju mund të jepni këtë ndarje një atribut identifikimi të "ngjarjes", dhe pastaj nëse dëshironi të përshkruani atë ndarje me një kufi të gjërë me 1 pixel, shkruani një kod ID si ky:
#event {border: 1px solid # 000; }
Sfida me përzgjedhësit e ID është se ato nuk mund të përsëriten në një dokument HTML. Ato duhet të jenë unike (mund të përdorni të njëjtin ID në faqet e shumta të faqes tuaj, por vetëm një herë në çdo dokument HTML). Pra, nëse keni pasur 3 ngjarje që të gjithë kanë nevojë për këtë kufi, ju do të duhet t'i jepni atributet ID të "event1", "event2" dhe "event3" dhe të stiloni secilin prej tyre. Prandaj, do të ishte shumë më e lehtë të përdoret atributi i lartpërmendur i klasës i "ngjarjes" dhe t'i stilit të të gjitha në të njëjtën kohë.
Një sfidë tjetër me atributet e ID është se ata kanë një specifikë më të lartë sesa atributet e klasës. Kjo do të thotë që nëse keni nevojë të keni CSS që anashkaloni një stil të krijuar më parë, mund të jetë e vështirë për ta bërë këtë nëse jeni mbështetur shumë në ID. Është për këtë arsye që shumë zhvillues të uebit janë larguar nga përdorimi i ID-ve në shenjën e tyre, edhe nëse kanë ndërmend ta përdorin atë vlerë një herë dhe kanë kthyer në vend atributet më pak specifike të klasës për pothuajse të gjitha stilet.
Një fushë ku atributet e ID-ve nuk hyjnë në lojë është kur të doni të krijoni një faqe që ka lidhje në ankorë në faqe. Për shembull, nëse keni një faqe interneti të parallaksës që përmban të gjithë përmbajtjen në një faqe të vetme me lidhje që "kërcejnë" në pjesë të ndryshme të asaj faqeje. Kjo bëhet duke përdorur atributet e ID dhe lidhjet e tekstit që përdorin këto lidhje ankorimi.
Ju thjesht do të shtoni vlerën e atributit, paraprirë nga simboli #, tek atributi href i lidhjes, si kjo:
Kjo është lidhja
Kur klikohet ose preket, kjo lidhje do të kërcejë në pjesën e faqes që ka këtë atribut ID. Nëse asnjë element në faqe nuk ka përdorur këtë vlerë ID, lidhja nuk do të bënte asgjë.
Mos harroni, nëse doni të krijoni lidhjen në faqe në një vend, do të kërkohet përdorimi i atributeve të ID-së, por ju mund të ktheheni në klasa për qëllime të përgjithshme CSS të stilit. Kështu po shënoj faqet sot - kam përdorur përzgjedhësit e klasave sa më shumë që të jetë e mundur dhe vetëm kthehem tek ID kur kam nevojë për atributin për të vepruar jo vetëm si një goditje për CSS por edhe si një lidhje në faqe.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 8/9/17