Gradnja dobro oblikovanih spletnih mest na današnjem spletu zahteva poglobljeno razumevanje Cascading Style Sheets. V dokumentu HTML uporabite vrsto slogov CSS, ki bodo predstavljali videz vaše spletne strani.
Atributi razreda in ID
Oblikovalci morajo včasih uporabiti slog samo nekaj elementov v dokumentu, vendar ne vsi primeri tega elementa. Če želite doseči te želene sloge, uporabite razred in ID Atributi HTML. Ti atributi so globalni atributi, ki veljajo za skoraj vse Oznaka HTML- torej, ali v svojem dokumentu oblikujete oddelke, odstavke, povezave, sezname ali katerega koli drugega dela HTML-ja, se lahko pri izvedbi te naloge obrnete na atribute razreda in ID!
Izbirniki razredov
Izbirnik razreda nastavi več slogov na isti element ali oznako v dokumentu. Če želite na primer določene odseke besedila poklicati v drugačni barvi kot opozorilo, odstavke dodelite takim razredom:
p {barva: # 0000ff; }
p.alert {color: # ff0000; }
Ti slogi bi nastavili barvovse odstavkov v modro (# 0000ff), vendar kateri koli odstavek z atributom razreda
opozorilo namesto tega z rdečim stilom (# ff0000). To je zato, ker ima atribut razreda večjo specifičnost kot prvo pravilo CSS, ki uporablja samo izbirnik oznak. Pri delu z CSS, natančnejše pravilo bo preglasilo manj specifično. V tem primeru torej bolj splošno pravilo določa barvo vseh odstavkov, drugo pa bolj specifično pravilo kot preglasi to nastavitev samo v nekaterih odstavkih.Evo, kako bi to lahko uporabili pri nekaterih oznakah HTML:
Ta odstavek bi bil prikazan modro, kar je privzeto za stran.
Ta odstavek bi bil tudi v modri barvi.
In ta odstavek bi bil prikazan v rdeči barvi, saj bi atribut razreda prepisal standardno modro barvo iz stila izbirnika elementov.
V tem primeru slog str.opozorilo bi veljalo samo za elemente odstavkov, ki to uporabljajo opozorilo razred. Če želite uporabiti ta razred v več elementih HTML, odstranite element HTML z začetka klica sloga, takole:
.alert {background-color: # ff0000;}
Ta razred je zdaj na voljo vsem elementom, ki ga potrebujejo. Vsak del HTML-ja, ki ima vrednost atributa razreda opozorilo bo zdaj dobil ta slog. V spodnjem HTML-ju imamo tako odstavek kot naslov na drugi ravni, ki uporabljata opozorilo razred. Oba prikazujeta rdečo barvo ozadja:
Ta odstavek bi bil napisan v rdeči barvi.
Danes se na spletnih mestih atributi razredov pogosto uporabljajo na večini elementov, ker je z njimi lažje delati z vidika specifičnosti kot z ID-ji. Našli boste večino trenutnih strani HTML, ki jih je treba zapolniti z atributi razreda, od katerih se nekatere pogosto ponavljajo v dokumentu, druge pa se lahko pojavijo le enkrat.
Izbirniki ID
ID izbirnik poimenuje določen slog, ne da bi ga povezal z oznako ali drugim Element HTML.
Predpostavimo delitev v oznaki HTML, ki vsebuje informacije o dogodku. Lahko bi temu oddelku dali Atribut ID od dogodek, nato pa to delitev začrtajte s črno obrobo, široko 1 pik:
#event {border: 1px solid # 000; }
Izziv z Izbirniki ID je, da jih ni mogoče ponoviti v dokumentu HTML. Biti morajo enolični (isti ID lahko uporabite na več straneh spletnega mesta, vendar le enkrat v vsakem posameznem dokumentu HTML). Torej morate za tri dogodke, ki vsi potrebujejo to mejo, določiti atribute ID dogodek1, dogodek2, in dogodek3 in oblikujte vsakega od njih. Zato bi bilo veliko lažje uporabiti prej omenjeni atribut razreda dogodek in jih oblikujte naenkrat.
Zapleti atributov ID
Drug izziv z atributi ID je, da imajo večjo specifičnost kot atributi razreda. Če želite preglasiti predhodno uveljavljen slog, je to težko storiti, če ste se preveč zanašali na osebne dokumente. Številni spletni razvijalci so se oddaljili od z uporabo ID-jev v njihovem označevanju, tudi če nameravajo to vrednost uporabiti le enkrat in so se namesto za vse obrnili na manj specifične atribute razreda stilov.
Atributi ID pridejo v poštev samo takrat, ko želite ustvariti stran s sidrnimi povezavami na strani. Na primer, razmislite o spletnem mestu v paralaksnem slogu, ki vsebuje vso vsebino na eni strani s povezavami, ki "skočijo" na različne dele te strani. Atributi ID in besedilne povezave uporabljajo te sidrne povezave. Dodajte vrednost tega atributa, pred katerim je # v simbol href atribut povezave, kot je ta:
To je povezava
Ko jo kliknete ali se je dotaknete, ta povezava preskoči na del strani, ki ima ta atribut ID. Če noben element na strani ne uporablja te vrednosti ID, povezava ne bo naredila ničesar.
Če želite na spletnem mestu ustvariti povezavo na strani, bo potrebna uporaba atributov ID, vendar se lahko kljub temu obrnete na razrede za splošne namene oblikovanja CSS. Tako oblikovalci danes označujejo strani - kolikor je le mogoče, uporabljajo izbirnike razredov in se na ID-je obrnejo le, kadar potrebujejo atribut, da deluje ne le kot kavelj za CSS, temveč tudi kot povezava na strani.