17

CSS Sınıflandırma-Liste Özellikleri

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

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.

    
            1
            ul.arabalar {
        
            2
                list-style-type: none
        
            3
            }
        
            4
            ol ol ol {
        
            5
                list-style-type: lower-roman /* i ii iii iv v gibi. */
        
            6
            }

Browser Uyumu:
Internet Explorer 4+
Netscape 4+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

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.

    
            1
            ul{
        
            2
                list-style-image: url(mavitop.gif)
        
            3
            }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

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.

    
            1
            ul{
        
            2
                list-style-position: inside
        
            3
            }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

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.

    
            1
            ul{
        
            2
                list-style: disc outside
        
            3
            }
        
            4
            ol{
        
            5
                list-style: decimal inside
        
            6
            }

Browser Uyumu:
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C’s CSS Level 1+
CSS Profile 1.0

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 : <br> etiketi hariç alt satıra geçişe izin vermez.

    
            1
            p {
        
            2
              white-space: pre;
        
            3
            }

Browser Uyumu:
Internet Explorer 5.5+
Netscape 4+
Opera 4+
W3C’s CSS Level 2+
CSS Profile 1.0

display

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.

    
            1
            p {
        
            2
                display: inline;
        
            3
            }
        
            4
            em {
        
            5
                display: block;
        
            6
            }