⇓ OBS! ⇓

Den där blå remsan nere på botten av sidan innehåller en HTML & CSS redigerare och fungerar så här – om du vill visa/gömma redigeraren kan du göra det genom att klicka på den blå remsan där det står “Klicka här för att visa/gömma redigerare” – klicka på fliken medtexten “HTML Redigerare” och skriv in din HTML, klicka på fliken med texten “CSS Redigerare” och skriv in din CSS och för att se resultat klickar du på fliken där det står “Resultat visas här”.

Det här artikeln är en del av en serie där vi ska skapa en webbsida, idag ska vi gå igenom CSS grunder och i nästa börjar vi bygga på sidan. I Del 1 gick vi igenom HTML grunder.

 

HTML är för innehåll

HTML var aldrig avsedd att innehålla taggar för att formatera dokumentet. HTML skapades för att definiera innehållet i ett dokument, som:

När taggar som <font> och färgattribut mm. sattes till HTML 3.2-specifikationen, så började det bli ohållbart för webbutvecklare. Utveckling av stora webbplatser där typsnitt och färginformation sattes till varenda enskild sida och dess beståndsdelar gjorde så att det blev jättekrångligt och mycket kostsamt. För att lösa problemet, skapade World Wide Web Consortium (W3C) CSS, och i HTML 4.0, kan all formatering tas bort från HTML-dokumentet, och lagras i en separat CSS-filer.

 

Alla webbläsare stöder CSS idag.

CSS Sparar en hel del arbete! CSS definierar HUR HTML-element ska visas. Stilar sparas normalt i externa .css filer och kallas för stilmallar, med dom kan du ändra utseende och layout på alla sidor i en webbplats, bara genom att redigera en enda fil!

 

Det finns tre sätt…

Det finns tre olika sätt att sätta in en stilmall: extern-, intern -stilmall och inline stil.

 

Extern stilmall – länkning

En extern stilmall är perfekt när stilen tillämpas på många sidor. Med en extern stilmall, kan du ändra utseendet på en hel webbplats genom att ändra en enda fil, och det gör du genom att stilmallen som innehåller formateringen kopplas till alla de sidor som reglerna ska gälla för. Namnet på stilmallen måste ha filtilläget .css och du länkar till stilmallen mellan <head> taggarna i HTML-dokumentet. Den här länkar till stilmallen style.css i mappen css:

Stilmallen kopplas med raden:

Det viktiga i länken är rel=”stylesheet” som anger hur den länkade stilmallen är relaterad till dokumentet och href=”sökväg-till-css-mall” den sista type=”text/css” kan man hoppa över om man använder HTML5, vilket man gör genom att ange dokument typ som <!DOCTYPE html>.

Du kan koppla flera externa CSS-mallar till samma dokument. Om samma selektorer förekommer i båda mallarna men med olika formatering gäller den mall som angivits senast i radvis ordning. I exemplet nedan gäller alltså style2.css före style.css :

Den här metoden är effektivast och ska användas i första hand, för då uppfylls målet med att separera innehåll och struktur i dokumenten

 

I dokumentets <head>

En intern stilmall ska användas när ett dokument har en unik stil, och du definierar interna stilar mellan <head> taggarna, och innanför anger du <style> taggen, så här:

Om formateringen ska ändras måste det utföras i varje enskilt dokument som använder formateringen. Här skrev jag in attributen type=”text/css” men den behövs inte längre i och med HTML5.

 

Som attribut i HTML-element – inline

För att använda inline stil, måste du lägga till style attribut till relevant tagg.

Så här kan koden se ut när rubriken <H1> formateras direkt i elementet:

Med inline style förlorar man många av fördelarna med en stilmall, för då blandar man innehåll med presentation och meningen med CSS är ju att man ska separera stil från innehåll och struktur, så du får använda den här metoden sparsamt! Tänk på att det blir också rörigt och det blir svårt att läsa dokumentet och det resulterar i längre laddningstid för webbläsaren.

 

Deklerationer, selektorer, egenskaper och värden

CSS är ett programmeringsspråk som skrivs som en samling regler, och en CSS-regel består av en selektor och en deklarations block:

Bild: CSS selektor med egenskap och värde blir en deklaration
Bild: CSS selektor med egenskap och värde blir en deklaration

Selektorn pekar på det HTML-elementet som du vill styla, och varje deklarations-block kan innehålla en eller flera deklarationer avgränsade med ett semikolon, och varje deklaration innehåller en egenskap och ett värde, åtskilda av ett kolon. En CSS deklaration slutar alltid med ett semikolon, och deklarationsgrupper omges av klammerparenteser:

CSS deklaration - klammerparanteser och semikolon
Bild: CSS deklaration – klammerparanteser och semikolon

 

 

Indentering

Regeln i ovan diagram är indenterad så att den blir enklare att läsa:

…istället för:

Om det skulle vara en massa deklarationer skulle det annars bli väldigt svårt att se vad som är vad.

 

CSS kommentarer

Man använder kommentarer för att förklara koden, och kan hjälpa när man redigerar källkoden vid ett senare tillfälle. En CSS kommentar börjar med / * och avslutas med * /. Kommentarer kan också sträcka sig över flera rader:

OBS! Tänk på att det är viktigt att avsluta kommentaren för annars läses inte koden som kommer efter.

 

CSS selektorer

