Cascading Style Sheets (CSS) giver dig mulighed for at definere et elements udseende ved at hænge ind i de attributter, du anvender på det element. Disse attributter kan enten være og ID eller en klasse, og som alle attributter tilføjer de nyttige oplysninger til de elementer, de er knyttet til.
Afhængigt af hvilken attribut du føjer til et element, kan du skrive en CSS-vælger for at anvende de nødvendige visuelle stilarter, der er nødvendige for at opnå udseendet og følelsen for det element og hele hjemmesiden.
Mens enten id'er eller klasser arbejder med henblik på at indhente dem med CSS-regler, har moderne webdesignmetoder fordel for klasser over ID'er, dels fordi de er mindre specifikke og lettere at arbejde sammen med. Ja, du vil stadig finde mange websteder, der bruger ID'er, men disse attributter anvendes mere sparsomt end tidligere, mens klasser har overtaget moderne websider.
Enkelt eller flere klasser i CSS?
I de fleste tilfælde vil du tildele en enkelt klasseattribut til et element, men du er faktisk ikke begrænset til kun en klasse, de er med ID'er. Mens et element kun kan have en enkelt id-attribut, kan du absolut give et element flere klasser, og i nogle tilfælde gør det din side lettere at style og meget mere fleksibel!
Hvis du skal tildele flere klasser til et element, kan du tilføje de ekstra klasser og blot adskille dem med et mellemrum i din attribut.
For eksempel har dette afsnit tre klasser:
Dette ville være teksten i stykket
Dette indstiller følgende tre klasser på afsnitstegnet:
- spot'ens
- Udvalgte
- Venstre
Bemærk mellemrummet mellem hver af disse klasseværdier. Disse rum er, hvad der sætter dem op som forskellige, individuelle klasser. Dette er også grunden til, at klassenavne ikke kan have mellemrum i dem, fordi det ville gøre dem til særskilte klasser. Hvis du f.eks. Brugte "pullquote-featured-left" uden et mellemrum, ville det være en klasse værdi, men eksemplet ovenfor, hvor disse tre ord er adskilt med et mellemrum, sætter dem som individuelle værdier. Det er vigtigt at forstå dette koncept, da du bestemmer hvilke klasseværdier der skal bruges på dine websider.
Når du har dine klasseværdier i HTML, kan du derefter tildele dem som klasser i dit CSS og anvende de stilarter, du vil tilføje. For eksempel.
.pullquote {…}.featured {…}p.left {…}
I disse eksempler vil CSS-deklarationerne og værdierne være indenfor de krøllede seler, hvilket er hvordan disse stilarter vil blive anvendt til den relevante vælger.
Hvis du indstiller en klasse til et bestemt element (for eksempel,p.left), kan du stadig bruge det som en del af en liste over klasser; Vær dog opmærksom på, at det kun vil påvirke de elementer, der er angivet i CSS. Med andre ord, p.left stil gælder kun for afsnit med denne klasse, da din vælger faktisk siger at anvende den på "afsnit med en klasseværdi af" venstre "". I modsætning hertil specificerer de to andre selektorer i eksemplet ikke et bestemt element, så de ville gælde for ethvert element, der bruger disse klasseværdier.
Fordele ved flere klasser
Flere klasser kan gøre det nemmere at tilføje special effekter til elementer uden at skulle oprette en helt ny stil til det element.
Du kan f.eks. Have mulighed for hurtigt at flytte elementer til venstre eller højre. Du kan skrive to klasser
venstre og
ret med bare
flyde: venstre; og
flyde: højre; i dem. Så, når du havde et element, du skal flyde til venstre, ville du blot tilføje klassen "venstre" til sin klasseliste.
Der er dog en fin linje at gå her. Husk at webstandarder dikterer adskillelsen af stil og struktur. Strukturen håndteres via HTML, mens stilen er i CSS. Hvis dit HTML-dokument er fyldt med elementer, som alle har klassenavne som "rød" eller "venstre", som er navne, der dikterer, hvordan elementer skal se frem for, hvad de er, krydser du den linje mellem struktur og stil. Jeg forsøger at begrænse mine ikke-semantiske klassenavne så meget som muligt af denne grund.
Flere klasser, semantik og JavaScript
En anden fordel ved at bruge flere klasser er, at det giver dig mange flere muligheder for interaktivitet.
Du kan anvende nye klasser på eksisterende elementer ved hjælp af JavaScript uden at fjerne nogen af de oprindelige klasser. Du kan også bruge klasser til at definere semantikken for et element. Dette betyder, at du kan tilføje på yderligere klasser for at definere, hvad det element betyder semantisk. Sådan fungerer Microformats.
Ulemper ved flere klasser
Den største ulempe ved at bruge flere klasser på dine elementer er, at det kan gøre dem lidt uhåndterlige at se på og styre over tid. Det kan blive vanskeligt at afgøre, hvilke stilarter der påvirker et element, og hvis nogle scripts påvirker det. Mange af de rammer, der findes i dag, som Bootstrap, gør meget brug af elementer med flere klasser. Denne kode kan komme ud af hånden og svært at arbejde med meget hurtigt, hvis du ikke er forsigtig.
Når du bruger flere klasser, risikerer du også, at stilen til en klasse tilsidesætter en anden stil, selvom du ikke har tænkt dig det. Dette kan så gøre det svært at finde ud af, hvorfor dine stilarter ikke bliver anvendt selv når det ser ud til, at de skal. Du skal være opmærksom på specificitet, selv med de attributter, der anvendes på det ene element!
Ved at bruge et værktøj som webmasterværktøjerne i Google Chrome kan du lettere se, hvordan dine klasser påvirker dine stilarter og undgå dette problem med modstridende stilarter og attributter.
