Bruke stilklasser og ID-er

Klasser og ID-er utvider CSS-en din

E+/Getty Images

Å bygge velstilte nettsider på dagens nett krever en dyp forståelse av Cascading Style Sheets . Bruk en rekke CSS-stiler på HTML-dokumentet ditt for å informere om utseendet til nettsiden din.

Klasse- og ID-attributter

Designere må noen ganger bare bruke en stil noen av elementene i et dokument, men ikke alle forekomster av det elementet. For å oppnå disse ønskede stilene, bruk klasse og ID HTML-attributter. Disse attributtene er globale attributter som gjelder for nesten alle HTML-tag – så enten du stiler inndelinger, avsnitt, lenker, lister eller noen av de andre HTML-delene i dokumentet ditt, kan du gå til klasse- og ID-attributter for å hjelpe deg med å utføre denne oppgaven!

Klassevelgere

Klassevelgeren setter flere stiler til samme element eller tag i et dokument. For eksempel, for å kalle ut visse deler av teksten din i en annen farge som et varsel, tilordne avsnittene dine med klasser som dette:

|_+_|

Disse stilene ville sette fargen på alle avsnitt til blå (#0000ff), men alle avsnitt med klasseattributt på varsling ville i stedet stilt i rødt (#ff0000). Dette er fordi klasseattributtet har høyere spesifisitet enn den første CSS-regelen, som kun bruker en tagvelger. Når du jobber med CSS , vil en mer spesifikk regel overstyre en mindre spesifikk regel. Så i dette eksemplet angir den mer generelle regelen fargen på alle avsnitt, men den andre, mer spesifikke regelen overstyrer den innstillingen bare i noen avsnitt.

Her er hvordan dette kan brukes i noen HTML-oppmerkinger:

|_+_|

Dette avsnittet vil bli vist i blått, som er standard for siden.

Dette avsnittet vil også være i blått.

Og dette avsnittet vil bli vist i rødt siden klasseattributtet ville overskrive standard blåfargen fra elementvelgerens stil.

I det eksemplet, stilen til p.varsling vil bare gjelde for avsnittselementer som bruker det varsling klasse. For å bruke den klassen på tvers av flere HTML-elementer, fjern HTML-elementet fra begynnelsen av stilkallet, slik:

|_+_|

Denne klassen er nå tilgjengelig for alle elementer som trenger den. Enhver del av HTML-en din som har en klasseattributtverdi på varsling vil nå få denne stilen. I HTML-en nedenfor har vi både et avsnitt og en nivå-to-overskrift som bruker varsling klasse. Begge viser en rød bakgrunnsfarge:

|_+_|

Dette avsnittet vil bli skrevet med rødt.

På nettsider i dag brukes ofte klasseattributter på de fleste elementer fordi de er lettere å jobbe med fra et spesifisitetsperspektiv enn IDer er. Du vil finne de fleste aktuelle HTML-sidene som skal fylles med klasseattributter, hvorav noen gjentas ofte i et dokument og andre som kanskje bare vises én gang.

ID-velgere

ID-en velger navngir en bestemt stil uten å knytte den til en tag eller annet HTML-element .

Anta en inndeling i HTML-oppmerkingen som inneholder informasjon om en hendelse. Du kan gi denne divisjonen en ID-attributt av begivenhet , og skisser deretter inndelingen med en 1-piksel bred svart kant:

|_+_|

Utfordringen med ID-velgere er at de ikke kan gjentas i et HTML-dokument. De må være unike (du kan bruke samme ID på flere sider på nettstedet ditt, men bare én gang i hvert enkelt HTML-dokument). Så for tre hendelser som alle trenger denne grensen, må du identifisere ID-attributter for hendelse1 , hendelse2 , og hendelse3 og style hver av dem. Det ville derfor være mye lettere å bruke den nevnte klasseattributten til begivenhet og style dem alle på en gang.

Komplikasjoner av ID-attributter

En annen utfordring med ID-attributter er at de har høyere spesifisitet enn klasseattributter. For å overstyre en tidligere etablert stil, kan det være vanskelig å gjøre det hvis du har stolt for mye på ID-er. Mange nettutviklere har gått bort fra å bruke ID-er i markeringene sine, selv om de bare har tenkt å bruke den verdien én gang, og har i stedet vendt seg til de mindre spesifikke klasseattributtene for nesten alle stiler.

Det ene området der ID-attributter spiller inn, er når du vil lage en side som har ankerlenker på siden. Tenk for eksempel på et nettsted i parallaksestil som inneholder alt innholdet på en enkelt side med lenker som 'hopper' til forskjellige deler av siden. ID-attributter og tekstlenker bruker disse ankerlenkene. Legg til verdien av det attributtet, etterfulgt av # symbol, til href attributtet til lenken, som dette:

|_+_|

Når du klikker eller berører den, hopper denne koblingen til den delen av siden som har dette ID-attributtet. Hvis ingen elementer på siden bruker denne ID-verdien, vil ikke koblingen gjøre noe.

For å lage koblinger på siden på et nettsted, vil bruk av ID-attributter være nødvendig, men du kan fortsatt henvende deg til klasser for generelle CSS-stylingformål. Dette er hvordan designere markerer sider i dag – de bruker klassevelgere så mye som mulig og henvender seg bare til ID-er når de trenger attributtet for å fungere ikke bare som en krok for CSS, men også som en lenke på siden.