İlginizi Çekebilir

CSS Liste Özellikleri

CSS Liste Özellikleri

Elimizde bulunan verileri, HTML liste kodlarını kullanarak listeleme yapmaktayız. Listeleme yapıldıktan sonra listenin özelleştirmesini CSS ile özelleştirebiliriz.

Dilerseniz ilk başta liste yapısına bir göz atalım.

Sırasız Listeler

  • Elma
  • Armut
  • Ayva

Sıralı Listeler

  1. Elma
  2. Armut
  3. Ayva


 
 
Listeleme yaparken, sırasız listelerin görünüm türlerini (kare,disk,yuvarlak) ve sıralı listelerin sıralanış türlerini (ABC,romen rakamları,123) şeklinde özelleştirebilmekteyiz. Bu özelleştirmeleri HTML kodlarının içerisinde type şeklinde belirtiyoruz.
Bu özelleştirmeleri daha gelişmiş hale getirmek; renklendirme, boyutlandırma, gölgelendirme gibi çeşitli görünüm özelleştirmelerini yapmak için CSS kodlarına ihtiyaç duymaktayız.
 
 

Liste işaretlerinin değiştirilmesi

list-style-type etiketi kullanılarak değiştirilmektedir.
 

Sırasız liste işaret değiştirme

Sırasız liste için kullanılabilir listeleme türleri:
none –> İşareti kaldırır
square –> Kare işaretli (■)
circle –> İçi boş daire işaretli (○)
disc –> Daire işaretli (●)
   
CSS Liste Özellikleri
Elimizde bu şekilde sırasız liste olsun. Bu listenin özelleştirmesini adım adım inceleyelim.
İlk olarak listemizi oluşturalım ve verilerini girelim.

Oluşturduğumuz listenin CSS tanımlama kısmına geçelim.

 
 

Sıralı liste işaret değiştirme

Sıralı liste için kullanılabilir listeleme türleri:
upper-latin –> Sıralamayı büyük harflerle A’dan başlayarak yapar. (A B C …)
lower-latin –> Sıralamayı küçük harfle a’dan başlayarak yapar. (a b c …)
upper-roman –> Sıralamayı büyük harflerle romen rakamlarıyla yapar. (I II III …)
lower-roman –> Sıralamayı küçük harflerle romen rakamlarıyla yapar (i ii iii …)
   
CSS Liste Özellikleri Sıralı Liste
Elimizde bu şekilde sıralı liste olsun. Bu listenin özelleştirmesini adım adım inceleyelim.
İlk olarak listemizi oluşturalım ve verilerini girelim.

Oluşturduğumuz listenin CSS tanımlama kısmına geçelim.

   

Liste özelleştirmeleri

CSS ile listelerin özelleştirmeleri sadece listeleme tiplerini değiştirmekle sınırlı değil. Arka plan rengi, yazı rengi, yazı tipi boyutu, yazı tipi ailesi, konum ayarı, hizalama gibi genel CSS özelleştirmelerini kullanabiliriz. Aşağıda göstereceğim örneklerle daha iyi anlayacağınızı umuyorum..

CSS Liste Özellikleri

 
 
 
CSS Liste Özellikleri 2

 
 
 
CSS Liste Özellikleri 3

Yorum Yap

Yorum Yap