CSS-list-style

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Der er to forskellige former for lister i HTML, som det er gennemgået i Ul-Tag.

Du kan enten bruge "ordered lists" som er ordnet i rækkefølge, og der bruges som standard tal som vist herunder men der er også mulighed for bogstaver og andet.

  1. Det første punkt
  2. Det andet punkt
  3. Det tredje punkt

Den anden mulighed er "unordered lists" som bare er en oplistning der som standard bliver markeret med kugler, som vist herunder.

  • Det første punkt
  • Det andet punkt
  • Det tredje punkt

Css list-style er lavet så du kan ændre på udseende af listen nemt og hurtigt.

Billeder i unordered list

Ved at bruge et lille billede kan man rette standard List-standard.png til List-billede.png.

For at gøre dette skal man selvfølgelig have en lille billed-fil med det violette kvadrat, og der indsættes følgende style-angivelse:

<style type="text/css">
ul 
{
list-style:square url("sqpurple.gif");
}
</style>

Liste Typer

Der er en række forskellige standard visninger man kan indstille i list-style-type.

Unordered list-style-type

Man kan lave forskellige indstillinger med list-style-type. Her er det lavet på to forskellige classes:

<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
</style>

Hvis man skriver to lister med hver deres list-style-type kan det gøres som følger:

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

Hvilket giver følgende visning:

List-type-ul.png

Der findes følgende standarder der virker på en unordered list

disc   - standard
circle - en cirkel
square - en firkant
none   - ingen.

Ordered list-style-type

På tilsvarende vis kan man lave forskellige indstillinger med list-style-type på en ordered list. Her er det lavet på to forskellige classes:

<style type="text/css">
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>

Hvis man skriver to lister med hver deres list-style-type kan det gøres som følger:

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

Hvilket giver følgende visning:

List-type-ol.png

Der er mange forskellige typer i den ordnede liste. De kan ses ved www.w3schools.com list-style-type play-it[1] hvor man kan se resultatet af de forskellige typer.

Forskelle i browsere

Hvis du bruger Internet Explorer eller Opera så vil dit billede sidde lidt højre end ellers.

Så hvis du bruger Sarafri, Firefox, eller Chrome så vil billedet sidde lidt længere nede.

Hvis du bruger "Crossbrowser" så vil det se ens ud, ligemeget hvilken browser du bruger.

Det er også muligt at angive alle de liste egenskaber i én enkelt egenskab.

Referencer