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
- Elma
- Armut
- Ayva
1 2 3 4 5 6 | <h5>Sırasız Listeler</h5> <ul> <li>Elma</li> <li>Armut</li> <li>Ayva</li> </ul> |
1 2 3 4 5 6 | <h5>Sıralı Listeler</h5> <ol> <li>Elma</li> <li>Armut</li> <li>Ayva</li> </ol> |
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.
İçindekiler
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 (●)
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.
1 2 3 4 5 6 7 8 | <p style="font-size: large;">Bilgisayar Parçaları</p> <ul class="liste1"> <!-- Oluşturduğumuz listeye bir class tanımlıyoruz ve isimlendiriyoruz--> <li>Anakart</li> <li>İşlemci</li> <li>RAM</li> <li>Harddisk</li> <li>Ekran kartı</li> </ul> |
Oluşturduğumuz listenin CSS tanımlama kısmına geçelim.
1 2 3 4 5 | <style> .liste1 { /*Style etiketleri oluşturup, listeye verdiğimiz class türünü çağırıyoruz */ list-style-type: square; /* Listeleme yapacağımız türü isteğimize göre yazabiliriz */ } </style> |
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 …)
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.
1 2 3 4 5 6 7 8 | <p style="font-size: large;">Alışveriş Listesi</p> <ol class="liste2"> <!-- Oluşturduğumuz listeye bir class tanımlıyoruz ve isimlendiriyoruz--> <li>Peynir</li> <li>Süt</li> <li>Ekmek</li> <li>Domates</li> <li>Pirinç</li> </ol> |
Oluşturduğumuz listenin CSS tanımlama kısmına geçelim.
1 2 3 4 5 | <style> .liste2 { /*Style etiketleri oluşturup, listeye verdiğimiz class türünü çağırıyoruz */ list-style-type: lower-roman; /* Listeleme yapacağımız türü isteğimize göre yazabiliriz */ } </style> |
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..
1 2 3 4 5 6 7 8 | <p>Bilgisayar Parçaları</p> <ul class="liste1"> <li>Anakart</li> <li>İşlemci</li> <li>RAM</li> <li>Harddisk</li> <li>Ekran kartı</li> </ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> p { font-size: large; background-color: purple; color: wheat; } .liste1 { list-style-type: circle; background-color: red; text-shadow: 2px 2px 5px; color: black; display: flexbox; } </style> |
1 2 3 4 5 6 7 8 | <p>Üniversiteler</p> <ol class="liste1"> <li class="A">Selçuk Üniversitesi</li> <li>Pamukkale Üniversitesi</li> <li>Sakarya Üniversitesi</li> <li>Süleyman Demirel Üniversitesi</li> <li>Akdeniz Üniversitesi</li> </ol> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <style> p { font-size: large; background-color: cyan; color: black; text-align: center; } .liste1 { list-style-type: upper-latin; background-color: green; color: palegoldenrod; margin: 5; padding: 5; text-decoration: underline wavy white; } .A{ letter-spacing: 5px; } </style> |
1 2 3 4 5 6 7 8 | <p>DERS PROGRAMI</p> <ul class="liste1"> <li class="A">Algoritmaya Giriş</li> <li class="B">Veri Tabanı Programcılığı</li> <li class="C">Nesneye Yönelik Programlama</li> <li class="D">Sistem Analizi ve Tasarımı</li> <li class="E">Teknoloji Yönetimi</li> </ul> |
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <style> p { font-size: large; background-color: skyblue; color:orange; text-shadow: -4px 2px 3px black; text-align: center; } .liste1 { list-style-type: disc; background-color: gold; color: blue; display:flexbox; line-height: 180%; } /** Liste elemanlarının her biri ABCDE şeklinde class sınıflarına ayrılmıştır **/ .A{ letter-spacing: 5px; font-family: Comic Sans MS; background-color: blueviolet; color: bisque; } .B{ letter-spacing: -1px; font-family: Arial; } .C{ letter-spacing: 2px; font-family: Freestyle Script; color: red; text-decoration: overline dotted blue; } .D{ font-style: italic; background-color: coral; } .E{ font-weight: 1000; letter-spacing: 5px; word-spacing: 25px; } </style> |
