Liste öğelerini yatay olarak nasıl düzenlerim? Ul li CSS listelerini şekillendirmenin şık örnekleri Ul ol li etiketlerin anlamı nedir?

Açıklama

Öznitellikler

Not: Ters öznitelik yalnızca Chrome ve Safari tarafından desteklenir.

Başlangıç: Listedeki öğeleri numaralandırmaya başlamak için başlangıç \u200b\u200btamsayı değerini ayarlar. Örnek »tür: Liste öğeleri için kullanılacak işaretçi türünü tanımlar:

• 1 - ondalık sayılar (1, 2, 3, 4 ...).
• Bir - Latin harfleri alfabetik sırayla, büyük harf (A, B, C, D ...).
• a - Latin harfleri alfabetik sırayla, küçük harf (a, b, c, d ...).
• ben - büyük Roma rakamları (I, II, III, IV ...).
• ben - Küçük harflerle Roma rakamları (i, ii, iii, iv ...).
Misal "

Etiket

ayrıca Global Nitelikleri ve Olayları destekler

Varsayılan tarz

ol (ekran: blok; liste stili türü: ondalık; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px;)

Misal

1. Kahve
2. Çay
3. Süt
50. Kahve
51. Çay
52. Süt

Tek fark, bu etiketin kesinlikle listeleri numaralandırmak için yapılmış olmasıdır. Etiketin adı, İngilizce kısaltması olan "Sıralı Liste" - numaralı listeden gelir.

Etiket sözdizimi

1. Madde 1
2. Öğe # 2
3. Öğe # 3
4. ...

Type \u003d "value" özelliği aşağıdaki değerleri alabilir

• A - büyük Latin harfleri (A, B, C ..) biçimindeki işaretçileri ayarlar;
• a - küçük Latin harfleri (a, b, c ..) biçimindeki işaretçileri ayarlar;
• I - büyük Roma rakamları (I, II, III, IV ..) şeklinde işaretler koyar;
• i - küçük Roma rakamları (i, ii, iii, iv ..) şeklinde işaretler koyar;
• 1 (varsayılan) - Arap rakamları (1, 2, 3 ..) biçiminde işaretler ayarlar;

Start \u003d "value" özelliği, raporun başlangıç \u200b\u200bdeğerini (başlangıç \u200b\u200bdeğeri) belirler.

Reversed özniteliği bir ters sayımı belirtir (gerekirse).

Etiket

bir bitiş etiketinin zorunlu kullanımını gerektirir

Liste öğelerini oluşturmak için bir çift etiket kullanılır

1. ... Açılış ve kapanış etiketleri arasında madde işaretli bir listenin içeriği olan tek tek kelimeler, tümcecikler, paragraflar, resimler, kod parçaları ve çok daha fazlası bulunur.

   Not

   Listenin içinde, hesabı kendiniz değiştirebilirsiniz. Bunun için, etiket için özel bir öznitelik değeri \u003d "" vardır

2. bazı sayısal değerlerin atandığı. Örneğin

   1. Madde 1
   10. Öğe # 2
   11. Öğe # 3

   Html'de numaralandırılmış liste örnekleri (

   )

   Örnek 1. Latin harfleri biçiminde numaralandırılmış bir html listesi

   Büyük harfli örnek

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Küçük harfli örnek

   1. Ürün # 10
   2. Ürün # 11
   3. Ürün # 12

   Sayfada şu şekilde görünüyor:

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Örnek 2. Roma harfleriyle numaralandırılmış html listesi

   Büyük harfli örnek

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Sayfada şu şekilde görünüyor:

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Küçük harfli örnek

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Sayfada şu şekilde görünüyor:

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Örnek 3. Numaralı html listesi farklı başlangıç \u200b\u200bkonumu

   Sayacın başlangıç \u200b\u200bdeğerini ayarlamanıza izin veren başlangıç \u200b\u200bözniteliğinin yeteneklerini gösteren bir örnek.

   50. Madde 1
   51. Öğe # 2
   52. Öğe # 3

   Sayfada şu şekilde görünüyor:

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3

   Örnek 4. Numaralı html listelerinde hesabı değiştirme

   Aşağıda, etiketlerde yeni öğeler görüntülerken değer özelliğini kullanarak sayaç değerlerini değiştirme becerisine sahip bir örnek bulunmaktadır.

