Span- och div-element

När vi börjar designa utseende och layout på våra sidor, hamnar vi ofta i situationen att vi vill märka upp något för vilket det inte finns någon passande tagg. Detta handlar oftast om innehåll som vi bara vill förändra utseendet på. Det vill säga, sådant som inte har någon speciell semantisk betydelse. För att lösa dylika situationer så finns det ett par taggar att ta till. Den ena är tänkt för inline-element och den andra för block-element.

<span>

För inline-material använder man sig av <span>. Denna tagg visar att något har en spännvidd som sträcker sig över dess underelement. Eftersom detta är ett inline-element, så kommer inte layouten att påverkas, förutom i de fall den CSS du kopplar till elementet påverkar något layoutmässigt.

Ett exempel på användningen:

See the Pen jPpGJX by Patrik Grip-Jansson (@PGJ) on CodePen.

Här skapar vi ett span-element med textinnehållet ”vit”. Vi kopplar även elementet till en klass, som heter ”vit”. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig semantisk betydelse.

Med hjälp av denna klasskoppling kan vi sedan skriva en CSS-regel som ställer om färgen, t.ex.:

See the Pen jPpGJX by Patrik Grip-Jansson (@PGJ) on CodePen.

<div>

För att skapa icke-semantiska block-element kan vi använda oss av div-taggen. Div är en förkortning av ”division”, alltså indelning. Vi delar in element-innehållet för sig själv och visar att det skiljer sig ifrån annat innehåll. Resultatet kommer att bli ett block-element och det har därmed alla CSS-egenskaper som gäller för dessa tillgängliga.

Ett enkelt exempel:

See the Pen QPgqdN by Patrik Grip-Jansson (@PGJ) on CodePen.

Detta skapar en eget blockelement, som innehåller ett p-element, som i sin tur har textinnehållet ”En egen liten låda”. div-elementet tilldelas även klassen ”låda”, vilket gör att vi enkelt kan påverka dess utseende med hjälp av lite CSS:

See the Pen eNjGqO by Patrik Grip-Jansson (@PGJ) on CodePen.

Ovanstående CSS-regel kommer att skapa en enkel layout för de element som använder sig av ”låda”-klassen. I detta fall kommer vi att ändra på höjd och bredd, samt att vi sätter såväl förgrunds- som bakgrundsfärg. Detta gör att det kommer att se ut som en egen liten ”låda” eller box (hur det här fungerar kallas för "boxmodellen" och vi återkommer straxt till det).

Att ange width och/eller height

I vår CSS kan vi alltså styra vilken bredd och höjd ett element ska ha. Detta gör att vi kan skapa en layout för vår sida. Det finns många olika måttenheter vilka man kan använda för att ange bredd och höjd (vi tittar på flera av dessa i nästa sektion).

I exemplet ovan har vi använt oss av px som måttenhet. Detta är mer eller mindre synonymt med en pixel, det vill säga det minsta möjliga elementet på en bildskärm. Skulle vi visa exemplet på en full-HD-skärm, som är 1920x1080 pixlar stor, skulle alltså lådan ta upp ca 20 % av skärmens bredd.

Att utelämna width och/eller height

Om man inte anger någon höjd eller bredd kommer webbläsaren att använda ett par specifika förval:

• För bredd är det 100 % av föräldraelementet som gäller, dvs webbläsaren fyller ut all tillgänglig area i bredd. Detta kan dock påverkas av inställningar i föräldraelementet, t.ex. så kan padding göra att inte all yta kan utnyttjas.

• För höjd så försöker webbläsaren räkna ut hur mycket plats som behövs för att täcka allt innehåll inuti elementet. Det vill säga förvalet är att göra blocket precis så högt att allt innehåll får plats i det.

Block är grunden till layout

Det vi just nu gått igenom, ligger till grund för all layout med CSS. Vi kommer dock att behöva lite mer kunskap om CSS-egenskaper innan vi kan åstadkomma något snyggare än detta...

Nästa aktivitet

Måttenheter i CSS