CSS Liste Özellikleri

2 Nisan 2021 772 kez okundu

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

<h5>Sırasız Listeler</h5>
<ul>
 	<li>Elma</li>
 	<li>Armut</li>
 	<li>Ayva</li>
</ul>

<h5>Sırasız Listeler</h5>

<ul>

<li>Armut</li>

</ul>

<h5>Sıralı Listeler</h5>
<ol>
 	<li>Elma</li>
 	<li>Armut</li>
 	<li>Ayva</li>
</ol>

<h5>Sıralı Listeler</h5>

<ol>

<li>Armut</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 (●)

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.

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

<p style="font-size: large;">Bilgisayar Parçaları</p>

<li>Anakart</li>

<li>İşlemci</li>

<li>Harddisk</li>

<li>Ekran kartı</li>

</ul>

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

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

<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 …)

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.

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

<p style="font-size: large;">Alışveriş Listesi</p>

<li>Peynir</li>

<li>Ekmek</li>

<li>Domates</li>

<li>Pirinç</li>

</ol>

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

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

<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..

CSS Liste Özellikleri

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

<p>Bilgisayar Parçaları</p>

<li>Anakart</li>

<li>İşlemci</li>

<li>Harddisk</li>

<li>Ekran kartı</li>

</ul>

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

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

CSS Liste Özellikleri 2

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

<p>Üniversiteler</p>

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

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

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

CSS Liste Özellikleri 3

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

<p>DERS PROGRAMI</p>

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

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