3. .

   10. Madde 1
   11. Öğe # 2
   100. Öğe # 3
   101. Öğe # 4

   Sayfada şu şekilde görünüyor:

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3
   4. Öğe # 4

   Örnek 5. HTML'de tersine çevrilebilir numaralandırılmış liste

   Aşağıda bir ters numaralandırılmış liste örneği verilmiştir (ters sırada sayılır).

   10. Madde 1
   11. Öğe # 2
   12. Öğe # 3
   13. Öğe # 4

   Sayfada şu şekilde görünüyor:

   1. Madde 1
   2. Öğe # 2
   3. Öğe # 3
   4. Öğe # 4

   Listeler numaralandırılabilir ve numaralandırılmamış olabilir.

   Numaralı listeler koda göre çıkarılır:

   Sayılarla liste
   1. paragraf 1
   2. 2. nokta
   3. 3. nokta

   Numaralandırılmamış listeler kod tarafından çıkarılır:

   Onay işaretleri veya başka semboller içeren liste
   • paragraf 1
   • paragraf 1
   • paragraf 1

   Herhangi bir listedeki her öğe bir li etiketi içine alınır. Tüm liste öğeleri tek bir ortak ul veya ol etiketi içine yerleştirilmiştir. Bu etiketlerin stilleri stil sayfasında yazılmıştır.

   Her etiket için belirli görsel stiller atanır. Metindeki girintileri gösterirler.

   Numaralandırılmış bir liste için, her öğe için numaralandırma stilleri belirlenir.

   Standart Arap rakamları, ondalık değerle tanımlanır.

   liste stili türü: ondalık; /*Arap rakamları*/

   Madde işaretli bir liste için, karakter stilini (kareler veya daireler) belirtirsiniz.

   liste stili türü: daire; / * çevreler * /
   liste stili türü: kare; / * kareler * /

   Her menü öğesine bir görüntü atanabilir.

   liste stili resim: url ("resmin yolu");

   Genellikle şablonlarda, numaralandırılmış bir liste basit sayılarla biçimlendirilir ve numaralandırılmaz - siyah kareler ve dairelerle. Sıkıcı ve anlamsız. Bunu düzeltelim.
   

   Twenty Eleven şablonundaki liste stilleri nerede?

   Stil sayfası style.css dosyasını açın. / * Metin öğeleri * / adlı bölümü bulun

   Standart kod şuna benzer:

   Numaralı bir listeyi nasıl düzenlerim?

   Arka plan kullanılarak numaralandırılmış liste

   Şu güzel numaralandırılmış liste tasarımına bakın.

   Sevmek? Hadi yeniden yapalım.

   Ol etiketi için stilleri bulun. Yeni mülkler ekleyin.

   Ol (dolgu: 0px 0 0 20px; kenar boşluğu: 0.5em 0 1.571em 1.9em; renk: # 2E2E2E; liste stili türü: yok; yazı tipi: 15px / 17px Verdana, Arial, Helvetica, sans-serif; z-endeksi : 2; counter-reset: point;) ol li (margin-bottom: 4px; line-height: 1.6; color: # 2E2E2E; pozisyon: göreli;) ol li: before (margin-bottom: 4px; counter-artış: nokta 1; satır yüksekliği: 1.6; yükseklik: 24px; kenar boşluğu: -36px; sol: 0px; genişlik: 24px; kenar boşluğu: 1px; arka plan: # BDC3C7; içerik: sayaç (nokta); metin hizalama: merkez; konum: mutlak; yazı tipi ağırlığı: kalın;)

   Tasarımınıza uyması için neyi değiştirmeniz gerektiğini anlamanız için bu kodu parçalara ayıralım.

   liste stili türü: yok; - standart basamakların çıktısını devre dışı bırakır
   karşı sıfırlama: nokta; - numaralandırma sayacı için bir değişken ayarlar
   konum: göreceli; - noktaların yakınında numaralandırılan yerler

   before ol li etiketi için sözde bir öğedir. Aşağıdaki stillere sahiptir:
   içerik: sayaç (puan); - bir değişkenin değerini gösterir
   sayaç artışı: nokta 1; - sayacı 1 artırır
   konum: mutlak;
   arka plan: # BDC3C7; - sayılar için arka plan (arka plan renkli veya güzel bir simge ile ayarlanabilir
   marj - marjlar
   dolgu - dolgu
   renk - eleman metin rengi
   arka plan - arka plan
   metin hizalama - metin hizalama
   yazı tipi ağırlığı - yazı tipinin ağırlığı (ağırlığı)

   Stillerinizde herhangi bir rengi, hizalamayı, yazı tipi boyutunu ve girintileri ayarlayabilirsiniz.

   Her öğe için benzersiz bir resim içeren numaralı liste

   Kadınlar için bir sitede çok çekici numaralandırılmış listeler var.

   Bu nasıl uygulanır? Aşağıdaki koda bir göz atalım:

   / * birinci numara * / ol li: birinci-çocuk (liste-stili-resim: url (1 numaralı görüntünün yolu);) / * ikinci numara * / ol li: nth-çocuk (2n) (liste stili- image: url (2 numaralı resmin yolu);) / * üçüncü numara * / ol li: nth-child (3n) (liste stili-resim: url (3 numaralı resmin yolu);) / * dördüncü sayı * / ol li: nth-child (4n) (list-style-image: url (4 numaralı görüntünün yolu);) / * Ayrıca, sadece aşağıdaki öğe numaraları için tam olarak aynı şeyi reçete ediyoruz * /

   Böyle numaralandırılmış bir listenin kodunda, tüm öğe numaralarını listelemeniz ve her birine benzersiz bir simge atamanız gerekir.

   Makalelerdeki listelerde 20'ye kadar numaralandırılmış öğe kullanıyorsanız, nth-child (An) sözde sınıfını 20 kez kaydetmeniz gerekir. Böylece stillerdeki sonuncusu nth-child (20n) sözde sınıftır.

   Numaralandırılmış listenin (ol li etiketleri) düzenini tanımlayan stil sayfasında satırları bulun.

   Birinci çocuk sözde sınıfını buna ekleyin. Bir kez kopyalayıp yapıştırın, ardından bu özelliği nth-child (An) olarak değiştirin ve simgenizin sahip olmasını istediğiniz kadar sayıyı kopyalayın. Ürün numaralarını ekleyin.

   Her numara için, kendi benzersiz simgesi olan bir liste stili resim özelliği ekleyin.

   Sitedeki simgeler noktalardan uzakta bulunuyorsa veya bunlarla örtüşüyorsa, dijital simgelerin veya noktaların metninin hizalamasını ve girintilerini düzenlemeniz gerekir.
   

   Madde işaretli (numarasız) liste nasıl düzenlenir?

   Alternatif simgelerle madde işaretli liste ul li

   Bu madde işaretli listeyi gerçekten beğendim.

   Ul (padding: 11px 0 5px 0;) ul li (padding-left: 32px; margin-bottom: 10px; yazı tipi: normal 15px Verdana, sans-serif; renk: # 2E2E2E; satır yüksekliği: 1.6; kenarlık-alt: 1px kesikli #ccc; padding-bottom: 10px;) ul li: before (içerik: ""; konum: mutlak; genişlik: 27px; yükseklik: 24px; margin-left: -35px; margin-top: -2px; arka plan: url ("images / sprite.jpg") 0px 2px no-rep; list-style-type: circle;) ul li: nth-child (2n): before (content: ""; konum: mutlak; genişlik: 27px; yükseklik: 43px; margin-left: -35px; margin-top: -2px; arkaplan: url ("images / sprite.jpg") 0px -17px no-rep; list-style-type: circle;)

   Standart liste stili tür stili yerine, "simgeye giden yol" özelliğini - liste stili resim: url'yi atayabilirsiniz. Ancak daha sonra, dış sol kenar boşluğunu sitenin kenarlarından kaydetmeniz gerekir - bu olmadan simgeler görüntülenmez, içerik alanının ötesine geçerler.

   Deney için girintiler atayabilirsiniz:

   Ul li (liste stili resim: url (resimler / radyo.png); kenar boşluğu: 30px;)

   Simgelerin değişimi nth-child (An) özelliği ile ayarlanabilir. Yukarıdaki örnek, önceki sözde öğeyi kullanır.

   Kod, bir sözde sınıf nth-child (2n) içerir. Değeri 2'dir. Her çift öğenin farklı bir ikonu olduğu ortaya çıkar. 2n yerine 2n + 1 yazarsanız, diğer simge tek noktalara düşecektir.

   Listedeki her bir öğe için bir alt çizgi belirleyebilirsiniz. Gösterilen örnekte, öğelerin altı noktalı çizgilerle çizilmiştir.

   Ayrıca, her öğeye çerçeveler, arka plan, simgeler atanabilir. Sadece çok akıllı olma. Görevimiz, süslü bir tasarımla herkesi yenmek değil, içerik algısının kalitesini iyileştirmektir.
   

   Bir sayfada farklı tasarıma sahip birden çok liste nasıl görüntülenir?

   Bazen farklı stillere sahip birkaç liste yerleştirmeniz gerekir.

   Ortak stiller atarsanız, aynı görünüm tüm listelere atanacaktır. Ol veya ul etiketine ayrı bir kimlik atarsanız ve html makale düzenleme modunda kaydederseniz farklı listeler görüntülenebilir. Peki, bu kimliğin stil sayfasında, ayrı stilleri kaydetmeniz gerekir.

   Örneğin, içerik için güzel bir düzen:

   HTML'de listeyi şöyle yazarsınız:

   İçerik
   1. paragraf 1
   2. 2. nokta
   3. 3. nokta

   CSS'de aşağıdaki gibi stiller yazarsınız:

   Ol # sod (dolgu: 0px 20px 10px 51px; kenar boşluğu: 0.5em 0 0em 1em; renk: # 2E2E2E; liste stili türü: yok; arka plan: # f1f4f5; kenarlık-sol: # BDC3C7 4px katı; ekran: satır içi- block;) ol # sod li () ol # sod li: before (yazı tipi ağırlığı: normal! önemli)

   Yeni stil ana etiket etiketinden farklıdır: arka plan, görüntüleme stili, içeriğin solundaki satır.

   Metinde farklı tasarıma sahip birkaç liste kullanarak, bilgilerin sunumunu daha da ilginç hale getireceksiniz. Herhangi bir öğeyi listelerken, bazı simgeleri ve eylemleri listelerken diğerlerini ayarlayabilirsiniz. Burada tasarım sadece sizin hayal gücünüzle sınırlıdır.

   Bu yöntemler aynı zamanda menü öğelerinin, kategorilerin ve sitenin diğer öğelerinin tasarımında da geçerlidir.
   

   Bir içerik listesinde bağlantı bağlantılarını nasıl oluştururum?

   Bunları HTML kodunda nasıl yazarsınız? Bir kod parçası bağlantının çapasını çerçeveler ve başka bir kod parçası, bağlantıya tıklandığında bırakılmamız gereken yerin yanına yerleştirilir.

   İçerik
   1. Başlık 1
   2. Başlık 2
   3. Başlık 3

   Ve makalenin metninde şöyle yazmanız gerekiyor:

   Başlık 1 ... Başlık 2 ... Başlık 3 ...

   Belki daha deneyimli web yöneticileri beni bir konuda düzeltir. Ben sadece pratikte denediğimi kendim tavsiye ederim.

   Hala sorularınız varsa, yorumlarda görmekten memnuniyet duyarım.

   Ageeva Veronika.

   Belki şunlarla da ilgileneceksiniz:

   HTML etiketleri

   Anlam ve uygulama

   Numaralı (sıralı) bir liste, belirli bir sırayla takip eden öğeler içindir. Numaralı bir liste bir etiketle başlar

   (İngilizce için kısa sıralı Liste - Sıralı Liste). Her liste öğesi bir etiketle başlar
   1. (liste öğesi).

      Tarayıcı desteği

      Öznitelik			Opera		IExplorer	Kenar
      başla, yaz	Evet	Evet	Evet	Evet	Evet	Evet
      ters	Evet	Evet	Evet	Evet	Değil	Değil

      Öznitellikler

      Öznitelik	Değer	Açıklama
      kompakt	kompakt	HTML5'te desteklenmez. Listenin normal boyuttan daha küçük olması gerektiğini belirtir (satır yüksekliği:% 80). Bu özellik yerine CSS kullanın.
      	ters	Numaralı (sıralı) bir listedeki sıranın azalan olması gerektiğini belirtir. Öznitelik, Internet Explorer ve Edge tarayıcıları tarafından desteklenmez.
      başlat	numara	Sıralı (sıralı) bir listenin başlangıç \u200b\u200bdeğerini belirler. Değerler tam sayı olmalıdır, negatif değerlere izin verilir. Harflerle kullanıldığında (tür \u003d "A" ve tür \u003d "a"), öznitelik değerinde belirtilen sayı, alfabedeki harfin sıra numarasıdır. Örneğin, start \u003d "4" harfle eşleşir "D" ve liste onunla başlayacak. Start \u003d "27" değerini kullanırken, sayaç sıfırlanır ve liste iki basamaklı hale gelir ("27" \u003d "AA", "28" \u003d "AB", "29" \u003d "AC" ...).
      tip	1 (varsayılan) Geniş bir) a (küçük harf) Ben (Roma büyük) i (küçük Roma)	Numaralı (sıralı) bir liste oluşturmada kullanılan madde işareti türünü belirler.

      Kullanım örneği

      1. İlk nokta İkinci nokta
      2. Üçüncü nokta

      Sayfada şöyle görünecek:

      1. İlk nokta.
      2. İkinci nokta.
      3. Üçüncü nokta.

      Listenin belirli bir sayıdan başlamasını istiyorsanız (1'den değil), bu durumda etiket için başlangıç \u200b\u200bniteliğini belirtmelisiniz.

      .

      Örneğin:

      Bir başka ilginç özellik de, alfabetik numaralandırma ("A" - büyük, "a" - küçük harf) veya Romen rakamlarından ("I" - büyük harfle "i" - küçük harf) numaralandırmanıza olanak tanıyan türdür.

      Type özelliği için tüm olası değerleri gösteren bir örnek düşünün (varsayılandan farklı):

      >
      1. İlk nokta İkinci nokta
      2. Üçüncü nokta
      >
      1. İlk nokta İkinci nokta
      2. Üçüncü nokta
      >
      1. İlk nokta İkinci nokta
      2. Üçüncü nokta
      >
      1. İlk nokta İkinci nokta
      2. Üçüncü nokta

      Diğer numaralandırılmış listelerde (bir liste öğesi içinde) yuvalanmış numaralandırılmış (sıralı) listeler oluşturmasına izin verildiğine dikkatinizi çekerim.

      3. ):
         1. İlk nokta
            1. İlk nokta İkinci nokta
            2. Üçüncü nokta
            İkinci nokta
            3. Üçüncü nokta

            Sayfada böyle görünecek.

            HTML listeleri ilgili bilgi parçalarını birlikte gruplamak için kullanılır. Üç tür liste vardır:

            maddeli liste —

            - listenin her bir öğesi
            • bir kalemle işaretlenmiş,
              numaralı liste —
              - listenin her bir öğesi
              1. bir numara ile işaretlenmiş,
                 tanım listesi - - terim çiftlerinden oluşur
                 —
                 tanım.

                 Her liste, liste öğelerini veya terim tanım çiftlerini içeren bir kapsayıcıdır. Liste öğeleri blok öğeleri gibi davranır, biri diğerinin altına yığılır ve konteyner bloğunun tüm genişliğini kaplar. Her liste öğesinin yan tarafında düzene katılmayan ek bir kutu vardır.

                 HTML Listeleri Oluşturma

                 1. Madde işaretli liste

                 Maddeli liste sırasız bir listedir (İngilizce Sıralanmamış Listeden)... Eşleştirilmiş bir etiket kullanılarak oluşturulmuştur

                 ... Bir liste öğesinin işaretçisi bir etikettir, örneğin içi dolu bir daire.

                 Tarayıcılar, varsayılan olarak liste kutusuna aşağıdaki biçimlendirmeyi ekler:

                 Her liste öğesi bir çift etiket kullanılarak oluşturulur

              2. (İngilizce Liste Öğesinden).
              mevcut.
              • Microsoft
              • Google
              • elma
              Şekil: 1. Madde işaretli liste

              2. Numaralı liste

              Numaralı liste eşleştirilmiş bir etiket kullanılarak oluşturulur. Her liste öğesi ayrıca öğesi kullanılarak oluşturulur

            • ... Tarayıcı, öğeleri sırayla otomatik olarak numaralandırır ve böyle bir listenin bir veya daha fazla öğesini silerseniz, numaraların geri kalanı otomatik olarak yeniden hesaplanır.

              Liste kutusunda ayrıca varsayılan tarayıcı stilleri bulunur:

            • seçili liste öğesi için varsayılan numarayı değiştirmenize izin veren değer özelliği mevcuttur. Örneğin, listedeki ilk öğe için ayarladıysanız
            • , ardından numaralandırmanın geri kalanı yeni değere göre yeniden hesaplanacaktır.

              Etiket için

              aşağıdaki özellikler mevcuttur:
              Tablo 1. Etiket Özellikleri

              Öznitelik	Açıklama, kabul edilen değer
              ters	Reversed niteliği, listenin ters sırada görünmesini sağlar (örneğin, 9, 8, 7 ...).
              Başlat	Başlangıç \u200b\u200bözniteliği, numaralandırmanın başlayacağı başlangıç \u200b\u200bdeğerini belirler, örneğin, yapı ilk öğeye bir "10" seri numarası atanacaktır. Numaralandırma türünü aynı zamanda da belirtebilirsiniz, örneğin, .
              tip	Type özniteliği, listede kullanılacak işaretçi türünü (harf veya sayı olarak) belirtir. Kabul edilen değerler: 1 - varsayılan değer, ondalık numaralandırma. A - listeyi alfabetik sırayla, büyük harflerle (A, B, C, D) numaralandırma. a - listeyi alfabetik sırayla, küçük harflerle (a, b, c, d) numaralandırma. I - Roma büyük harflerinde numaralandırma (I, II, III, IV). i - Roma küçük harfli rakamlarla numaralandırma (i, ii, iii, iv).

              1. Microsoft
              2. Google
              3. elma
              Şekil: 2. Numaralı liste

              3. Tanımların listesi

              Tanım listeleri etiketi kullanılarak oluşturulur

              ... Bir terim eklemek için etiketini kullanın
              ve bir tanım eklemek için - etiket
              .

              Tanım liste kutusu aşağıdaki varsayılan tarayıcı stillerine sahiptir:

              Etiketler için

              ,

              ve

              mevcut.

              Üretici:

              Petr Tochilin

              Oyuncular:

              Andrey Gaidulyan

              Alexey Gavrilov

              Vitaly Gogunsky

              Mariya Kozhevnikova

              
              Şekil: 3. Tanımların listesi

              4. İç içe geçmiş liste

              Genellikle, basit listelerin yetenekleri yeterli değildir, örneğin bir içindekiler tablosu oluştururken, onsuz yapamazsınız iç içe geçmiş öğeler... İç içe listenin işaretlemesi aşağıdaki gibi olacaktır:

              • Paragraf 1.
              • 2. Nokta.
                • Alt bölüm 2.1.
                • Alt bölüm 2.2.
                  • Alt bölüm 2.2.1.
                  • Alt bölüm 2.2.2.
                • Alt bölüm 2.3.
              • 3. Nokta.

              
              Şekil: 4. İç içe geçmiş liste

              5. Çok düzeyli numaralı liste

              Katmanlı liste, farklı düzeylerdeki liste öğelerini farklı girintilerle görüntülemek için kullanılır. Çok düzeyli numaralandırılmış bir liste için işaretleme aşağıdaki gibi olacaktır:

              1. paragraf
              2. paragraf
                 1. paragraf
                 2. paragraf
                 3. paragraf
                    1. paragraf
                    2. paragraf
                    3. paragraf
                 4. paragraf
              3. paragraf
              4. paragraf

              Bu varsayılan işaretleme, her iç içe geçmiş liste için bir ile başlayan yeni bir numaralandırma oluşturur. İç içe numaralandırma yapmak için aşağıdaki özellikleri kullanmanız gerekir:
              sayaç sıfırlama, bir veya daha fazla sayacı sıfırlar, sıfırlanacak bir değer ayarlar;
              sayaç artışı, sayaç artış değerini belirtir, yani sonraki her öğenin hangi adımda numaralandırılacağı;
              içerik - oluşturulan içerik, bu durumda listedeki her bir öğeden önce numaranın görüntülenmesinden sorumludur.

              Ol (/ * standart numaralandırmayı kaldırın * / list-style: yok; / * Sayacı tanımlayın ve ona bir ad verin. Sayaç değeri belirtilmez - varsayılan olarak 0'dır * / counter-reset: li;) li: before (/ * Numaralandırılacak öğeyi tanımlarız - li. Önceki sözde öğe, content özelliği kullanılarak eklenen içeriğin liste öğelerinden önce yerleştirileceğini belirtir. Ayrıca sayaç artış değerini de ayarlar (varsayılan 1'dir). * / Sayaç artışı: li; / * Content özelliği, liste öğesinin numarasını görüntüler. Sayılar (), üretilen metnin bu ada sahip tüm sayaçların değeri olduğu anlamına gelir. sayaçlar (li, ".") ".";)
              Şekil: 5. Çok düzeyli numaralı liste