Introduktion till id och klasser: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
(Skapade sidan med 'För att på ett bättre sätt kunna styra exakt vilka HTML-element man vill adressera med sina CSS-regler, brukar man använda sig av id och klasser. Dessa kan även använda...')
 
Ingen redigeringssammanfattning
Rad 1: Rad 1:
För att på ett bättre sätt kunna styra exakt vilka HTML-element man vill adressera med sina CSS-regler, brukar man använda sig av id och klasser. Dessa kan även användas för att adressera element ifrån JavaScript. I fallet med id, så kan det även användas för att adressera fragment i webbsidor.
För att på ett bättre sätt kunna styra exakt vilka HTML-element man vill adressera med sina CSS-regler, brukar man använda sig av id och klasser. Dessa kan även användas för att adressera element ifrån JavaScript. I fallet med id, så kan det även användas för att adressera fragment i webbsidor.
== id ==
== id ==
Om man vill adressera ett enda, specifikt html-element i en CSS-regel, kan man använda sig av id-selektorn. Vi har redan tidigare sett hur man kan använda det globala attributet ”id” för att ange ett specifikt id för ett HTML-element. Dessa id går även att använda i CSS-regler. För att skapa en selektor som väljer ut ett specifikt id, gör man så här:
Om man vill adressera ett enda, specifikt html-element i en CSS-regel, kan man använda sig av id-selektorn. Vi har redan tidigare sett hur man kan använda det globala attributet ”<code>id</code>” för att ange ett specifikt id för ett HTML-element. Dessa id går även att använda i CSS-regler. För att skapa en selektor som väljer ut ett specifikt id, gör man så här:


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
Rad 9: Rad 9:
</syntaxhighlight>
</syntaxhighlight>


Ovanstående skulle välja ut det HTML-element som har id:t ”<code>idnamn</code>” och sätta dess förgrundsfärg till blå. På så vis kan man styra specifikt utseende på enskilda, utvalda element.
Ovanstående skulle välja ut det HTML-element som har id:t ”<code>idnamn</code>” och sätta dess förgrundsfärg till blå. På så vis kan man styra specifikt utseende på enskilda, utvalda element. Till exempel skulle HTML-koden kunna se ut så här:
 
Vad skulle då hända om vi hade följande kod:


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
h1 {
<h1 id="idnamn">En rubrik med en id</h1>
  color: red;
</syntaxhighlight>
}


#idnamn {
== Klasser ==
  color: blue;
Vad gäller id, så är det många som tycker att man ska undvika dem så långt som möjligt. Anledningen till detta är att de är för specifika, då de bara inriktar sig på ett enda unikt element. Vad händer då om man vill ha samma egenskaps-förändringar på två element, eller kanske ännu fler. Ska man skapa ett id för varje? Nej, här finns en bättre lösning och det är klasser.
}
</syntaxhighlight>


Här har vi alltså två CSS-regler. En som säger att alla <code>h1</code>-element ska ha röd färg och en som säger att det elementet som har id satt till ”<code>idnamn</code>” ska ha blå färg. Vad händer nu om jag satt så att ett av mina <code>h1</code>-element har just den id:n? Jo, det finns ett regelverk som anger hur mycket vikt man ska lägga till olika selektorer och den tyngst vägande selektorn trumfar över de lättviktigare selektorerna. Ungefär som i matematiken där t.ex. multiplikation sker före addition. I CSS kan man generellt säga att desto specifikare en selektor är, desto högre vikt har den. En id-selektor är ju jättespecifik, då den enbart väljer ut ett enda element. Därmed har den högst vikt och det är den som ”vinner” i detta fall. Det <code>h1</code>-element som har id:t ”<code>idnamn</code>” kommer alltså att få blå textfärg.
Klasser påminner om id, men till skillnad mot id kan flera element tillhöra samma klass. Det gör att man enkelt kan skapa CSS-regler som påverkar en hel radda av element. För att sätta att ett HTML-element tillhör en viss klass använder man sig av attributet ”<code>class</code>”. Man kan även sätta att ett element ska tillhöra flera olika klasser. Då anger man alla klasserna i ett och samma ”<code>class</code>”-attribut, men man särskiljer de olika klasserna med ett mellanslag.  


Men vad händer om vi har följande CSS-kod?
Låt säga att vi vill skapa ett <code>h1</code>-element som tillhör två klasser; <code>huvud</code> och <code>topp</code>. För att skapa ett sådant element gör man så här:


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
h1 {
<h1 class=”huvud topp”>Två klasser!</h1>
  color: red;
  background-color: yellow;
}
 
#idnamn {
  color: blue;
}
</syntaxhighlight>
</syntaxhighlight>


Här inför vi en ny CSS-egenskap som gör att vi kan sätta bakgrundsfärgen på ett element. Koden ovan anger att alla <code>h1</code>-element ska ha gul bakgrund och röd förgrund (ja, verkligen hemska färgval!), medan det element som har id:n ”<code>idnamn</code>” ska ha blå förgrund. Vad händer nu? Vi har redan konstaterat att id-selektorn väger tyngre än element-selektorn och att den vinner vad gäller ”<code>color</code>”. Men vad händer med ”background-color”? Jo, alla <code>h1</code>-element kommer att få gul bakgrund, även det vars id matchar den andra regeln. Allteftersom reglerna matchar (i stigande viktordning), bygger man på med alla de möjliga egenskaps-förändringar som ett element kan få. I det fall man kommer till en regel som väger tyngre än de tidigare skriver man över de egenskaper som den regeln sätter, men man behåller allt som satts, men inte angivits i denna regel.  
Man kan självklart skapa en klass som enbart används i ett enda element. I det fallet blir klassen unik och fungerar i stort sett som ett id. Det är dock en flexiblare lösning, för nu kan vi ju faktiskt utöka klassen, så att flera element använder den, om det behovet skulle uppstå. På grund av detta förespråkar många att man ska använda klasser i det närmaste genomgående och spara på id till man verkligen behöver dem. Vilket kanske främst är när man ska skapa JavaScript-kod som ska behandla dokumentet på något vis (i de flesta fall fungerar klasser i dessa scenarier också).