CSS-selektorer tillåter dig att välja och manipulera HTML-element (s). Selektorer används för att hitta/välja HTML-element baserat på deras id, klass, typ, attribut, värde på attribut och mycket mer.

 

Element selektorer

Elementet selektorer väljer element baserade på elementnamn/tagg, d.v.s. att du kan välja alla <p> element på en sida så här: (alla <p> element kommer att vara centrerade, med en grön textfärg)

 

ID selektorer

ID-selektorer använder ID-attribut i en HTML-tagg för att hitta ett specifikt element. Ett id måste vara unikt inom en sida, så du bör endast använda id selektorer när du har ett enda, unikt elementet. För att rikta in på ett element med ett visst id, skriv en hash # tecken, följt av ID strängen för elementet. Stilen regeln nedan kommer att tillämpas på HTML-element med id=”min-huvudrubrik”:

 

Klass selektorer

En klass selektor hittar element med en specifik klass. Klasselektorer använder HTML-klass attribut. För att välja ett element med en specifik klass, skriv en punkt, följt av namnet på klassen. I exemplet nedan, får alla HTML-element med class=”min-center” kommer att vara centrerad:

Du kan också ange att endast vissa HTML-element skall påverkas av en klass. I exemplet nedan, alla div element med class=”box” kommer att få en specifik bredd och höjd medan andra utan klassen inte påverkas av den:

 

Samla selektorer

I stilmallar blir det ofta så att element får samma stil:

För att minimera koden kan du gruppera selektorer genom att separera dom med kommatecken ( , ):

 

Den närmsta och mest specifika stilen gäller

Om flera egenskaper har fastställts för samma selektor på olika ställen, kommer värdena ärvas från den som är mest specifik. Låt oss t.ex. anta att en extern stilmall har följande egenskaper för h1 element selektorn:

och att en intern stil också egenskapen color för h1:

Om då sidan med den inre stilen dessutom länkar till den externa stilmallen, kommer h1 stil att bli:

Margin-left är ett arv från den externa formatmallen och färgen ersättas med interna stilmall. Att CSS är Cascading, betyder att reglerna har en turordning, och gäller enligt följande lista:

  1.  – HTML-formatering (är förlegad och man bör skilja på innehåll och stil)
  2.  – CSS-formatering direkt i HTML-element
  3.  – CSS-formatering i dokumentets <head>
  4.  – CSS-formatering i extern CSS-mall

Börja formateringen i en extern CSS-mall som du kopplar till dina HTML-dokument. Om du sen vill ange specifika regler lokalt i ett dokument använder du CSS direkt i dokumentet. Om någon del av dokumentet ska avvika från övrig CSS-formatering anger du detta direkt i HTML-elementet.

Tänk på! Du bör vara så ospecifik som du kan när du väljer element. Man gör det för att ju mer specifik man är destå mer problem får man med att hitta var man ”skriver över” en regel.

 

Flera Stilar kommer att cascade ner till ett

Vilken stil kommer att användas när det finns mer än en stil som anges för ett HTML-element? Håkon Wium Lie (CSS medskapare) definierar ”cascade” i sin doktorsavhandling om CSS som ”Processen att kombinera flera stilmallar och lösa konflikter mellan dem”.

Generellt kan vi säga att alla stilar kommer att ”Cascade” in i en ny ”virtuell” stilmall av följande regler, där nummer 4 har högst prioritet:

  1.  – Webbläsar standard
  2.  – Extern stilmall
  3.  – Intern stilmall (i huvudsektionen)
  4.  – Inline stilen (inuti ett HTML-element)

 

”Förälder, barn, syskon” förhållande

Ett HTML-dokument är en trädstruktur uppbyggd av nästlade element. Jag kommer att ofta använda utrycket barn till-, syskon till- eller förälder till- element, och det betyder att:

 

Måttenheter

Man anger måttenheter för bredd, höjd och en storlekar, och måttenheter är en av dom viktigaste värdena som du kommer att använda i varje projekt. Den finns ett antal olika typer av värden:

Enhet Förklaring
em Är lika med den aktuella teckenstorleken för elementet som det gäller, d.v.s. att om t.ex. element X har ett angivet typsnitts storlek på 12 px då är då ”2em” 24 px för element X och dess underordnade (barn till X) element. Så den anpassar sig automatiskt till typsnitt som läsaren använder i sin webbläsare. Du får dock vara försiktig, för om du har deklarerat en hel massa av längdvärden som använder em på många olika element , och ändrar en enda teckenstorlek kan det potentiellt förstöra hela layouten. (du kan ta en titt på Wikipedia om em)
rem Rem enhet eller ”root em”, har ganska bra webbläsare stöd: IE9 +, FF3.6 +, Chrome, Safari 5 +, och Opera 11.6+. Rem låter dig basera dina em enheter på en ”root” enhet som är <html> element, och då behöver du inte oroa dig för att ändra på font-size.
% Anger bredd i procent i förhållande till överordnad element. Väldigt bra för responsiv design, då den alltid är en procentuell del av dess förälder.
cm Anger bredd i centimeter, används väldigt sällan om inte aldrig för den är inte anpassad för webben som px och em.
in Står för tum (inch)
OBS !Det finns en massa andra måttenheter men dom rekommenderade enheterna är em, rem, px och %

 

I nästa del går vi igenom CSS styling.

 

 

Länkar:

CSS Reference

Skapa din första webbsida – CSS grunder

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *

%d bloggare gillar detta: