Css Liste Görselleştirme Ders 14

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 ;

Ul

{

List-style-image:url(‘deneme.gif’);

}

  Ş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;

Ul

{

List-style-position:inside;

}

  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 :

Ul

{

List-style-type:square;

}

  Ş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 ;

ul

{

list-style:circle inside;

background-color:red; color: white;

}

  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,