Grunder i CSS

CSS är en typ av mallar som kan användas när du bygger din hemsida, spel eller annat online och har många fördelar. Cascading Style Sheets betyder förkortningen och en översättning till svenska skulle kunna vara stilmallar. Med CSS kan du ha information om hur text, länkar och menyer ska se ut och fungera i en separat fil och sedan åkalla dessa filer från den sida du jobbar med. Detta betyder att du inte behöver skriva samma kod många gånger, utan kan återanvända samma formatmall bara genom att specificera på den sub-page du jobbar med vilken formatmall du vill använda specifikt för denna sida, eller en sektion på denna sida. Följden blir att det går snabbare att ladda sidan och om du vill göra en ändring i formatet på många sidor behöver du bara ändra på ett ställe – i CSS-mallen.

Ett exempel gör det lättare att förstå. En CSS-mall kan vara mycket enkel. Säg att du vill att alla rubriker med taggen h1 (en given tagg i HTML-språket) på en sida ska vara 20 pixlar. I CSS-mallen skriver du då

h1 { font-size: 20px; }

Sedan sparar du denna enkla rad i ett dokument med fil-ändelsen *.css som till exempel “rubrik.css”. På den sida där du vill att denna formatmall ska gälla skriver du sedan till exempel under head-taggen på sidan, inom vinkelparenteser istället för hakparenteser:

[link href=”rubrik.css” rel=”stylesheet” type=”text/css”]

Nu kommer css-filen “rubrik.css” anropas i dokumentet och när det finns rubrik i HTML-koden med en h1-tagg kommer denna rubrik ha storleken 20 pixlar. Pixlar är ett mått som är relativt till skärmupplösningen på datorn, på ett fönster eller en enhet. Om ett fönster har upplösningen 200×100 kommer en pixel se mycket större ut än om fönstret har skärmupplösningen 400×200, vilket är en sak som kan komma väl till pass när du sedan programmerar för olika enheter och webbläsare.

 

Bakgrundsbilder och CSS

CSS är mycket väl lämpat för att arbeta med bakgrundsbilder och du kan på ett mycket snabbt sätt ändra egenskaperna och bilderna för flera av undersidorna på hemsidan på en och samma gång. Du kan genom klasser jobba med flera olika varianter inom samma stilmall, eller ha en grundmall och specificera undantag på respektive undersida – med CSS kan du frambringa samma formatering på en mängd olika sätt beroende på vad du föredrar. Vad du föredrar beror ofta på vad du brukar göra och tycker är enklast att göra men kan också vara relaterat till vad som är mest effektivt och går snabbast att ladda.

När det gäller bakgrundsbilder finns det en del alternativ som du kan använda. Standard är att bakgrundsbilden upprepas flera gånger, vilket gör att en liten bild kan fylla sidan med ett fint mönster utan att ta knappt någon plats alls. Om du vill ha en större bild, till exempel ett fotografi, vill du säkert inte upprepa bilden utan endast ha den en gång. I sådant fall skriver du följande kod i css-mallen:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: no-repeat;

}

där “fotoavminfinahund.jpg” är den bild som du vill ha som bakgrund. Om du vill att bilden ska repeteras flera gånger om skriver du helt sonika

body {

background-image: url(fotoavminfinahund.jpg);

}

utan att specificera upprepning eller inte.

Du kan med css specificera närmare hur du vill ha bakgrunden, till exempel att du vill att bilden ska repeteras endast åt höger, men inte nedåt, i x-led men inte i y-led. I sådant fall skulle koden bli:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: repeat-x;

}

På samma sätt, om du vill att bilden ska repeteras nedåt, men inte till höger, ändrar du bara till “repeat-y”:

body {

background-image: url(fotoavminfinahund.jpg);

background-repeat: repeat-y;

}

En annan praktisk funktion är att centrera bakgrundsbilden. Då använder du dig av “background-position”. I det fall du vill ha bilden centrerad i båda led blir koden:

body {

background-image: url(fotoavminfinahund.jpg);

background-position: center center;

}

 

Utforma punktlista i CSS

 

CSS kan användas för att göra dina punktlistor och numrerade listor roligare att titta på och tydligt uppställda. Punktlistor går under taggen ul och numrerade listor går under taggen ol. En punktlista skiljer sig från en numrerad lista genom att en numrerad lista ändrar sig för varje listelement. I en numrerad lista kommer först siffran “1.” eller romerska siffran “I.” och sedan kommer “2.” respektive “II.” alternativt bokstäver som “A.” och “a.” respektive “B.” och “b.”.

Numrerade listor

Numrerade listor specificeras i CSS-mallen på följande sätt:

Vill du ha vanliga siffror (1, 2, 3) använder du

ol { list-style-type: decimal; }

Vill du ha stora romerska bokstäver (I, II, III) använder du

ol { list-style-type: upper-roman; }

och vill du ha små (i, ii, iii) använder du

ol { list-style-type: lower-roman; }

Vill du ha stora bokstäver (A, B, C) använder du

ol { list-style-type: upper-alpha; }

och vill du ha små bokstäver (a, b, c) använder du

ol { list-style-type: lower-alpha; }

Punktlistor

Punkterna i punktlistorna kan du formatera på många olika sätt och göra i stort sett hur du vill. Om du vill ha en standardpunkt är css-koden för detta:

ul { list-style-type: disc; }

I HTML-koden kommer sedan varje listelement med taggen “li” föregås av en punkt.

Om du vill ha en cirkel blir koden:

ul { list-style-type: circle; }

Vill du själv bestämma symbol för punktlistan kan du använda din egen bild (här kallad “bildpunkt.gif”) och använda denna kod i CSS-mallen:

ul { list-style-image: url(bildpunkt.gif);}

Vill du sedan ha en punkt på ett ställe och din egen bild på ett annat ställe kan du använda dig av klasser för att specificera detta. Gör en klass med punkter

[.punktpunkter { list-style-type: disc; }]

och en annan med din bild

[.bildpunkter{ list-style-image: url(bildpunkt.gif);}]

och använd sedan respektive klass där du vill ha det i HTML-koden, före listelementen, med

ul class=”punktpunkter”

respektive

ul class=”bildpunkter”

Leave a Reply

Your email address will not be published. Required fields are marked *