10 grundläggande lektioner i CSS

En hemsida är ganska så intetsägande utan bilder och färger. Vi ska nu gå igenom hur man gör för att sätta färg på bakgrunden, och lägga in en bakgrundsbild.

Bakgrundsfärg

När vi hör ordet bakgrund så är det oftast bakgrunden för själva sidan vi i första hand tänker på, det vill säga body. Men en bakgrundfärg kan också anges för andra element, exempelvis olika divblock och tabeller. I guiden om fonter lade vi också till en bakgrundsfärg på texten. Så bakgrund kan betyda mycket. För att ge en färgad bakgrund åt själva dokumentets body så är css-syntaxen följande:

  1. body {background-color: #000;}

Du kanske använder tabeller till data och vill skifta färg i tabellcellerna? Kika då på följande märkningar. Man kan både använda class-attribut som globala värden – allt efter tycke och smak. Här har hela tabellen ett globalt värde: svart bakgrund och vit textfärg.

  1. table {background-color: #000; color:#fff;}

Nu ska vi sätta färg på tabellcellerna. Värdet är globalt.

  1. td {background-color: #ccc; color:#333;}

Vill man göra det lite mer avancerat då är class-attributet en bra hjälp. Först måste du ange en class selector i din stilmall. Observera att detta inte blir ett globalt värde. Css-syntax:

  1. .td1 {background-color: #000; color:#fff;}

HTML-kod:

  1. <table><tr><td class="td1">cellen får nu en svart bakgrundsfärg och vit text</td></tr></table>

Bakgrundsbild

Vill du använda en bakgrundsbild på din webbsida ser css-syntax ut så här.

  1. body {background-image: url(din_bild.jpg);}

Tillsammans med bakgrundsfärg och textfärg:

  1. body {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

Bakgrundsbild i en tabell:

  1. table {background-image: url(din_bild.jpg);}

Tillsammans med bakgrundsfärg och textfärg:

  1. table {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

Bakgrundbild, bakgrundsfärg, och textfärg i tabellcellerna. Globalt värde:

  1. td {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

Som class-attribut:

  1. .td1 {background-color: #000; color:#fff;background-image: url(din_bild.jpg);}

HTML-koden:

  1. <table><tr><td class="td1">cellen får nu en svart bakgrundsfärg, vit text, samt en bakgrundsbild</td></tr></table>

Vill du lägga in en bakgrundsbild i ett div-block?

  1. #(vald ID-selektor) {background-image: url(din_bild.jpg);}

Position, repeat, attachment

Så här långt har vi alltså lagt in en bakgrundsbild, nu ska vi dels positionera bilden, dels bestämma om den ska upprepas samt hur den i så fall ska upprepas, och dels om bilden ska vara fixerad (icke-scrollbar med layouten) eller inte.

Positionera en bild

Deafultläget (grundläget) för en webbläsare är vänsterställt | vänster hörn | högst upp. Det innebär att om man inte formaterar en bild (eller text) så kommer den att lägga sig allra längst upp i det vänstra hörnet. Med css har du alltså själv möjlighet att bestämma utgångsläget för placeringen av din bild. Vi ska kika på vilka alternativ det finns och hur dessa fungerar.

Det finns fem olika koordinater: top, bottom, left, right och center. Du kan även välja att positionera bilden med följande enheter: centimeter (cm), pixlar (px), procent (%) och em. Utgångsläget är alltid från det vänstra övre hörnet – top left. Css-syntax utan enheter:

  1. background-position:top left; Vänstra övre hörnet
  2. background-position:top right; Högra övre hörnet
  3. background-position:center center; Mitten
  4. background-position:bottom left; Vänstra nedre hörnet
  5. background-position:bottom right; Högra nedre hörnet

Css-syntax med procentenheter:

  1. background-position:0% 0%; Vänstra övre hörnet
  2. background-position:50% 50%; Mitten
  3. background-position:100% 100%; Högra nedre hörnet

Css-syntax med pixlar:

  1. background-position:30px 30px; – 30px avstånd från left + 30px avstånd från top
  2. background-position:10px 100px; – 10px avstånd från left + 100px avstånd från top

Upprepa en bild – repeat

Används en bild som bakgrundsbild kan man behöva repetera bilden. Precis som i positioneringen kan man välja hur bilden ska repeteras, eller om den inte ska repeteras. Css-syntax:

  1. background-repeat:no-repeat; – ingen upprepning (defaultläget vänstra övre hörnet)
  2. background-repeat:repeat; – upprepas från left till right och top till bottom
  3. background-repeat:repeat-x; – upprepas endast horisontellt (vänster till höger)
  4. background-repeat:repeat-y; – Upprepas vertikal/lodrätt (top till bottom)

Background attachment

Beroende på hur din bakgrundsbild ser ut kan man ibland behöva få bilden att vara fixerad, det vill säga den ska inte vara scrollbar. Det innebär att det bara är din layout som är rörlig och ligger “ovanpå” bakgrunden. Vill du däremot att bakgrunden ska scrollas tillsammans med din layout går det också bra. Css-syntaxen för båda alternativen:

  1. Background-attachment:fixed; – Bakgrundsbilden är låst och scrollar inte
  2. Background-attachment:scroll; – Bakgrundsbilden är inte låst och scrollar med layouten

Egenskaper för background (bakgrund)

background-color anger bakgrundsfärgen på ett element
background-image ger en bakgrundsbild
background-repeat anger om bakgrunden ska repeteras med följande värden: repeat, no-repeat, repeat-x, repeat-y
background-position
anger bakgrundsbildens position med följande värden: top, right, bottom, left, center
background-attachment
anger om du vill att bakgrunden ska vara fixerad (statisk) eller ej med följande värden: scroll, fixed

Egenskaperna för background kan användas som shorthand declarationgroup och ska då användas i denna ordning:
background-color | background-image | background-repeat | background-attachment | background-position

Css-koden här under ger följande värden: svart bakgrundsfärg, en bakgrundsbild som inte upprepas utan ligger låst i det vänstra övre hörnet.

  1. body {background: #000 url(images/background-image.jpg) no-repeat fixed left top ;}

I lektion sex kommer vi att gå igenom egenskaperna för border. Välkommen dit!

Liknande poster:

5 Comments Add yours

  1. Erik says:

    Hej!
    Tack för en mycket bra guide! Jag har följt den till punkt och pricka och allt fungerar bra, förutom font-size. Jag använder style sheet och jag kan ändra textfärg, länkfärg, bakgrundsfärg osv, men när jag försöker skriva in font-size så fungerar det inte på den text som är skriven innom i mina html doc. Jag kan ju såklart skriva in font-size i varje html doc men jag vill ju använda mitt style sheet 🙂 Jag har skrivit in det på följande sätt (nu skriver jag bara i font-size) i body {font-size:10px} och p { font-size:10px;} men det blir ändå bara standard storlek. Har tittat i bådde chrome, IE och firefox. Vet du vad detta kan bero på? Tack på förhand! /Erik

    1. Erik says:

      det ska alltså stå “krokodilgap höger P krokodilgap” vänster i meningen: “…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. Lena says:

      Hej Erik!
      All css som läggs in i dokumentet prioriteras före stilmallen. Har du möjligtvis angett font-size för speciella div-block i stilmallen? Kika här under:

      #main {background: [...]; padding:[...], font-size:[...];}

      Eller:

      #main p {font-size:[...];}

      Ovanstående css prioriteras för font-size i body, dock ärver de egenskaperna från parent (body).
      Du har angivit body {font-size:10px} och p { font-size:10px;} därför blir all text på sidan lika stor. Body innebär ALL text, inklusive stycken (p), men du har också angivit att dina stycken ska vara 10px. Testa och ta bort font-size i body. Därefter anger du istället fontstorleken för varje element i stilmallen.
      mvh/Lena

  2. Björn Andersson says:

    Ville bara tacka för en riktigt snygg och välskriven guide. Jag snubblade in på din sida mest bara på måfå och har varit fast sedan lunch, så det är ett gott betyg:) Bra jobbat!

    1. Lena says:

      Hej Björn!

      Vad trevligt att du “fastnade” på min sida. Jag hoppas att du fick med dig lite matnyttigt =)
      TACK för berömmet!
      mvh/Lena

Leave a Reply

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