Razredi in ID-ji Pomoč razširite svoj CSS
Gradnja spletnih strani na današnjem spletu zahteva globoko razumevanje CSS (Cascading Style Sheets). To so navodila, ki vam dajejo spletno stran, da določite, kako bo postavljena v okno brskalnika. V HTML dokumentu uporabite vrsto "slogov", ki bodo ustvarjali videz in občutek vaše spletne strani.
Obstaja veliko načinov uporabe navedenih stilov v dokumentu, vendar pogosto želite uporabiti slog samo pri nekaterih elementih v dokumentu, ne pa tudi vseh primerkov tega elementa.
Prav tako boste morda želeli ustvariti slog, ki ga lahko uporabite za več elementov v dokumentu, ne da bi morali ponoviti pravilo sloga za vsak posamezen primer. Za doseganje teh želenih stilov boste uporabili atribute razreda in ID HTML. Ti atributi so globalni atributi, ki jih je mogoče uporabiti za skoraj vsako oznako HTML . To pomeni, da lahko v vašem dokumentu oblikujete razdelke, odstavke, povezave, sezname ali katere koli druge dele HTML-a, lahko spremenite atribute razreda in ID vam pomagajo doseči to nalogo!
Izbirniki razreda
Izbirnik razreda vam omogoča, da v dokumentu nastavite več slogov v isti element ali oznako. Na primer, morda želite, da se nekateri deli besedila izkažejo v drugačni barvi od preostanka besedila v dokumentu. Ti poudarjeni deli so lahko »opozorilo«, ki ga nastavljate na strani. Vaše odstavke lahko dodate v razrede, kot je ta:
p {barva: # 0000ff; }
p.alert {barva: # ff0000; }
Ti slogi bi barvo vseh odstavkov nastavili na modro (# 0000ff), vendar bi vsak odstavek z atributom razreda "opozorilo" namesto tega postal rdeč (# ff0000). To je zato, ker ima atribut razreda večjo specifičnost kot prvo pravilo CSS, ki uporablja samo izbirnik oznak.
Pri delu s CSS bo bolj specifično pravilo preglasilo manj specifično. Torej v tem primeru bolj splošno pravilo določa barvo vseh odstavkov, toda drugo, bolj specifično pravilo, kot pa prevlada to nastavitev samo na nekaterih odstavkih.
To je mogoče uporabiti v nekaterih oznakah HTML:
Ta odstavek bi bil prikazan modro, kar je privzeto za stran.
Ta odstavek bi bil tudi modre barve.
In ta odstavek bi bil prikazan v rdeči barvi, ker bi atribut razreda prepisal standardno modro barvo s stila izbirnika elementov.
V tem primeru bi slog "p.alert" veljal le za elemente odstavka, ki uporabljajo ta razred "opozorila". Če želite uporabiti ta razred v več elementih HTML, preprosto odstranite element HTML od začetka (samo prepričajte se, da zapustite obdobje (.) na mestu), na primer:
.alert {ozadje-barva: # ff0000;}
Ta razred je zdaj na voljo vsem elementom, ki ga potrebujejo. Vsak del vašega HTML, ki ima vrednost atributa razreda »opozorilo«, bo zdaj dobil ta slog. V spodnjem HTML-ju imamo odstavek in raven naslova 2, ki uporabljajo razred "opozorilo". Oba bi imela barvo ozadja rdeče barve na osnovi CSS, ki smo jo pravkar pokazali.
Ta odstavek bi bil napisan v rdeči barvi.
In ta h2 bi bila tudi rdeča.
Na spletnih straneh danes se atributi razreda pogosto uporabljajo za večino elementov, ker so z vidika specifičnosti lažje delati z ID-ji. Najdete najnovejše HTML strani, ki jih je treba napolniti z atributi razreda, nekateri od njih se večkrat ponovijo v dokumentu in drugi, ki se lahko pojavijo samo enkrat.
ID izbirniki
Izbirnik ID vam omogoča, da podate ime določenemu slogu, ne da bi ga povezali s oznako ali drugim elementom HTML . Recite, da ste imeli razdelek v oznaki HTML, ki vsebuje informacije o dogodku.
To razdelitev bi lahko dodelili atributu ID-ja »dogodka«, potem pa, če želite, da to delitev označi z 1-pikslovno široko črno obrobo, napišete kodo ID:
#event {border: 1px solid # 000; }
Izziv z izbirniki ID-jev je, da jih ni mogoče ponoviti v HTML-dokumentu. Morajo biti edinstveni (lahko uporabite isti ID na več straneh vaše spletne strani, vendar le enkrat v vsakem posameznem dokumentu HTML). Torej, če ste imeli 3 dogodke, ki so potrebovali to mejo, jim morate dati ID atribute "dogodka1", "dogodka2" in "dogodka3" in vsakega od njih. Zato bi bilo veliko lažje uporabiti prej omenjeni atribut razreda »dogodka« in jih stisniti vse hkrati.
Drug izziv z atributi ID je, da imajo višjo specifičnost kot atributi razreda. To pomeni, da če morate imeti CSS, ki preglasi predhodno uveljavljen slog, je to težko storiti, če ste preveč zanašali na ID-je. Zaradi tega so se mnogi spletni razvijalci oddaljili od uporabe ID-jev v njihovem označevanju, čeprav le enkrat nameravajo uporabiti to vrednost enkrat in se namesto tega obrnili na manj specifične atribute razreda za skoraj vse sloge.
Območje, kjer se prikažejo atributi ID, je, ko želite ustvariti stran s povezavami na strani. Na primer, če imate spletno stran v slogu paralaks, ki vsebuje vso vsebino na eni strani s povezavami, ki "skočijo" na različne dele te strani. To se naredi z uporabo atributov ID-ja in besedilnih povezav, ki uporabljajo te sidrne povezave.
Z vrednostjo tega atributa, ki ji sledi simbol #, bi preprosto dodali atribut href povezave:
To je povezava
Ko kliknete ali se dotaknete, bo ta povezava skočila na del strani, ki ima ta atribut ID. Če noben element na strani ni uporabil te vrednosti ID, povezava ne bi naredila ničesar.
Ne pozabite, če želite ustvariti povezavo na strani na spletnem mestu, bo potrebna uporaba atributov ID-jev, vendar se lahko še vedno obrnite na razrede za splošne namene CSS-a. Tako omenjam strani danes - kolikor je mogoče, sem izbral razrede in le obrnil na ID-je, ko potrebujem atribut, da delujejo ne samo kot kljuka za CSS, ampak tudi kot povezavo na strani.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 19.8.17