Liste özelliği ilk olarak listeleme amaçlı kullanılsa da şimdilerde menü yapımında kullanımı revaçtadır. Burada liste özellikleri yanısıra display ve white-space özelliklerinden de bahsedilecektir.

  • list-style
  • list-style-type
  • list-style-image
  • list-style-position
  • white-space
  • display

list-style-type

Yapısı : list-style-type: (değer) Aldığı Değerler : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Başlangıç değeri: disc
Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Var

list-style-type özelliği list-item işaretinin tipini belirler. list-style-images özelliği none değeri aldığında veya resim görüntülenemediğinde kullanılır.

:::css
ul.arabalar {
	list-style-type: none
}

ol ol ol {
	list-style-type: lower-roman /* i ii iii iv v gibi. */
}

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

list-style-image

Yapısı : list-style-image: (değer) Aldığı Değerler : <url> | none
Başlangıç değeri: none
Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Var

list-style-image özelliği list-style işaretinin yerine resim koymak için kullanılır.

:::css
ul{
	list-style-image: url(mavitop.gif)
}

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

list-style-position

Yapısı : list-style-position: (değer) Aldığı Değerler : inside | outside
Başlangıç değeri: outside
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

list-style-position özelliği list-item işaretlerin metinin içinden(inside) veya soldan dışında(outside) mı olacağını belirler.

:::css
ul{
	list-style-position: inside
}

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

list-style

Yapısı : list-style: (değer) Aldığı Değerler : <list-style-type> |<list-style-position> | <url>
Başlangıç değeri:0
Uygulanabilen elementler: display değeri list-item alan elementler
Kalıtsallık: Var

list-style özelliği list-style-type, list-style-position ve list-style-image özelliklerinin kısayoludur.

:::css
ul{
	list-style: disc outside
}

ol{
	list-style: decimal inside
}

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

white-space

Yapısı : white-space: (değer) Aldığı Değerler : normal | pre | nowrap
Başlangıç değeri: normal
Uygulanabilen elementler: Block-level elementler
Kalıtsallık: Var

white-spaceözelliği elemetlerin boşluklarının nasıl işlem göreceğini belirler. değer alır. normal: birden fazla boşluğu tek boşluk gibi sayar. pre : birden fazla boşluğu birleştirmez. nowrap :
etiketi hariç alt satıra geçişe izin vermez.

:::css
p {
	white-space: pre;
}

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

display

Yapısı : display: (değer) Aldığı Değerler : none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
Başlangıç değeri: inline
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok

displayözelliği elemetlere aşağıdaki dört değerden birini atamak için kullanılır: block: elementden önce ve sonra bir satır bırakır. inline : elementden önce ve sonra bir satır bırakmaz. nowrap : block gibidir tek fark list-item işareti eklemesidir. none: element görüntülenmez. Elementi gizler. Bir çok javascript uygulmasında kullanılan bir özelliktir.

Bu dört özellik çok kullanıldıkları için üzerinde duruldu.

:::css
p {
	display: inline;
}

em {
	display: block;
}

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.