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

Sublime Text'te dosya tipine göre hızlı erişim

Son haftalarda Visual Studio Code ile kod yazıyorum. Güzel yanları var ama Sublime Text'in hızını bulamadım. Henüz Sublime'a geri dönmüş ...… Devamını oku

Responsive design patterns principles

13 January 2017 tarihinde yayınlandı.

jQuery DOM manipülasyonu metotlarında callback kullanmak

12 January 2017 tarihinde yayınlandı.