Span- och div-element: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
Ingen redigeringssammanfattning
Ingen redigeringssammanfattning
Rad 1: Rad 1:
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 som inte har någon speciell semantisk betydelse, kanske bara för att vi vill förändra utseendet på visst innehåll. För att lösa dylika situationer så finns det ett par taggar att ta till. Den ena är tänkt för inline-innehåll och den andra för block-innehåll.
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 som inte har någon speciell [[semantik|semantisk]] betydelse, kanske bara för att vi vill förändra utseendet på visst innehåll. För att lösa dylika situationer så finns det ett par [[tagg]]ar att ta till. Den ena är tänkt för inline-innehåll och den andra för block-innehåll.
== <code>&lt;span></code> ==
== <code>&lt;[[span]]></code> ==
För inline-material, använder man sig av <code>&lt;span></code>, denna tag visar att något har en spännvidd och sträcker sig över element-innehållet. Ett exempel på användningen:
För inline-material, använder man sig av <code>&lt;[[span]]></code>, denna tag visar att något har en spännvidd och sträcker sig över element-innehållet. Ett exempel på användningen:


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


Här skapar vi ett span-element med textinnehållet ”grön”. Vi kopplar även elementet till en klass, som även den heter ”grön”. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig semantisk betydelse.  
Här skapar vi ett <code>[[span]]</code>-element med textinnehållet ”grön”. Vi kopplar även elementet till en [[klass]], som även den heter ”grön”. Även om klassnamnet förmedlar något slags information till oss, så har det ingen egentlig [[semantik|semantisk]] betydelse.  


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


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


== <code>&lt;div></code> ==
== <code>&lt;[[div]]></code> ==
För att skapa icke-semantiska block-element kan vi använda oss av <code>div</code>-taggen. <code>Div</code> ä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. Ett enkelt exempel:
För att skapa icke-semantiska [[block-element]] kan vi använda oss av <code>[[div]]</code>-taggen. <code>[[Div]]</code> ä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. Ett enkelt exempel:


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


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


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


Ovanstående CSS-regel kommer att skapa en enkel layout för de element som använder sig av ”<code>låda</code>”-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”. Det vi just nu 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...
Ovanstående [[CSS-regel]] kommer att skapa en enkel layout för de [[element]] som använder sig av ”<code>låda</code>”-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”. Det vi just nu 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]]
Nästa aktivitet: [[Måttenheter i CSS]]

Versionen från 29 augusti 2014 kl. 22.04

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 som inte har någon speciell semantisk betydelse, kanske bara för att vi vill förändra utseendet på visst innehåll. För att lösa dylika situationer så finns det ett par taggar att ta till. Den ena är tänkt för inline-innehåll och den andra för block-innehåll.

<span>

För inline-material, använder man sig av <span>, denna tag visar att något har en spännvidd och sträcker sig över element-innehållet. Ett exempel på användningen:

<p>Denna text är <span class=”grön”>grön</span>.</p>

Här skapar vi ett span-element med textinnehållet ”grön”. Vi kopplar även elementet till en klass, som även den heter ”grön”. Ä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.:

.grön {
  color: green;
}

<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. Ett enkelt exempel:

<div class=”låda”><p>En egen liten låda.</p></div>

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

.låda {
  width: 200px;
  height: 40px;
  background-color: blue;
  color: white;
}

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”. Det vi just nu 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