CSS list-style-type kullanımı

CSS özelliklerinden biri olan list-style-type listenin işaretleme tipini belirtir. CSS ile belirtebileceğimiz gibi HTML ile de listeleme işaretinin tipi belirtilebilir. (type özelliği ile).

list-style-type özelliği aşağıda verilen değerlerden birini alabilir.

noneListeleme işaretini kaldırır.
circle Daire şeklinde listeleme işareti oluşturur.
square Kare şeklinde listeleme işareti oluşturur.
upper-latin
A, B, C şeklinde listeleme işareti oluşturur.
upper-roma
Büyük harfler ile roma rakamları şeklinde listeleme işaretleri oluşturulur.
lower-latin
a, b, c şeklinde listeleme işareti oluşturur.
upper-latin
Küçük harfler ile roma rakamları şeklinde listeleme işaretleri oluşturulur.

list-style-type kullanımı

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

ol.e {list-style-type: lower-roman;}

ol.f {list-style-type: upper-alpha;}
<ul class="a">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ul>

<ul class="b">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ul>

<ol class="c">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>

<ol class="d">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>

<ol class="e">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>

<ol class="f">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>
  • Mercedes
  • Ford
  • Fiat
  • Mercedes
  • Ford
  • Fiat
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat

Html ile listeleme tipini ayarlama

<ol type="1">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>

<ol type="a">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>
 
<ol type="A">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>

<ol type="i">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>

<ol type="I">
  <li>Mercedes</li>
  <li>Ford</li>
  <li>Fiat</li>
</ol>
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat
  1. Mercedes
  2. Ford
  3. Fiat
307 Views
58670cookie-checkCSS list-style-type kullanımı

Leave a Reply

Your email address will not be published. Required fields are marked *