Cascading Style Sheets definere et websideelements udseende ved at tilslutte de attributter, du anvender på det element. Disse attributter kan enten være et 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 nødvendige visuelle stilarter, der er nødvendige for at opnå udseendet og følelsen af dette element og hjemmesiden som en helhed.
Mens enten id'er eller klasser fungerer med det formål at tilslutte sig dem med CSS-regler, moderne webdesign metoder favoriserer klasser frem for id'er, dels fordi de er mindre specifikke og lettere at arbejde med generelt.
En eller flere klasser i CSS?
I de fleste tilfælde tildeler du et enkelt klasseattribut til et element, men du er faktisk ikke begrænset til kun en klasse, som du er med ID'er. Mens et element kan kun have en enkelt ID-attribut, du kan give et element flere klasser, og i nogle tilfælde gør det din side lettere at style og meget mere fleksibel.
Hvis du har brug for at tildele flere klasser til et element, skal 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 afsnittet
Dette indstiller følgende tre klasser på afsnittet:
- Pullquote
- Fremhævet
- Venstre
Læg mærke til mellemrummet mellem hver af disse klasseværdier. Disse rum er det, der sætter dem op som forskellige, individuelle klasser. Dette er også grunden til, at klassenavne ikke kan have mellemrum, fordi det ville indstille dem som separate klasser.
Når du har dine klasseværdier i HTML, kan du derefter tildele disse som klasser i din CSS og anvende de typografier, du vil tilføje. For eksempel.
.pullquote {... }
.featured {... }
s. venstre {... }
I disse eksempler vises parvise CSS-erklæringer og værdier inde i de krøllede seler, hvilket er, hvordan disse stilarter vil blive anvendt på den relevante vælger.
hvis du indstil en klasse til et bestemt element (for eksempel, venstre), kan du stadig bruge det som en del af en liste over klasser; Vær dog opmærksom på, at det kun påvirker de elementer, der er specificeret i CSS. Med andre ord, venstre stil gælder kun for afsnit med denne klasse, da din vælger faktisk siger at anvende den på "afsnit med en klasseværdi på venstre"I modsætning hertil angiver de to andre vælgere i eksemplet ikke et bestemt element, så de vil gælde for ethvert element, der bruger disse klasseværdier.
Flere klasser, semantik og JavaScript
En anden fordel ved at bruge flere klasser er, at det øger interaktivitetsmulighederne.
Anvend nye klasser på eksisterende elementer ved hjælp af JavaScript uden at fjerne nogen af de indledende klasser. Du kan også bruge klasser til at definere semantik af et element - tilføj yderligere klasser for at definere, hvad elementet betyder semantisk. Denne tilgang er hvordan Mikroformater arbejder.
Fordele ved flere klasser
Lagdeling af flere klasser kan gøre det lettere at tilføje specielle effekter til elementer uden at skulle oprette en helt ny stil til det element.
For eksempel for at flyde elementer til venstre eller højre kan du skrive to klasser:
venstre.
og.
ret.
med bare.
flyde: venstre;
og.
flyde: højre;
i dem. Derefter, når du havde et element, du har brug for at flyde til venstre, tilføjede du blot klassen "venstre" til sin klasseliste.
Der er dog en fin linje at gå her. Husk, at webstandarder dikterer adskillelsen af stil og struktur. Struktur håndteres ved hjælp af HTML, mens stil er i CSS. Hvis dit HTML-dokument er fyldt med elementer, der alle har klassenavne som "rød" eller "tilbage", som er navne der diktere hvordan elementer skal se ud i stedet for hvad de er, krydser du grænsen mellem struktur og stil.
Ulemper ved flere klasser
Den største ulempe ved at bruge flere samtidige klasser på dine elementer er, at det kan gøre dem lidt besværlige at se på og styre over tid. Det kan blive svært at bestemme, hvilke stilarter der påvirker et element, og om nogen scripts påvirker det. Mange af de rammer, der er tilgængelige i dag, som Bootstrap, bruger tungt 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 for en klasse tilsidesætter stilen for en anden. Denne kollision kan derefter gøre det vanskeligt at finde ud af, hvorfor dine stilarter ikke anvendes, selv når det ser ud til, at de burde. Bliv 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.