I de fall som selektorerna har samma vikt, blir det den som påträffas sist som vinner. Ett par exempel på detta:
Nu ska vi titta på hur man i CSS väljer ut element som ingår i en klass. Klass-selektorer startar alltid med en punkt, följt av klassnamnet. Så om vi skulle vilja skriva en regel för vår topp-klass, skulle det se ut som följer:


<syntaxhighlight lang="html5">
<syntaxhighlight lang="html5">
h1 {
.topp {
   color: blue;
   font-size: large;
}
 
h1 {
color: yellow;
}
}
</syntaxhighlight>
</syntaxhighlight>


Detta skulle resultera i att <code>h1</code>-elementen skulle ha gul text. Först sätts de till blå, sedan när CSS-parsern fortsätter tolka så skrivs färgvalet över med gult.
Ovanstående regel skulle adressera alla element som har klassen ”<code>topp</code>” och de skulle förändra deras textstorlek till en något större storlek än normalstorleken.
 
<syntaxhighlight lang="html5">
h1 {
  color: blue;
  color: yellow;
}
</syntaxhighlight>
 
Precis som i förra exemplet skulle färgen bli gul, för om man sätter samma egenskap flera gånger i en och samma regel, så vinner den sista förekomsten av egenskapen.
 
Det sätt på vilket CSS hanterar flera regler som påverkar ett och samma element gör att vi kan vara mycket flexibla i vårt regelskrivande. Vi kan ange sådant som är generellt för alla element av en typ i en regel som matchar alla, eller många element och därefter, i andra regler, ändra de egenskaper som enbart ska gälla för vissa, specifika element. Detta är bra, inte minst för att vi kan få mycket kortare CSS-filer.

Versionen från 23 augusti 2014 kl. 19.45

För att på ett bättre sätt kunna styra exakt vilka HTML-element man vill adressera med sina CSS-regler, brukar man använda sig av id och klasser. Dessa kan även användas för att adressera element ifrån JavaScript. I fallet med id, så kan det även användas för att adressera fragment i webbsidor.

id

Om man vill adressera ett enda, specifikt html-element i en CSS-regel, kan man använda sig av id-selektorn. Vi har redan tidigare sett hur man kan använda det globala attributet ”id” för att ange ett specifikt id för ett HTML-element. Dessa id går även att använda i CSS-regler. För att skapa en selektor som väljer ut ett specifikt id, gör man så här: 

#idnamn {
  color: blue;
}

Ovanstående skulle välja ut det HTML-element som har id:t ”idnamn” och sätta dess förgrundsfärg till blå. På så vis kan man styra specifikt utseende på enskilda, utvalda element. Till exempel skulle HTML-koden kunna se ut så här: 

<h1 id="idnamn">En rubrik med en id</h1>

Klasser

Vad gäller id, så är det många som tycker att man ska undvika dem så långt som möjligt. Anledningen till detta är att de är för specifika, då de bara inriktar sig på ett enda unikt element. Vad händer då om man vill ha samma egenskaps-förändringar på två element, eller kanske ännu fler. Ska man skapa ett id för varje? Nej, här finns en bättre lösning och det är klasser.

Klasser påminner om id, men till skillnad mot id kan flera element tillhöra samma klass. Det gör att man enkelt kan skapa CSS-regler som påverkar en hel radda av element. För att sätta att ett HTML-element tillhör en viss klass använder man sig av attributet ”class”. Man kan även sätta att ett element ska tillhöra flera olika klasser. Då anger man alla klasserna i ett och samma ”class”-attribut, men man särskiljer de olika klasserna med ett mellanslag.

Låt säga att vi vill skapa ett h1-element som tillhör två klasser; huvud och topp. För att skapa ett sådant element gör man så här: 

<h1 class=”huvud topp”>Två klasser!</h1>

Man kan självklart skapa en klass som enbart används i ett enda element. I det fallet blir klassen unik och fungerar i stort sett som ett id. Det är dock en flexiblare lösning, för nu kan vi ju faktiskt utöka klassen, så att flera element använder den, om det behovet skulle uppstå. På grund av detta förespråkar många att man ska använda klasser i det närmaste genomgående och spara på id till man verkligen behöver dem. Vilket kanske främst är när man ska skapa JavaScript-kod som ska behandla dokumentet på något vis (i de flesta fall fungerar klasser i dessa scenarier också).

Nu ska vi titta på hur man i CSS väljer ut element som ingår i en klass. Klass-selektorer startar alltid med en punkt, följt av klassnamnet. Så om vi skulle vilja skriva en regel för vår topp-klass, skulle det se ut som följer: 

.topp {
  font-size: large;
}

Ovanstående regel skulle adressera alla element som har klassen ”topp” och de skulle förändra deras textstorlek till en något större storlek än normalstorleken.

Hämtad från "https://webbling.se/index.php?title=Introduktion_till_id_och_klasser&oldid=123"