Bu yazımızda Css’te liste özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz. Liste özellikleri ile listenin başındaki işaretleri değiştirebilir, işaretler yerine resim ekleyebilir ve bu işaretlerin pozisyonunu değiştirebiliriz.
Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.
CSS LİST STYLE TYPE ÖZELLİĞİ
Bu özellik ile listelerin başındaki işaretler değiştirilebilir veya tamamen kaldırılabilir.
list-style-type birçok değer alabilir ama örnek olması adına burda 4 değeri göstereceğim. Siz diğer değerleride uygulayarak inceleyebilirsiniz.
Örneğimizde 4 adet sırasız liste tanımlayıp, list-style-type değerleri ile tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<ul> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> <ul style="list-style-type:decimal;"> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> <ul style="list-style-type:upper-latin;"> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> <ul style="list-style-type:none;"> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> |
CSS LİST STYLE İMAGE ÖZELLİĞİ
Bu özellik ile listelerin başlarındaki işaretler yerine resimler kullanabiliriz. Yapmamız gereken list-style-image özelliğine resmin yolunu tanımlamak.
Örneğimizde bir sırasız liste tanımlayıp, list-style-image değerlerine resmimizi vererek tarayıcıdaki durumunu inceleyelim.
|
1 2 3 4 5 6 7 |
<ul style="list-style-image: url('images.png');"> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> |
CSS LİST STYLE POSİTİON ÖZELLİĞİ
Bu özellik ile listelerin başlarındaki işaretlerin pozisyonlarını belirleyebiliriz.
list-style-position özelliğine şu değerleri verebiliriz;
► inside
► outside
Örneğimizde 2 adet sırasız liste tanımlayıp, list-style-position değerlerini vererek tarayıcıdaki durumlarını inceleyelim.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul style="list-style-position:inside;"> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> <ul style="list-style-position:outside;"> <li>Anasayfa</li> <li>Hakkımda</li> <li>İletişim</li> </ul> |
Son olarak şunu da ekleyelim.
Burda bahsettiğimiz 3 özelliği ayrı ayrı tanımlamak yerine tek seferde list-style özelliği ile tanımlayabiliriz.
|
1 2 3 |
list-style:list-style-type list-style-position list-style-image; |
Örneğin,
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// uzun hali list-style-type:square; list-style-position:inside; list-style-image:url("image.png"); // kısa hali list-style: square inside url("image.png"); |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
