10 grundläggande lektioner i CSS

För att göra listorna lite mer attraktiva kan du styla dessa med css. Det finns ett flertal listegenskaper att använda. Vi ska börja lektionen med att kika på hur man kan definiera den odefinierade – unordered- listan <ul>.

Unordered lists – odefinierade listor

Ul betyder unordered list och li list item. När du gör odefinierade listor kan Du välja mellan dessa olika listtyper:
decimal | circle | square | disc | none | lower-roman | lower-alpha | upper-alpha | upper-roman.
Egenskaperna för dessa värden lägger du in i denna kod:

  1. ul {list-style-type:square;}

Vill du positionera listan kan du använda dig av två egenskaper – inside eller outside. Outside är grundläget för alla listor men vill du skapa ett indrag för listan anger du värdet inside – du får då en marginal från vänsterkanten. Css-syntax:

  1. ul.inside {list-style-position:inside}
  2. ul.outside {list-style-position:outside}

Ordered list – ordnad lista med siffror eller bokstäver

När vi vill lista en uppräkning som exempelvis antal kommentarer använder vi en ordnad lista . I sin enklaste form ser selektorn ut så här olol li. Men vi kan ju ange några egenskaper om vi vill, exempelvis dessa:

  1. ol {list-style-type:upper-alpha;}
  2. ol {list-style-type:lower-roman;}

W3C ger ytterligare exempel på hur man kan specificera listorna – både som oordnad och ordnad lista. Kika på koderna här under:

  1. ul.circle {list-style-type:circle}
  2. ul.square {list-style-type:square}
  3. ol.upper-roman {list-style-type:upper-roman}
  4. ol.lower-alpha {list-style-type:lower-alpha}

Läs mer i html-guiden om att göra listor.

Egenskaper för listor

list-style
anger att det är lista med märkning som ska användas
list-style-type

anger vad för typ av listmärkning som ska användas, ex: square, circle, disc, decimal, upper-alpha, upper-roman, lower-alpha, lower-roman, none
list-style-image
anger att listan ska ha en bild vid varje listmärkning istället för ovanstående listmärken.
list-style-position
anger var listmärkningen ska placeras i listan, ex: outside, inside

Egenskaperna för en lista kan användas som short hand declarationgroup och ska då skrivas i följande ordning: list-style-type | list-style-position | list-style-image

Listbullets – använda bild i listan

Du kan också välja att använda en bild. Då ser märkningen i sin enklaste form ut så här. Observera att koden är skriven som short hand declaration.

  1. ul {list-style-type:none;background: url(images/bullet.gif);}

Inte oväntat så läser inte alla webbläsare in koden på samma vis – skillnaden mellan Firefox, Chrome, Safari mot IE och Opera är att de två sistnämnda har en tendens att positionera bilden något högre än de tre första webbläsarna. Av den anledningen kan det vara bra att positionera vår bild i listan så den ligger snyggt och lika i alla webbläsare, men då måste vi ytterligare lägga till några egenskaper och värden:

  1. li {list-style-type:none; background: url(images/pages.gif) no-repeat 5px .20em; padding:0px 0px 0px 30px;}

Med url(images/pages.gif) no-repeat 5px .20em; anger du först att bilden inte ska repeteras, och med värdet 5px .20em; positionerar du sedan bildens förhållande till baslinjen på listan, det vill säga uppåt, nedåt, utåt eller inåt. Med padding:0px 0px 0px 30px; anger du sedan förhållandet mellan bilden och innehållet i listan. Padding 30px ger innehållet/texten/länken i listan en indragning från vänster på 30px bilden ej medräknad. Hade värdet varit 0px så hade innehållet i listan hamnat ovanpå bilden.

  • Här har jag alltså angett padding:0px;

Om man ska använda en bild eller ta bort listmarkeringen i en oordnad lista (ul) måste man ange list-style-type:none;. För att också få listan crossbrowser måste margin och padding i ul definieras som 0px. Vad det gäller själva listan li så ska man inte låta bilden repeteras – vi lägger då till no-repeat. Använd egenskaperna 5px .20em; för att positionera bilden och padding:0px 0px 0px 30px; för att positionera listans innehåll i förhållande till bilden (eller innehållet i listan utan bild). Normal css-syntax utan short hand:

  1. ul {
  2. list-style-type:none;
  3. padding:0px;
  4. padding:0px
  5. }
  6. li {
  7. background-image:url(images/page.gif);
  8. background-repeat:no-repeat;
  9. background-position:5px .20em;
  10. padding-left:30px;
  11. }

Styla definition lists – definierade listor

Vi ska nu titta på hur du kan formatera dina definierade listor. Vi ska använda mitt exempel men lägga till lite mer text och använda oss av css för att ge listan ett mer attraktivt utseende.

dl {margin: 0; padding: 0; width:500px;}
dt {margin:0; padding:0.4em;font: bold 1.2em/1.4em Arial, verdana, serif;
background: #fff; text-align:left;color:blue; text-transform:uppercase; 
letter-spacing:2px;}
dd {margin:0; padding: 0 0px 0 30px; text-align:left; border-top:1px solid #f5f5f5;
font: 12px/2em arial, verdana, serif;color:#111;}

Html-koden ser fortfarande ut så här:

  1. <dl>
  2. <dt>Kaxigt</dt>
  3. <dd>En site för dig som är nyfiken på webstandard xhtml/css. Här har du flera tips som kan vara till hjälp i ditt hemsidesnickrande.</dd>
  4. <dt>Besökare</dt>
  5. <dd>Här finns många webguider i olika ämnen. Eftersom jag är intresserad av webstandard är guiderna främst riktade mot xhtml/css.</dd>
  6. <dt>Skoj</dt>
  7. <dd>Webdesign är kul! Oavsett om du hamrar vanlig html eller webstandard är det viktiga att du har kul i ditt byggande.</dd>
  8. </dl>

Se samtliga färdiga exempel.

För doctype transitional kan du använda följande tre märkningar direkt i htmlkoden- fungerar inte i strict

<ul type=”disc”>
<ul type=”square”>
<ul type=”circle”>
För doctype strict är det däremot viktigt att du både definierar property och value i selektoren du ska ha om du väljer att definiera denna direkt i html-koden. Koden för detta ser ut så här:

  1. <ul style="list-style-type: disc;">

Använd din css och låt fantasin flöda – du har oändligt många variationer att tillgå.

I lektion nummer 9 ska vi gå gruppera element med div, ID, span och class. 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 *