logo

CSS Liste Stilleri

CSS'deki Liste, içeriklerin veya öğelerin belirli bir şekilde nasıl listeleneceğini belirler; yani bunlar düzgün veya rastgele düzenlenebilir, bu da temiz bir web sayfası oluşturmaya yardımcı olur. Uyarlanabilir olduklarından ve kullanımları basit olduğundan, büyük miktarda malzemeyi düzenlemek için kullanılabilirler. Listenin varsayılan stili kenarlıksızdır. Liste iki kategoriye ayrılabilir:

    Sırasız liste:Sırasız listelerdeki liste öğeleri varsayılan olarak küçük siyah daireler olan madde işaretleri ile gösterilir.Sıralı Liste:Sıralı listelerdeki liste öğeleri sayı ve harflerle tanımlanır.

Aşağıdaki CSS listesi özellikleri, CSS listelerini kontrol etmede kullanılabilir:

    Liste stili türü:Bu özellik, liste öğesi işaretçisinin disk, karakter veya özel sayaç stili gibi görünümünü belirlemek için kullanılır.Liste stili resmi:Liste öğesi işaretçisi olarak görev yapacak resimler bu parametre kullanılarak belirtilebilir.Liste stili konumu:İşaretleme kutusunun ana blok kutusu etrafında nerede olması gerektiğini açıklar.Liste biçimi:Liste stili bu öznitelikle yapılandırılır.

Şimdi örneklerle bu özellikler hakkında daha fazla bilgi edineceğiz.

Liste stili türü özelliği

Varsayılan liste işaretçisi türü, kare, daire, Romen rakamları, Latin harfleri ve daha pek çok başka türle değiştirilebilir. Sırasız bir listedeki girişler yuvarlak madde işaretleri (•) ile gösterilirken, sıralı bir listedeki öğeler varsayılan olarak Arap rakamları (1, 2, 3 vb.) kullanılarak numaralandırılır.

Değerlerini hiçbiri olarak ayarlamadığımız takdirde işaretler veya madde işaretleri kaldırılacaktır.

Sözdizimi:

liste stili türü:değer;

tarihe göre sql sıralaması

Değeri şu şekilde kullanabiliriz:

  1. daire
  2. ondalık sayı, örneğin:1,2,3, vb.
  3. ondalık sayının başındaki sıfırlar, örneğin :01,02,03,04, vb.
  4. alt-roma
  5. üst-roma
  6. düşük alfa, örneğin a,b,c, vb.
  7. üst alfa, örneğin A, B, C, vb.
  8. kare

Not: Varsayılan dolgu ve kenar boşluğu da listeye dahil edilmiştir. Padding:0 ve kenar boşluğu:0 eklemek gerekir.
    Ve
      Bunu ortadan kaldırmak için etiketler.

Örnek

Bu örnekte, çeşitli liste stili türleri ve kare, üst alfa ve çok olarak ayarlanmış değerler içeren bir CSS Listesi gösterilmektedir.

 Example for CSS Lists .num{ list-style-type:decimal; } .alpha{ list-style-type:upper-alpha; } .circle{ list-style-type:circle; } .square{ list-style-type:square; } .disc{ list-style-type:disc; } <h2> Ordered Lists </h2> <ol class="order"> <li>ONE</li> <li>TWO</li> </ol> <h2> Unordered lists </h2> <ul> <li>ONE</li> <li>TWO</li> </ul> 

Çıktı

CSS Liste Stilleri