CSS-lista

Punktlista:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Numrerad lista:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

HTML-listor och CSS-listegenskaper

I HTML finns det främst två typer av listor:

  • Punktlista ( <ul> ) - Listelementen används med punktlistssymboler
  • Numrerad lista ( <ol> ) - Listelementen används med numeriska eller bokstavsstämplar

CSS-listegenskaper låter dig:

  • Ställ in olika listelementsmärken för numrerade listor
  • Ställ in olika listelementsmärken för punktlistor
  • Använd en bild som listelementets markering
  • Lägg till bakgrundsfärg för lista och listelement

Olika listelementsmärken

list-style-type Egenskapen specificerar typen för listelementets markering.

Nedan visas några tillgängliga listelementsmärken:

Exempel

ul.a {
  list-style-type: circle;
}
ul.b {
  list-style-type: square;
}
ol.c {
  list-style-type: upper-roman;
}
ol.d {
  list-style-type: lower-alpha;
}

Prova själv

Kommentar:Vissa värden används för punktlistor, medan andra används för numrerade listor.

Bilden som listelementets markering

list-style-image Egenskapen anger en bild som listelementets markering:

Exempel

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

Prova själv

Positionera listelementets markering

list-style-position Egenskapen specificerar platsen för listelementets markering (punktlistan).

"list-style-position: outside;" betyder att punktlistans symbol kommer att placeras utanför listelementen. Varje rad i listelementen kommer att vara vertikalt centrerad. Detta är standard:

  • Coffee - en bryggd dryck gjord av rostade kaffeboenner
  • Tea
  • Coca-cola

"list-style-position: inside;" Detta innebär att punkterna kommer att vara inuti listpunkterna. Eftersom det är en del av listpunkten kommer det att bli en del av texten och driva texten framåt vid början:

  • Coffee - en bryggd dryck gjord av rostade kaffeboenner
  • Tea
  • Coca-cola

Exempel

ul.a {
  list-style-position: outside;
}
ul.b {
  list-style-position: inside;
}

Prova själv

Ta bort standardinställningar

list-style-type:none Egenskapen kan också användas för att ta bort markörer/tecken.Observera att listor har standardmarginaler och inre marginaler. För att ta bort detta innehåll, lägg till margin:0 och padding:0 :

Exempel

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Prova själv

Lista - förkortningsegenskap

list-style Egenskapen är en förkortningsegenskap. Den används för att i ett enda uttalande ställa in alla listegenskaper:

Exempel

ul {
  list-style: square inside url("sqpurple.gif");
}

Prova själv

När du använder förkortningsattribut är ordningen på attributvärdena:

  • list-style-type(Om list-style-image specificerats och bilden inte kan visas av någon anledning, kommer värdet för detta attribut att visas)
  • list-style-position(Specificera om listpunktens markör ska visas inuti eller utifrån innehållsströmmen)
  • list-style-image(Specificera bilden som listpunktens markör)

Om ett av de ovan nämnda attributen saknas, kommer standardvärdet för det saknade attributet att användas (om det finns ett)

Ställ in färgstilar för listan

Vi kan också använda färger för att ställa in liststil, så att de ser mer intressanta ut.

Alla stylar som läggs till till <ol> eller <ul>-taggarna påverkar hela listan, medan egenskaper som läggs till till <li>-taggen påverkar varje listpunkt:

Exempel

ol {
  background: #ff9999;
  padding: 20px;
}
ul {
  background: #3399ff;
  padding: 20px;
}
ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}
ul li {
  background: #cce5ff;
  margin: 5px;
}

Resultat:

  1. Coffee
  2. Tea
  3. Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Prova själv

Fler exempel

Anpassad lista med röd vänster kant
Detta exempel visar hur du skapar en lista med röd vänster kant.
Fyll breddens kantlistor
Detta exempel visar hur man skapar en kantad lista utan punkter.
Alla olika listelement
Detta exempel visar alla olika typer av listelement i CSS.

Alla CSS-listegenskaper

Egenskap Beskrivning
list-style Kortformad egenskap. Ställer in alla egenskaper för listan i ett enda uttalande.
list-style-image Använd en bild som markering för listelementen.
list-style-position Bestämmer platsen för listelementens markering (punkter).
list-style-type Bestämmer typen av markering för listelementen.