Merhaba,

Bu dersimizde Html içerisinde kullanılan listelerin görselliklerine müdahale edeceğiz.

Bu müdahale için kullanabileceğimiz 3 sitil türü bulunmaktadır.

Bunlar ;

• List-style-image
• List-style-position
• List-style-type

List-style-image

Adındanda anlaşılağı üzere listenin başında bulunacak simgeye bir resim atamak için kullanılmaktadır. Kullanım şekli ;

Şeklindedir. Artık liste başındaki simge bizim atamış olduğumuz deneme.gif dosyasıdır.

List-style-position

Yine adından anlaşılacağı gibi liste simgesinin duracağı yeri belirtmek için kullanılmaktadır. Varsayılan olarak borderın dışında durmaktadır. Kullanım şekli;

Kullanılabilecek parametreler :

Inside : Border’ın içinde

Outside : Border’ın dışında

Initial : Atanan değerin varsayılan olarak tanımlanmasını sağlar

Inherit : Ebeveyn elementte ne ise o değeri alır.

List-style-type

Bu özelliğimizde listenin başında bulunan simgenin şekline müdahale etmemize yarayan özelliktir.

Kullanım Şekli :

Şeklindedir. Sık kullanılan parametreler :

• Circle
• Square
• Disc
• Decimal
• Upper-latin
• Upper-roman

Bu 3 özelliği birleştirip tek bir kod ile ekleyebilmemiz de mümkündür.

Örnek olarak ;

Bu dersimizde liste itemlerinin görselliklerine müdahale etmeyi inceledik. Bir sonraki dersimizde bir resmin metin içerisindeki duruşunu üzerine ufak bir örnek yapacağız.

İyi Çalışmalar Dilerim,