Listeler, birbirleriyle açık bir şekilde ilişkilendirilmeleri ve okunması kolay olmaları için ilgili bilgi parçalarını bir araya getirmek için kullanılır. Modern web geliştirmede listeler, genel içeriğin yanı sıra gezinme için sıklıkla kullanılan öğelerdir.
Listeler, iyi yapılandırılmış, daha erişilebilir, bakımı kolay bir belge oluşturmaya yardımcı oldukları için yapısal açıdan iyidir. CSS stilleri ekleyebileceğiniz özel öğeler sağladıkları için de yararlıdırlar. Son olarak, anlamsal olarak doğru listeler, ziyaretçilerin web sitenizi okumasına yardımcı olur ve sayfalarınızın güncellenmesi gerektiğinde bakımı basitleştirir.
Bu yazıda CSS ile sıralı ve sırasız listelerin başındaki madde işaretlerini nasıl kaldıracağınız göstereceğim.
İlk olarak CSS kullanmadan aşağıdaki gibi listeyi oluşturuyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--Sırasız Liste--> <ul> <li>Anakart</li> <li>İşlemci</li> <li>Ram</li> <li>Monitör</li> <li>Tost Makinesi</li> </ul> <hr> <!--Sıralı Liste--> <ol> <li>Anakart</li> <li>İşlemci</li> <li>Ram</li> <li>Monitör</li> <li>Tost Makinesi</li> </ol> |
Ekran çıktısı aşağıdaki gibi olacaktır.
Listenin başında İşaretleri kaldırmak için list-style-type:none; özelliği kullanılır. Aşağıdaki örnekte sıralı ve sırasız listeler ile birlikte listenin başındaki işaretleri ve sayıları kaldıran kodu bulacaksınız.
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 26 27 28 29 30 31 32 33 |
<style> /*Sırasız Liste*/ ul{ list-style-type:none; } /*Sıralı Liste*/ ol{ list-style-type:none; } </style> <!--Sırasız Liste--> <ul> <li>Anakart</li> <li>İşlemci</li> <li>Ram</li> <li>Monitör</li> <li>Tost Makinesi</li> </ul> <hr> <!--Sıralı Liste--> <ol> <li>Anakart</li> <li>İşlemci</li> <li>Ram</li> <li>Monitör</li> <li>Tost Makinesi</li> </ol> |
Yukarıdaki kodların ekran çıktısı şu şekilde olacaktır.
Yorum Yap