LIST-STYLE

Properti LIST-STYLE adalah bentuk shorthand untuk mendeklarasikan LIST-STYLE-TYPE, LIST-STYLE-POSITION, dan LIST-STYLE-IMAGE dalam satu deklarasi.

Sintaks:

list-style: value;

Untuk value:

• Nilai LIST-STYLE-TYPE, LIST-STYLE-POSITION, dan LIST-STYLE-IMAGE yang dipisahkan spasi.

  Contoh:

  ul li { list-style: square outside url("picture.gif"); }

Catatan: Memberikan nilai none untuk LIST-STYLE akan menjadikan LIST-STYLE-TYPE dan LIST-STYLE-IMAGE mempunyai nilai none:

Contoh:

ul { list-style: none; }

Dan kode di atas menyebabkan list-item marker tidak ditampilkan.

Contoh kode di bawah ini hanya menetapkan LIST-STYLE-TYPE dan LIST-STYLE-POSITION, sedangkan LIST-STYLE-IMAGE bernilai none:

ul { list-style: outside square; }
• inherit
  Menerapkan nilai LIST-STYLE elemen induknya.

  Contoh:

  ul { list-style: upper-roman inside; } ul.lower-roman { list-style: lower-roman inside; color: green; } ul.lower-roman li ul { list-style: inherit; //inherit = list-style: lower-roman inside; color: red; }

  Di mana elemennya mungkin seperti di bawah ini:

  <UL> <LI>Item 1 in level 1 <UL class="lower-roman"> <LI>Item 1 in level 2 <UL> <LI>Item 1 in level 3</LI> <LI>Item 2 in level 3</LI> </UL> </LI> <LI>Item 2 in level 2</LI> </UL> </LI> <LI>Item 2 in level 1</LI> </UL>

Properti LIST-STYLE bisa diaplikasikan kepada elemen dengan 'display: list-item'.