Klasse en ID's Help om jou CSS uit te brei
Bou webwerwe op vandag se web vereis 'n diep begrip van CSS (Cascading Style Sheets). Dit is die instruksies wat u 'n webwerf gee om te bepaal hoe dit in die blaaier venster sal uitmaak. Jy pas 'n reeks "style" toe op jou HTML-dokument wat die voorkoms en gevoel van jou webblad sal skep.
Daar is baie maniere om die voormelde style oor 'n dokument toe te pas, maar dikwels wil jy 'n styl op slegs enkele elemente in 'n dokument gebruik, maar nie alle gevalle van daardie element nie.
U kan ook 'n styl skep wat u op verskeie elemente in 'n dokument kan toepas, sonder om die stylreël vir elke individuele voorbeeld te herhaal. Om hierdie gewenste style te bereik, sal u die klas- en ID-HTML-eienskappe gebruik. Hierdie eienskappe is globale eienskappe wat op bykans elke HTML-tag toegepas kan word. Dit beteken dat of jy afdelings, paragrawe, skakels, lyste of enige van die ander stukke HTML in jou dokument kan stilmaak, na die klas- en ID-eienskappe na help om hierdie taak te bereik!
Klas Keurders
Met die klas keurder kan u verskeie style aan dieselfde element of merker in 'n dokument stel. U kan byvoorbeeld sekere afdelings van u teks in 'n ander kleur uitroep in die res van die teks in die dokument. Hierdie uitgeligte afdelings kan 'n "waarskuwing" wees wat u op die bladsy stel. U kan u paragrawe met klasse soos volg toewys:
p (kleur: # 0000ff; }
p.alert (kleur: # ff0000; }
Hierdie style sal die kleur van al die paragrawe tot blou stel (# 0000ff), maar enige paragraaf met 'n klasattribuut van "waarskuwing" sal eerder in rooi gestileer word (# ff0000). Dit is omdat die klas eienskap 'n hoër spesifisiteit het as die eerste CSS reël, wat slegs 'n merker kieser gebruik.
Wanneer u met CSS werk, sal 'n meer spesifieke reël 'n minder spesifieke een ignoreer. So in hierdie voorbeeld stel die meer algemene reël die kleur van al die paragrawe in, maar die tweede, meer spesifieke reël, as dat dit slegs op sommige paragrawe oorskry word.
Hier is hoe dit in sommige HTML-opmerkings gebruik kan word:
Hierdie paragraaf sal in blou vertoon word, wat die standaard vir die bladsy is.
Hierdie paragraaf sal ook in blou wees.
En hierdie paragraaf sal in rooi vertoon word, aangesien die klas eienskap die standaard blou kleur van die element selector stilering sal oorskryf.
In hierdie voorbeeld sal die styl van "p.alert" slegs van toepassing wees op paragraafelemente wat daardie "waarskuwing" -klas gebruik. As jy daardie klas oor verskeie HTML-elemente wil gebruik, sal jy die HTML-element eenvoudig van die begin af verwyder. styl-oproep (maak seker dat jy die periode (.) in plek hou), soos volg:
.alert (agtergrond-kleur: # ff0000;)
Hierdie klas is nou beskikbaar vir enige element wat dit benodig. Enige deel van jou HTML wat 'n klaswaardewaarde van "alert" het, sal nou hierdie styl kry. In die HTML hieronder het ons beide 'n paragraaf en 'n opskrif vlak 2 wat die "alert" klas gebruik. Albei hiervan sal 'n agtergrondkleur van rooi hê, gebaseer op die CSS wat ons net gewys het.
Hierdie paragraaf sal in rooi geskryf word.
En hierdie h2 sal ook rooi wees.
Op webwerwe vandag word klasaanduidings dikwels op die meeste elemente gebruik omdat dit makliker is om vanuit 'n spesifisiteitsperspektief te werk wat ID's is. U sal die nuutste HTML-bladsye vind wat gevul moet word met klaskenmerke, waarvan sommige herhaaldelik in 'n dokument herhaal word en ander wat slegs een keer verskyn.
ID Selectors
Met die ID selector kan u 'n naam gee aan 'n spesifieke styl sonder om dit te assosieer met 'n merker of ander HTML-element . Sê jy het 'n afdeling in jou HTML-opmerkings gehad wat inligting oor 'n gebeurtenis bevat.
Jy kan hierdie afdeling 'n ID-kenmerk van 'gebeurtenis' gee, en as jy daardie afdeling met 'n 1-pixel wye swart grens wil omskryf, skryf jy 'n ID-kode soos volg:
#event {grens: 1px solid # 000; }
Die uitdaging met ID-keurders is dat hulle nie in 'n HTML-dokument herhaal kan word nie. Hulle moet uniek wees (jy kan dieselfde ID gebruik op verskeie bladsye van jou webwerf, maar slegs een keer in elke individuele HTML-dokument). So as jy 3 gebeurtenisse gehad het wat almal hierdie grens benodig, moet jy hulle ID-eienskappe van "gebeurtenis1", "gebeurtenis2" en "gebeurtenis3" gee en elkeen van hulle styl. Dit sou dus baie makliker wees om die bogenoemde klas eienskap van "gebeurtenis" te gebruik en hulle almal gelyktydig te ontwerp.
Nog 'n uitdaging met ID-eienskappe is dat hulle 'n hoër spesifisiteit as klasattributen het. Dit beteken dat as jy CSS moet hê wat 'n voorheen gevestigde styl oortree, kan dit moeilik wees om dit te doen as jy te veel op ID's staatgemaak het. Dit is om hierdie rede dat baie webontwikkelaars wegbeweeg het van die gebruik van ID's in hul opmerkings, selfs al is hulle net van plan om daardie waarde een keer te gebruik en in plaas daarvan omgedraai na die minder spesifieke klaskenmerke vir byna alle style.
Die een area waar ID-eienskappe in die spel kom, is wanneer jy 'n bladsy wil skep wat ankerskakels op bladsy het. Byvoorbeeld, as jy 'n parallax-stylwebwerf het wat al die inhoud op 'n enkele bladsy bevat met skakels wat na verskillende dele van daardie bladsy spring. Dit word gedoen met behulp van ID-eienskappe en teks skakels wat hierdie anker skakels gebruik.
U sal die waarde van die kenmerk, voorafgegaan deur die # simbool, byvoeg tot die href-kenmerk van die skakel, soos volg:
Dit is die skakel
As dit geklik of aangeraak word, sal hierdie skakel na die gedeelte van die bladsy wat hierdie ID-kenmerk het, spring. As geen element op die bladsy hierdie ID-waarde gebruik het nie, sou die skakel niks doen nie.
Onthou, as jy op bladsy op 'n bladsy wil skakel, sal die gebruik van ID-eienskappe vereis word, maar jy kan steeds na klasse vir algemene CSS-stileringsdoeleindes verander. So sien ek vandag bladsye. Ek gebruik klas keurders so veel as moontlik en draai net na IDs wanneer ek die kenmerk benodig om nie net as 'n haak vir CSS op te tree nie, maar ook as 'n in-bladsy skakel.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 8/9/17