0Pricing
HTML Academy · Ders

İç İçe Listeler ve Liste Biçimlendirme

Listeleri başka listelerin içine yerleştirmeyi ve görünümlerini denetlemeyi öğrenin.

İç İçe Listeler ve Liste Biçimlendirme, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Listeleri İç İçe Yerleştirme

Listeler <li> elements öğelerinin inside kısmına iç içe yerleştirilebilir:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Doğru İç İçe Yerleştirme

İç içe liste, <ul> veya <ol> öğesinin doğrudan alt öğesi değil, bir <li> öğesinin inside kısmında olmalıdır:

<!-- WRONG: nested ul as direct child of outer ul -->
<ul>
  <ul>   <!-- INVALID -->
    <li>Item</li>
  </ul>
</ul>

<!-- CORRECT: nested ul inside li -->
<ul>
  <li>
    Parent item
    <ul>
      <li>Child item</li>
    </ul>
  </li>
</ul>

Çok Düzeyli Madde İşareti Stilleri

Tarayıcılar her iç içe yerleştirme düzeyinde farklı varsayılan madde işaretleri uygular:

<ul>
  <li>Level 1 — disc (filled circle)</li>  <!--  • -->
  <ul>
    <li>Level 2 — circle (open circle)</li>  <!--  ○ -->
    <ul>
      <li>Level 3 — square</li>             <!--  ▪ -->
    </ul>
  </ul>
</ul>

CSS ile Sıfırlama

İç içe listelerin stillerini CSS ile geçersiz kılın:

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style each level explicitly */
.nav > li > ul {
  padding-left: 1rem;
  list-style: disc;
}

Numaralı İç İçe Listeler

Farklı türlerde iç içe sıralı listeler:

<ol type="1">
  <li>Introduction
    <ol type="a">
      <li>Background</li>
      <li>Motivation</li>
    </ol>
  </li>
  <li>Methods
    <ol type="a">
      <li>Data collection</li>
    </ol>
  </li>
</ol>

Özel Numaralandırma için CSS Sayaçları

CSS sayaçlarıyla özel hiyerarşik numaralandırma:

ol {
  list-style: none;
  counter-reset: level1;
}
ol > li { counter-increment: level1; }
ol > li::before { content: counter(level1) '. '; }

ol ol {
  counter-reset: level2;
}
ol ol > li { counter-increment: level2; }
ol ol > li::before {
  content: counter(level1) '.' counter(level2) ' ';
}

Akordeon Gezinme Deseni

İç içe bir liste, genişletilebilir bir kenar çubuğu gezinmesine dönüşebilir:

<ul class="tree-nav">
  <li>
    <details>
      <summary>Frontend</summary>
      <ul>
        <li><a href="/html">HTML</a></li>
        <li><a href="/css">CSS</a></li>
      </ul>
    </details>
  </li>
  <li><a href="/backend">Backend</a></li>
</ul>

İç İçe Listelerde Boşluklandırma

Görsel girintiyi CSS ile denetleyin:

ul {
  padding-left: 1.5rem;  /* Controls indent at each level */
  margin: 0.5rem 0;
}

/* Tighter nested spacing */
ul ul {
  margin: 0.25rem 0;
  padding-left: 1.25rem;
}

list-style Kısa Yazımı Tekrarı

Tüm liste stili özelliklerinin birleştirilmiş hâli:

/* Shorthand: type position image */
ul {
  list-style: square inside;
}

/* Longhand equivalents: */
ul {
  list-style-type: square;
  list-style-position: inside;   /* inside or outside */
  list-style-image: none;
}

Liste İşaretçisi Olarak Özel Simgeler

Liste işaretçisi olarak SVG veya emoji kullanın:

ul.checklist {
  list-style: none;
  padding: 0;
}

ul.checklist li::before {
  content: '✓ ';
  color: #22c55e;
  font-weight: bold;
}

/* Or with a background SVG */
ul.icon-list li {
  padding-left: 2rem;
  background: url('/icons/arrow.svg') no-repeat 0 0.2em;
  background-size: 1rem 1rem;
  list-style: none;
}

İç İçe Listelerde Erişilebilirlik

İç içe listeler ve ekran okuyucular:

  • Ekran okuyucular iç içe yerleştirme düzeyini ve öğe sayısını duyurur
  • Derin iç içe yerleştirme (4 veya daha fazla düzey) kafa karıştırıcıdır — en fazla 2-3 düzeyle sınırlı kalın
  • Dış listedeki list-style: none kullanılıyorsa role="list" ekleyin

Hızlı Kontrol

İç içe bir liste dış listenin inside kısmında nereye yerleştirilmelidir?

Özet: İç İçe Listeler

İç içe listelerin temel noktaları:

  • Listeleri <li> öğelerinin içine yerleştirin — hiçbir zaman doğrudan <ul> içine yerleştirmeyin
  • Tarayıcıların varsayılanı: her düzeyde disc → circle → square
  • CSS sayaçları, özel hiyerarşik numaralandırma olanağı sağlar
  • Kullanılabilirlik için iç içe geçirme düzeyini 2-3 ile sınırlayın
  • Genişletilebilir iç içe gezinme için <details>+<summary> kullanın

Sıkça Sorulan Sorular

“İç İçe Listeler ve Liste Biçimlendirme” dersi ücretsiz mi?

Evet — “İç İçe Listeler ve Liste Biçimlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“İç İçe Listeler ve Liste Biçimlendirme” dersinde ne öğreneceğim?

Listeleri başka listelerin içine yerleştirmeyi ve görünümlerini denetlemeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“İç İçe Listeler ve Liste Biçimlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Sırasız Listeler: ul ve li
  2. Sıralı Listeler: ol, start, reversed ve type
  3. Açıklama Listeleri: dl, dt ve dd
  4. İç İçe Listeler ve Liste Biçimlendirme
← HTML Academy Sayfasına Dön