Å bygge velstilte nettsteder på dagens nett krever en dyp forståelse av Cascading Style Sheets. Bruk en serie CSS-stiler på HTML-dokumentet ditt for å informere utseendet på hjemmesiden din.
Klasse- og ID-attributter
Noen ganger må designere bare bruke en stil på noen av elementene i et dokument, men ikke alle forekomster av elementet. For å oppnå disse stilene, bruk klasse og ID HTML-attributter. Disse attributtene er globale attributter som gjelder for nesten alle HTML-tag- Så om du utformer divisjoner, avsnitt, lenker, lister eller noen av de andre HTML-delene i dokumentet ditt, kan du slå til klasse- og ID-attributter for å hjelpe deg med å utføre denne oppgaven!
Klassevalg
Klassevelgeren setter flere stiler til det samme elementet eller taggen i et dokument. For eksempel, for å ringe ut visse deler av teksten din i en annen farge som et varsel, tilordne avsnittene dine med klasser som dette:
p {farge: # 0000ff; }
p.alert {color: # ff0000; }
Disse stilene ville sette fargen påalle
avsnitt til blått (# 0000ff), men ethvert avsnitt med en klasseattributt på varsling ville i stedet stylet i rødt (# ff0000). Dette er fordi klasseattributtet har høyere spesifisitet enn den første CSS-regelen, som bare bruker en tagvelger. Når du jobber med CSS, vil en mer spesifikk regel overstyre en mindre spesifikk. Så i dette eksemplet setter den mer generelle regelen fargen på alle avsnitt, men den andre, mer spesifikke regelen enn overstyrer innstillingen bare i noen avsnitt.Slik kan dette brukes i noen HTML-markeringer:
Dette avsnittet vises 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 den blå standardfargen fra elementvelgerstylingen.
I det eksemplet er stilen til p.alert vil bare gjelde avsnittelementer som bruker det varsling klasse. For å bruke den klassen på tvers av flere HTML-elementer, fjern HTML-elementet fra begynnelsen av stilanropet, slik:
.varsel {bakgrunnsfarge: # ff0000;}
Denne klassen er nå tilgjengelig for ethvert element som trenger det. Alle deler av HTML-en din som har en klasseattributtverdi på varsling vil nå få denne stilen. I HTML-koden nedenfor har vi både et avsnitt og en overskrift på nivå to som bruker varsling klasse. Begge viser en rød bakgrunnsfarge:
Dette avsnittet ville være skrevet i rødt.
På nettsteder i dag brukes klasseattributter ofte på de fleste elementer fordi de er lettere å jobbe med fra et spesifisitetsperspektiv enn ID-er. Du finner de fleste aktuelle HTML-sider som skal fylles ut med klasseattributter, hvorav noen gjentas ofte i et dokument og andre som bare kan vises en gang.
ID-velgere
ID-en velgeren navngir en bestemt stil uten å knytte den til en tagg eller annet HTML-element.
Anta en inndeling i HTML-markeringen din som inneholder informasjon om en hendelse. Du kan gi denne divisjonen en ID-attributt av begivenhet, og deretter skissere den delingen med en svart ramme på 1 piksel:
#event {border: 1px solid # 000; }
Utfordringen med ID-velgere er at de ikke kan gjentas i et HTML-dokument. De må være unike (du kan bruke den samme ID-en 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 stil hver av dem. Det ville derfor være mye lettere å bruke den nevnte klasseattributtet til begivenhet og stil 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 bruker ID-er i markeringen, selv om de bare har tenkt å bruke den verdien en gang, og i stedet har 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 opprette en side som har ankerlenker på siden. Tenk for eksempel på et nettsted med parallaksstil som inneholder alt innholdet på en enkelt side med lenker som "hopper" til forskjellige deler av siden. ID-attributter og tekstlenker bruker disse ankerkoblingene. Legg til verdien for det attributtet, foran # symbol, til href attributt til lenken, slik:
Dette er lenken
Når du klikker eller berører den, hopper denne lenken til den delen av siden som har dette ID-attributtet. Hvis ingen elementer på siden bruker denne ID-verdien, vil ikke lenken gjøre noe.
For å opprette lenking på siden på et nettsted, vil bruk av ID-attributter være påkrevd, men du kan fremdeles slå til klasser for generelle CSS-stylingsformål. Slik markerer designere sider i dag - de bruker klassevalg så mye som mulig og vender seg bare til ID når de trenger attributtet for å fungere ikke bare som en krok for CSS, men også som en lenke på siden.