Introduktion till id och klasser: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| Rad 1: | Rad 1: | ||
För att på ett bättre sätt kunna styra exakt vilka [[element]] man vill adressera med sina [[CSS-regel|CSS-regler]], brukar man använda sig av [[id]] | För att på ett bättre sätt kunna styra exakt vilka [[element]] man vill adressera med sina [[CSS-regel|CSS-regler]], brukar man använda sig av [[id]] och [[Class|klasser]]. Dessa kan även användas för att adressera element ifrån [[JavaScript]]-kod. 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 [[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 attribut]]et ”<code>[[id]]</code>” för att ange ett specifikt id för ett [[element]]. Dessa id går även att använda i [[CSS-regel|CSS-regler]]. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här: | Om man vill adressera ett enda, specifikt [[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 attribut]]et ”<code>[[id]]</code>” för att ange ett specifikt id för ett [[element]]. Dessa id går även att använda i [[CSS-regel|CSS-regler]]. För att skapa en [[selektor]]-sats som väljer ut ett specifikt id, gör man så här: | ||
| Rad 19: | Rad 19: | ||
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 [[class|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 [[class|klasser]]. | ||
[[class|Klasser]] påminner om [[id]], men till skillnad mot [[id]] kan flera [[element]] tillhöra samma [[class|klass]]. Det gör att man enkelt kan skapa [[CSS-regel|CSS-regler]] som påverkar en hel | [[class|Klasser]] påminner om [[id]], men till skillnad mot [[id]] kan flera [[element]] tillhöra samma [[class|klass]]. Det gör att man enkelt kan skapa [[CSS-regel|CSS-regler]] som påverkar en hel drös av [[element]]. För att sätta- att ett [[element]] tillhör en viss [[class|klass]] använder man sig av [[attribut]]et ”<code>class</code>”. Man kan även sätta att ett [[element]] ska tillhöra flera olika [[class|klass]]er. Då anger man alla [[class|klass]]erna i ett och samma ”<code>class</code>”-attribut, men man särskiljer de olika [[klass]]erna med ett mellanslag. | ||
Låt säga att vi vill skapa ett <code>[[hx|h1]]</code>-element som tillhör två [[class|klasser]]; <code>huvud</code> och <code>topp</code>. För att skapa ett sådant [[element]] gör man så här: | Låt säga att vi vill skapa ett <code>[[hx|h1]]</code>-element som tillhör två [[class|klasser]]; <code>huvud</code> och <code>topp</code>. För att skapa ett sådant [[element]] gör man så här: | ||
Versionen från 18 augusti 2015 kl. 22.55
För att på ett bättre sätt kunna styra exakt vilka 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-kod. 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 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 element. Dessa id går även att använda i CSS-regler. För att skapa en selektor-sats som väljer ut ett specifikt id, gör man så här:
Ovanstående skulle välja ut det 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:
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 drös av element. För att sätta- att ett 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 lägga till klassen så att fler 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å).
Selektorer som väljer ut klasser
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. Det skulle självklart gått bra att använda även en id, istället för en klass i dylika regler, t.ex. Men eftersom en id redan är så specifik den kan bli, den kan ju bara användas en enda gång i varje dokument, så är det onödigt.