Klassen en ID's Help ferwiderje jo CSS
Bouwsten websiden op hjoeddeistige web fereasket in djipste ynsjoch fan CSS (Cascading Style Sheets). Dit binne de ynstruksjes dy't jo in webside jaan om te bepalen hoe't it yn it blêdwizerskript lizze sil. Jo tapasse in searje "stilen" oan jo HTML dokumint dy't it look en fiele fan jo webside skeppe.
Der binne in protte manieren om dizze oerienkommende stilen oer in dokumint tapasse te litten, mar faak wolle jo in styl op ien inkele fan eleminten brûke yn in dokumint, mar net alle eksimplaren fan dit elemint.
Jo kinne ek in styl meitsje dy't jo kinne op ferskate eleminten tapasse yn in dokumint, sûnder de stylreglem foar elke yndividuele ynstel te foarkommen. Om dizze winske stilen te realisearje, sille jo de attributen fan 'e class en ID brûke. Dizze attributen binne globale eigenskippen dy't tapast wurde kinne oan hast eltse HTML-tag. Dat betsjut dat jo wolle dat jo divyzjes, paragrafen, keppelings, listjes of ien fan 'e oare stikken fan HTML yn jo dokumint styl binne, kinne jo nei skoallen en ID-attributen oanpasse oan help jo dizze taak útfiere!
Class Selectors
De klasse seleksje lit jo meardere stilen ynstelle op deselde elemint of tag yn in dokumint. Jo kinne bygelyks gewoan dielen fan jo tekst hawwe yn in oare kleur út 'e rest fan' e tekst yn 'e dokumint. Dizze markearde dielen kinne in "warskôging" wêze dat jo de side ynstelle. Jo kinne jo paragrafen mei sokke klassen oantsjutte:
p {color: # 0000ff; }
p.alert {kleur: # ff0000; }
Dizze stilen soene de kleur fan alle paragrafen nei blau sette (# 0000ff), mar elke lid mei in klasse attribút fan "warskôging" soe plak wurde ynsteld troch in styl (# ff0000). Dit is om't it klassifikaat hat in hegere speciaal as it earste CSS-regel, dat allinne in tag selektor brûkt.
Wannear't jo wurkje mei CSS, sil in spesifike regel in minder spesifyk oerskriuwe. Dus yn dit foarbyld set de algemienste regel de kleur fan alle paragrafen, mar de twadde, mear spesifike regel as oerskriuwt dat allinich op guon paragrafen opset.
Hjir is hoe dit yn guon HTML-markearring brûkt wurde kin:
Dit paragraaf soe blau wêze, dat is de standert foar de side.
Dizze paragraaf soe ek blau wêze.
En dit paragraaf sil werjûn wurde yn rot, omdat it klasse-attribút de standert blauwe kleur oerskriuwe soe fan 'e elemintselektor styling.
Yn dit foarbyld sil de styl fan "p.alert" allinich tapasse foar eleminten fan paragraaf dy't dizze "alert" klasse brûke. As jo dizze klasse brûke wolle oer meardere HTML-eleminten, sil jo it HTML-elemint gewoon fuortsmite fan it begjin fan 'e styl opropje (gewoan it wis wêze dat de perioade (.) yn steat is), sa as dit:
.alert {background-color: # ff0000;}
Dizze klasse is no beskikber foar ien elemint dat it nedich is. Elk stik fan jo HTML dy't in klasse attribútwearde fan "warskôging" hat, sil no dizze styl krije. Yn it HTML hjirûnder hawwe wy sawol in paragraaf en in koprang nivo 2 dy't de klasse "alarm" brûke. Beide fan dizze soene in eftergrûnkleur hawwe fan basearre op it CSS dat wy gewoan sjen litte.
Dizze paragraaf soe yn read skreaun wurde.
En dit h2 soe ek read wêze.
Op hjoeddeistige siden wurde klasse-attributen faak brûkt op 'e measte eleminten, om't se makliker binne om te wurkjen fanút in spesifike perspektyf dat ID's binne. Jo fine de meast aktuele HTML siden te folle mei klasse-attributen, wêrfan guon binne meardere kearen werhelje yn in dokumint en oaren dy't allinich ien kear ferskine.
ID-seleksjes
De ID- seleksje lit jo in namme jaan oan in spesifike styl sûnder dat te ferbinen mei in tag of oare HTML-elemint . Sizje dat jo in divyzje hawwe yn jo HTML-markearring dy't ynformaasje hat oer in evenemint.
Jo kinne dizze divyzje in ID-attribus jaan fan "evenemint", en dan as jo de divyzje mei in 1-pixel breed swarte grins skriuwe woe jo in ID-koade skriuwe:
#event {border: 1px solid # 000; }
De útdaging mei ID-seleksjes is dat se net werhelje kinne yn in HTML dokumint. Se moatte unyk wêze (jo kinne deselde ID op meardere siden fan jo side brûke, mar allinich ien kear yn elke yndividuele HTML dokumint). As jo 3 eveneminten hienen dy't allegear dizze râne nedich hawwe, moatte jo se nammerkende adressen jaan fan "event1", "event2" en "event3" en styl elk fan har. It soe dus folle makliker wêze om it eardere klasse-attribuut fan "evenemint" en gebrûk te meitsjen.
In oare útdaging mei ID-attributen is dat se in hegere speciaal hawwe as klassen attributen. Dit betsjut dat as jo CSS hawwe dy't in earder fêststelde styl oerskriuwt, it dreech wêze kin as jo hawwe as jo te folle op ID's lein hawwe. It is dêrom dat in soad webûntwikkelders wegerje fan ID's te brûken yn har markearring, sels as se allinne mar ien kear brûke, en hawwe ynstee fan 'e minder spesifike klasse attributen foar hast alle stilen.
It iene gebiet wêryn ID-attributen yn it spultsje komme, as jo in side meitsje wolle dy't in side-ankerlinks hat. Bygelyks, as jo in webside parallaksstyl hawwe dy't alle ynhâld op ien side befettet mei keppelings dy't "springen" oan ferskate ûnderdielen fan dizze side hawwe. Dit sil gebrûk meitsje fan ID-attributen en tekstblêden dy gebrûk meitsje fan dizze anchor links.
Jo soenen de wearde fan dat attribus taheakje, foarôfgeand fan it # symboal, oan it href-attribút fan 'e keppeling, sa as dit:
Dit is de keppeling
As jo klikke of berekkenje, sil dizze keppeling nei it diel fan 'e side springe dy't dizze ID-attribút hat. As gjin elemint op 'e side brûkte dizze ID-wearde, soe de link net wat dwaan.
Tink derom, as jo in yn-side keppelings meitsje wolle op in side, sil it gebrûk fan ID-attributen nedich wêze, mar jo kinne jo noch altyd nei de lessen meitsje foar algemiene CSS-stylingdoelen. Dit is hoe't ik hjoed de siden markearje - ik brûkte klasse seleksjes safolle mooglik en blike allinich nei IDs as ik de attribute nedich is om net allinich as hok foar CSS mar te dwaan as in yn-side-keppeling.
Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 8/9/17