CSS list-style-type

list-style-type :

Liste işaretinin  türünü belirlemek için kullanılır.

Örnek

ul{
 list-style-type: circle;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
disc İşaretçi içi dolu bir daire şeklini alır.
armenian Ermeni numaralandırması yapılır.
circle İşaretçi içi boş bir daire şeklini alır.
Cjk-ideographic İşaretçi düz ideolojik sayılara dönüşür.
decimal İşaretçi bir sayıya dönüşür.
Decimal-leading-zero İşaretçi bir sayıya dönüşür. Fakat başına 0 değeri alır. (01, 02, 03, … gibi)
georgian İşaretçi geleneksel gürcü numaralandırmasına dönüşür.
hebrew İşaretçi İbranice numaralandırmaya dönüşür.
hiragana İşaretçi geleneksel hiragana numaralandırmasına dönüşür.
Hiragana-iroha İşaretçi geleneksel hiragana iroha numaralandırmasına dönüşür.
katakana İşaretçi geleneksel katakana numaralandırmasına dönüşür.
katakana-iroha İşaretçi geleneksel katakana iroha numaralandırmasına dönüşür.
Lower-alpha İşaretçi (a, b, c, d, … gibi) değere dönüşür.
Lower-greek İşaretçi yunan harflerine dönüşür.
Lower-latin İşaretçi latin harflerine dönüşür.
Lower-roman İşaretçi roman harflerine dönüşür.
none İşaretleyici değer almaz.
square İşaretçi bir kareye dönüşür.
Upper-alpha İşaretçi (A, B, C, D… gibi) değerlere dönüşür.
Upper-latin İşaretçi büyük latin harflerine dönüşür.
Upper-roman İşaretçi roman rakamlarına dönüşür.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 3.5

CSS list-style-position

list-style-position :

Liste işaretinin liste akışında mı yoksa dışında mı görüneceğini ayarlamak için kullanılır.

Örnek

ul {
  list-style-position: outside;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
inside İşaretçi liste akışı içinde görünür.
outside İşaretçi liste akışı dışında görünür.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 7.0

CSS list-style-image

list-style-image :

Bu list style özelliği ile liste işaretini bir görüntü ile değiştirebiliriz.

Not: Her zaman list-style-type özelliğini belirtin.

Örnek

ul{
  list-style-image: url('http://www.w3tr.com/file/list.jpg');
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
none Hiçbir özellik almaz.
url Liste işaretinin yerine gösterilecek görüntünün yolunu belirtir.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 7.0

CSS list-style

list-style :

Tek özellikle bütün liste özelliklerini ayarlamamızı sağlar. Eksik olan Property için varsayılan değer alınır.

Örnek

ul {
    list-style: square;
}

Codepen Ön izleme

 

Css Sözdizimi

Değer Açıklama
list-style-type Liste işaretinin türünü belirler.
list-style-position Liste işaretinin konumunu ayarlar.
list-style-image Liste işaretinin türünü belirler. Resim atamanızı da sağlar.
İnital
İnherit

Tarayıcı Desteği

1.0 1.0 4.0 1.0 7.0