Å bygge nettsteder på dagens web krever en dyp forståelse av CSS (Cascading Style Sheets). Dette er instruksjonene som du gir et nettsted for å bestemme hvordan det skal oppsettes i nettleservinduet. Du bruker en rekke "stiler" til HTML-dokumentet ditt, som vil skape utseendet på websiden din.
Det er mange måter å anvende de ovennevnte stilene på på et dokument, men ofte vil du bare bruke en stil på noen av elementene i et dokument, men ikke alle forekomster av det elementet. Du vil kanskje også lage en stil som du kan søke på flere elementer i et dokument, uten å gjenta stilregelen for hver enkelt forekomst. For å oppnå disse ønskede stilene, vil du bruke klassen og ID-HTML-attributter. Disse attributter er globale attributter som kan brukes på nesten alle HTML-tagger. Det betyr at uansett om du styler divisjoner, avsnitt, lenker, lister eller noen av de andre bitene av HTML i dokumentet ditt, kan du slå til klasse- og ID-attributter for å hjelpe deg med å oppnå denne oppgaven!
Klassevalgere
Klassevalgeren lar deg sette flere stiler til samme element eller tag i et dokument. For eksempel vil du kanskje ha visse deler av teksten din i en annen farge fra resten av teksten i dokumentet. Disse uthevede seksjonene kan være et "varsel" som du setter inn på siden. Du kan tilordne avsnittene dine med klasser som dette:
p {farge: # 0000ff; } p.alert {farge: # ff0000; } Disse stilene vil sette fargen på alle avsnitt til blå (# 0000ff), men et avsnitt med en klasseattributt for "varsling" vil i stedet bli formet i rødt (# ff0000). Dette skyldes at klassen attributtet har en høyere spesifisitet enn den første CSS-regelen, som bare bruker en tagvelger. Når du arbeider med CSS, vil en mer spesifikk regel overstyre en mindre spesifikk. Så i dette eksemplet setter den mer generelle regelen fargen på alle avsnittene, men den andre, mer spesifikke regelen enn overstyrer denne innstillingen bare i noen avsnitt. Slik kan dette brukes i noen HTML-oppslag: 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 klassen attributtet ville overskrive standard blå farge fra elementvelger styling.
I dette eksempelet ville stilen til "p.alert" bare gjelde for avsnittet elementer som bruker denne "varsling" -klassen. Hvis du vil bruke denne klassen over flere HTML-elementer, vil du bare fjerne HTML-elementet fra begynnelsen av stilanropet (bare vær sikker på å forlate perioden ( .) på plass), slik: .alert {bakgrunnsfarge: # ff0000;} Denne klassen er nå tilgjengelig for ethvert element som trenger det. Ethvert stykke HTML som har en klasseattributtverdi av "varsling", vil nå få denne stilen. I HTML-koden nedenfor har vi både et avsnitt og et overskriftsnivå 2 som bruker "varsel" -kursen. Begge disse ville ha en bakgrunnsfarge på rødt basert på CSS vi nettopp viste.
Dette avsnittet vil bli skrevet i rødt.
På nettsteder i dag brukes klassegenskaper ofte på de fleste elementer fordi de er lettere å jobbe med fra et spesifisitetsperspektiv som ID er. Du vil finne de nyeste HTML-sidene som skal fylles med klassegenskaper, hvorav noen gjentas flere ganger i et dokument og andre som bare kan vises en gang. ID-väljeren lar deg gi et navn til en bestemt stil uten å knytte den til en tag eller et annet HTML-element. Si at du hadde en oppdeling i HTML-oppslaget ditt som inneholder informasjon om en hendelse. Du kan gi denne divisjonen et ID-attributt for «event», og så hvis du vil skissere den divisjonen med en 1-pixel bred svart ramme, skriver du en ID-kode slik: #event {border: 1px solid # 000; } Utfordringen med ID selectors 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å hvis du hadde 3 hendelser som alle trengte denne grensen, må du gi dem ID-attributter av "event1", "event2" og "event3" og stil hver av dem. Det ville derfor være mye lettere å bruke ovennevnte klasseattributt av «event» og stil dem alt på en gang. En annen utfordring med ID-attributter er at de har en høyere spesifisitet enn klassen attributter. Dette betyr at hvis du trenger å ha CSS som overstyrer en tidligere etablert stil, kan det være vanskelig å gjøre det hvis du har stolt for mye på ID-er. Det er derfor mange webutviklere har flyttet seg fra å bruke IDer i deres oppslag, selv om de bare har tenkt å bruke den verdien en gang, og har i stedet henvendt seg til de mindre spesifikke klassetributtene for nesten alle stiler. Det ene området der ID-attributter kommer inn i spill, er når du vil opprette en side som har ankerkoblinger på siden. For eksempel, hvis du har en parallax stil nettsted som inneholder alt innholdet på en enkelt side med lenker som "hopper" til ulike deler av den siden. Dette gjøres ved hjelp av ID-attributter og tekstkoblinger som bruker disse ankerlinkene. Du vil bare legge til verdien av det attributtet, foran "#" -symbolet, til "href" -attributtet til lenken, slik som dette: Dette er lenken Når du klikker eller rører, hopper denne lenken til den delen av siden som har denne ID-attributtet.Hvis ingen element på siden bruker denne ID-verdien, vil koblingen ikke gjøre noe. Husk at hvis du vil opprette koblinger på siden på et nettsted, vil det være nødvendig å bruke ID-attributter, men du kan fortsatt gå til klasser for generelle CSS-stilingsformål. Slik merker vi opp sider i dag - vi bruker klassevalgere så mye som mulig, og bare slår til IDer når vi trenger attributtet til å fungere ikke bare som en krok for CSS, men også som en link på siden.Og denne h2 vil også være rød.
ID selektorer
Komplikasjoner av ID-attributter
