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: <deger>
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.
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: <deger\>
**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.
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: <deger>
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.
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: <deger\>
**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.
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: <deger>
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.
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: <deger>
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.
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
Emre VARLI 