CSS-stylinglister

Indholdsfortegnelse

    Vis indholdsfortegnelse

Uordnede lister:

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

Bestilte lister:

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

HTML-lister og CSS-listeegenskaber

I HTML er der to hovedtyper af lister:

  • uordnede lister (<ul>) - listepunkterne er markeret med punkttegn

  • ordnede lister (<ol>) - listepunkterne er markeret med tal eller bogstaver

CSS-listens egenskaber giver dig mulighed for at:

  • Indstil forskellige listeelementmarkører for ordnede lister

  • Indstil forskellige listeelementmarkører for uordnede lister

  • Indstil et billede som markør for listeelementer

  • Tilføj baggrundsfarver til lister og listeelementer

Forskellige Listeemnemarkører

Egenskaben list-style-type angiver typen af listeelement markør.

Følgende eksempel viser nogle af de tilgængelige listeelementmarkører:

Eksempel

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;
}

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>
<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>

<p>Example of ordered lists:</p>
<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>

</body>
</html>

Bemærk: Nogle af værdierne er for uordnede lister, og nogle for ordnede lister.

Et billede som markør for listeelementer

Egenskaben list-style-image angiver et billede som listen varemarkør:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<h2>The list-style-image Property</h2>

<p>The list-style-image property specifies an image as the list item marker:</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Placer listeelementmarkørerne

Egenskaben list-style-position angiver placeringen af listeelementmarkørerne (kuglepunkter).

"liste-stil-position: udenfor;" betyder, at punkterne vil være udenfor listepunktet. Starten af hver linje i et listeelement vil blive justeret lodret. Dette er standard:

  • Coffee - A brewed drink prepared from roasted coffee beans...
  • Tea
  • Coca-cola

"liste-stil-position: inde;" betyder, at punkterne vil være indeni listepunktet. Da det er en del af listepunktet, vil det være en del af teksten og tryk på teksten i starten:

  • Coffee - A brewed drink prepared from roasted coffee beans...
  • Tea
  • Coca-cola

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
</style>
</head>
<body>

<h1>The list-style-position Property</h1>

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries from the Coffea plant</li>
  <li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
  <li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>

</body>
</html>

Fjern standardindstillinger

Egenskaben list-style-type:none kan også være bruges til at fjerne markørerne/kuglerne. Bemærk, at listen også har standardmargen og polstring. For at fjerne dette skal du tilføje margin:0 og padding:0 til <ul> eller <ol>:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Default list:</p>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Remove bullets, margin and padding from list:</p>
<ul class="demo">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Liste - stenografi ejendom

Egenskaben listestil er en stenografi-egenskab. Den bruges til at indstille alle liste egenskaber i én erklæring:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>

<h2>The list-style Property</h2>

<p>The list-style property is a shorthand property, which is used to set all the list properties in one declaration.</p>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Når du bruger stenografiegenskaben, er rækkefølgen af egenskabsværdierne:

list-style-type

(hvis et listestil-billede er angivet, værdien af denne egenskab vil blive vist, hvis billedet af en eller anden grund kan ikke vises)

list-style-position

(specificerer, om listeelementmarkørerne skal vises i eller uden for indholdsstrømmen)

list-style-image

(angiver et billede som listeelementmarkør)

Hvis en af egenskabsværdierne ovenfor mangler, er standardværdien for manglende ejendom vil blive indsat evt.

Stylingliste med farver

Vi kan også style lister med farver, for at få dem til at se lidt mere ud interessant.

Alt, der føjes til <ol>- eller <ul>-tagget, påvirker hele listen, mens egenskaber tilføjet til <li>-tagget vil påvirke de individuelle listeelementer:

Eksempel

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

Resultat :

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}
</style>
</head>
<body>

<h1>Styling Lists With Colors</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Flere eksempler

Dette eksempel viser, hvordan man opretter en liste med en rød venstre kant.

Tilpasset liste med rød venstre kant

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px 20px;
}
</style>
</head>
<body>

<h2>List with a red left border</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Dette eksempel viser, hvordan man opretter en kantliste uden punkttegn.

Liste med kant i fuld bredde

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  padding: 0;
  border: 1px solid #ddd;
}

ul li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

ul li:last-child {
  border-bottom: none
}
</style>
</head>
<body>

<h2>A bordered list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Dette eksempel viser alle de forskellige listeelementmarkører i CSS.

Alle de forskellige listeelementmarkører for lister

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
</head>
<body>

<h2>All List Style Types</h2>

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

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

<ul class="c">
  <li>Square type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

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

<ol class="e">
  <li>Cjk-ideographic type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="f">
  <li>Decimal type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="g">
  <li>Decimal-leading-zero type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="h">
  <li>Georgian type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="i">
  <li>Hebrew type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="j">
  <li>Hiragana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="k">
  <li>Hiragana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="l">
  <li>Katakana type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="m">
  <li>Katakana-iroha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="n">
  <li>Lower-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="o">
  <li>Lower-greek type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="p">
  <li>Lower-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="q">
  <li>Lower-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="r">
  <li>Upper-alpha type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="s">
  <li>Upper-latin type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="t">
  <li>Upper-roman type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="u">
  <li>None type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="v">
  <li>inherit type</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Alle egenskaber for CSS-liste

list-style

Indstiller alle egenskaber for en liste i én erklæring

list-style-image

Angiver et billede som listeelementmarkør

list-style-position

Angiver placeringen af listeelementmarkørerne (punktpunkter)

list-style-type

Angiver typen af listeelementmarkør