Klasse kontra ID
Cascading Style Sheets (CSS) er et sprog, der beskriver udseendet og formateringen af et dokument, der er skrevet med et markup-sprog. CSS er meget brugt til at style websider skrevet i HTML. CSS gør det muligt at angive dine egne stilvælgere ud over at anvende stilarter til HTML-elementer. Dette gøres ved hjælp af ID og klassevælgere. Når du angiver en stil for et enkelt unikt element, bruges ID-vælgeren. Når du angiver en stil for en gruppe af elementer, bruges klassevælgeren.
Hvad er en klasse?
I CSS kan klassevælger bruges til at anvende din egen stil på en gruppe elementer. Klassevælgeren bruges til at anvende en specifik stil til et sæt elementer med samme klasse. I CSS identificeres en klassevælger med et punktum (.). Følgende er et eksempel på en klassevælger defineret i CSS.
.my_class {
farve: blå;
font-weight: fed;
}
HTML kan henvise til klassen defineret i CSS ved at bruge attributklassen som vist nedenfor.
Dette er min formatering
Dette er min formatering igen
Som vist ovenfor kan den samme klasse bruges til flere elementer, og et enkelt element kan bruge flere klasser. Når flere klasser bruges i det samme element, indsættes klasserne i klasseattributten afgrænset af et mellemrum som vist nedenfor.
Dette er min formatering ved hjælp af to klasser
Hvad er et id?
I CSS kan ID-vælger bruges til at anvende din egen stil på et enkelt unikt element. I CSS identificeres en ID-vælger med en hash (). Følgende er et eksempel på en ID-vælger defineret i CSS.
my_ID {
farve: rød;
text-align:right;
}
HTML kan henvise til ID-vælgeren defineret i CSS ved at bruge attribut-id'et som vist nedenfor.
Dette er min formatering fra en ID-vælger
ID'er er unikke. Derfor kan hvert element kun have et enkelt ID, og hver side kan kun have et enkelt element med det specifikke ID. ID'er har en vigtig egenskab, som kan bruges med en browser. Hvis sidens URL indeholder en hash-værdi (f.eks. https://myweb.commy_id), vil browseren forsøge automatisk at finde elementet med ID'et "my_id" og rulle på websiden for at vise dette element. Dette er en af grundene til, at siden skal have et enkelt element med det specifikke id, så browseren kan finde det element.
Hvad er forskellen mellem klasse og id?
Selv om både klassevælgeren og ID-vælgeren kan bruges til at anvende din egen stil på elementer på en webside, har de nogle vigtige forskelle. Klassevælgeren kan bruges til at anvende din egen stil på en gruppe af elementer, mens ID-vælgeren bruges til at anvende en stil på et enkelt, unikt element. Når du bruger id'er, kan hvert element kun have et enkelt id, og hver side kan kun have et enkelt element med det specifikke id, men klasse kan bruges til flere elementer, og et enkelt element kan bruge flere klasser. Ydermere kan ID bruges til at rulle en side automatisk for at vise elementet med det ID, men dette er ikke muligt med klassevælgeren.
