Liste ile ilgili CSS özellikleri

Articles

CSS'e Giriş

Bu makale, listeyle ilgili CSS özelliklerini açıklar.

list-style özelliğini ve counter() fonksiyonunu nasıl kullanacağınızı ve yazacağınızı öğrenebilirsiniz.

YouTube Video

Önizleme için HTML

css-list.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-list.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>List Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>List Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>list-style</h3>
 23            <section>
 24                <header><h4>list-style-type: circle; list-style-position: inside;</h4></header>
 25                <section class="sample-view">
 26                    <h5>Unordered List (ul)</h5>
 27                    <ul>
 28                        <li>Item 1</li>
 29                        <li>Item 2</li>
 30                        <li>Item 3</li>
 31                    </ul>
 32                </section>
 33                <header><h4>list-style: upper-roman outside</h4></header>
 34                <section class="sample-view">
 35                    <h5>Ordered List (ol)</h5>
 36                    <ol>
 37                        <li>First</li>
 38                        <li>Second</li>
 39                        <li>Third</li>
 40                    </ol>
 41                </section>
 42                <header><h4>list-style-image: url('custom-bullet.png')</h4></header>
 43                <section class="sample-view">
 44                    <h5>Custom Bullet List</h5>
 45                    <ul class="custom-list">
 46                        <li>Custom Item 1</li>
 47                        <li>Custom Item 2</li>
 48                        <li>Custom Item 3</li>
 49                    </ul>
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>counter()</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58dl {
 59    counter-reset: item;
 60}
 61
 62dl dt::before {
 63    counter-increment: item; /* Increment the counter */
 64    content: counter(item) ". "; /* Display the counter */
 65}
 66</pre>
 67                <header><h4>HTML</h4></header>
 68<pre>
 69&lt;dl&gt;
 70    &lt;dt&gt;Term A&lt;/dt&gt;
 71    &lt;dd&gt;Explication for term A&lt;/dd&gt;
 72    &lt;dt&gt;Term B&lt;/dt&gt;
 73    &lt;dd&gt;Explication for term B&lt;/dd&gt;
 74    &lt;dt&gt;Term C&lt;/dt&gt;
 75    &lt;dd&gt;Explication for term C&lt;/dd&gt;
 76&lt;/dl&gt;
 77</pre>
 78                <header><h4>HTML+CSS</h4></header>
 79                <section class="sample-view">
 80                    <dl>
 81                        <dt>Term A</dt>
 82                        <dd>Explication for term A</dd>
 83                        <dt>Term B</dt>
 84                        <dd>Explication for term B</dd>
 85                        <dt>Term C</dt>
 86                        <dd>Explication for term C</dd>
 87                    </dl>
 88                </section>
 89            </section>
 90        </article>
 91        <article>
 92            <h3>counters()</h3>
 93            <section>
 94                <header><h4>CSS</h4></header>
 95<pre class="sample">
 96ol {
 97    list-style: none;
 98    counter-reset: list-counter;
 99}
100
101li {
102    counter-increment: list-counter;
103}
104
105li::before {
106    content: counters(list-counter, ".") " ";
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;ol&gt;
112    &lt;li&gt;Item A
113        &lt;ol&gt;
114            &lt;li&gt;Subitem A-1&lt;/li&gt;
115            &lt;li&gt;Subitem A-2&lt;/li&gt;
116        &lt;/ol&gt;
117    &lt;/li&gt;
118    &lt;li&gt;Item B
119        &lt;ol&gt;
120            &lt;li&gt;Subitem B-1&lt;/li&gt;
121        &lt;/ol&gt;
122    &lt;/li&gt;
123&lt;/ol&gt;
124</pre>
125                <header><h4>HTML+CSS</h4></header>
126                <section class="sample-view">
127                    <ol>
128                        <li>Item A
129                            <ol>
130                                <li>Subitem A-1</li>
131                                <li>Subitem A-2</li>
132                            </ol>
133                        </li>
134                        <li>Item B
135                            <ol>
136                                <li>Subitem B-1</li>
137                            </ol>
138                        </li>
139                    </ol>
140                </section>
141            </section>
142            <section>
143                <header><h4>CSS</h4></header>
144<pre class="sample">
145article {
146    counter-reset: chapter;
147}
148h1.chapter {
149    counter-increment: chapter;
150    counter-reset: section;
151}
152h1.chapter::before {
153    content: counter(chapter) " ";
154}
155h2.section {
156    counter-increment: section;
157    counter-reset: sub-section;
158}
159h2.section::before {
160    content: counters(chapter, ".") "." counter(section) " ";
161}
162h3.sub-section {
163    counter-increment: sub-section;
164}
165h3.sub-section::before {
166    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
167}
168</pre>
169                <header><h4>HTML</h4></header>
170<pre>
171&lt;h1 class=&quot;chapter&quot;&gt;Chapter A&lt;/h1&gt;
172&lt;h2 class=&quot;section&quot;&gt;Section A-1&lt;/h2&gt;
173&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-1&lt;/h3&gt;
174&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-1-2&lt;/h3&gt;
175
176&lt;h2 class=&quot;section&quot;&gt;Section A-2&lt;/h2&gt;
177&lt;h3 class=&quot;sub-section&quot;&gt;Subsection A-2-1&lt;/h3&gt;
178
179&lt;h1 class=&quot;chapter&quot;&gt;Chapter B&lt;/h1&gt;
180&lt;h2 class=&quot;section&quot;&gt;Section B-1&lt;/h2&gt;
181&lt;h3 class=&quot;sub-section&quot;&gt;Subsection B-1-1&lt;/h3&gt;
182</pre>
183                <header><h4>HTML+CSS</h4></header>
184                <section class="sample-view">
185                    <h1 class="chapter">Chapter A</h1>
186                    <h2 class="section">Section A-1</h2>
187                    <h3 class="sub-section">Subsection A-1-1</h3>
188                    <h3 class="sub-section">Subsection A-1-2</h3>
189
190                    <h2 class="section">Section A-2</h2>
191                    <h3 class="sub-section">Subsection A-2-1</h3>
192
193                    <h1 class="chapter">Chapter B</h1>
194                    <h2 class="section">Section B-1</h2>
195                    <h3 class="sub-section">Subsection B-1-1</h3>
196                </section>
197            </section>
198        </article>
199    </main>
200</body>
201</html>

Liste ile ilgili

`list-style` özelliği

 1ul {
 2    list-style-type: circle; /* Empty circle bullets */
 3    list-style-position: inside; /* Position bullets inside the content area */
 4}
 5
 6ol {
 7    /* Uppercase Roman numerals with bullets positioned outside */
 8    list-style: upper-roman outside;
 9}
10
11.custom-list {
12    list-style-image: url('custom-bullet.png'); /* Custom image bullets */
13}

list-style özelliği, <ul> ve <ol> gibi HTML liste öğeleri için liste göstergelerinin (madde işaretleri veya numaralar) stilini belirlemek için kullanılan bir CSS özelliğidir. Bu özellik, listenin genel stilini kontrol etmenize olanak tanır ve liste görünümünü özelleştirmek için kullanışlıdır.

Bu örnekte, aşağıdaki stiller uygulanmıştır.

ul: Boş daire madde işaretleri içeride görüntülenir.
ol: Büyük harfli Roma rakamlarıyla numaralandırılır ve rakamlar dışarıda görüntülenir.
custom-list sınıfı: Belirtilen görüntü madde işareti olarak görüntülenir.

`list-style` yapısı

list-style, aşağıdaki üç özellik için bir kısaltmadır:

list-style-type: Liste öğeleri için gösterge türünü (madde işareti veya numara) belirtir.
list-style-position: Göstergeyin liste öğesinin içinde (inside) mi yoksa dışında (outside) mı yer alacağını belirtir.
list-style-image: Liste göstergesi olarak kullanılacak bir görüntüyü belirtir.

Temel Kullanım

1ul {
2    list-style: square inside url('path/to/image.png');
3}

Bu kod şu şekilde çalışır:

list-style-type: square: Gösterge türünü kare bir şekle ayarlar.
list-style-position: inside: Gösterge, liste öğesinin içinde görüntülenir.
list-style-image: url('path/to/image.png'): Gösterge olarak bir görüntü kullanır.

Bireysel Özelliklerin Açıklaması

`list-style-type`

list-style-type, liste için kullanılan işaretleyicinin türünü belirtir. Kullanılabilir stiller, listenin türüne bağlıdır.

Değer örneği

 1ul {
 2    /* Change list bullets to empty circles */
 3    list-style-type: circle;
 4}
 5
 6ol {
 7    /* Number list items with lowercase letters (a, b, c, ...) */
 8    list-style-type: lower-alpha;
 9}
10
11ol.roman-list {
12    /* Number list items with uppercase roman numerals (I, II, III, ...) */
13    list-style-type: upper-roman;
14}

none: Hiçbir işaretleyici gösterilmez.
disc (varsayılan): Küçük bir siyah daire.
circle: Küçük bir boş daire (halka).
square: Küçük bir kare.
decimal: 1, 2, 3, ... gibi numaralandırılmış bir liste.
lower-alpha: a, b, c, ... gibi küçük harfli alfabetik liste.
upper-alpha: A, B, C, ... gibi büyük harfli alfabetik liste.
lower-roman: i, ii, iii, ... gibi küçük harfli Romen rakamları.
upper-roman: I, II, III, ... gibi büyük harfli Romen rakamları.

`list-style-position`

1ul {
2    list-style-position: inside;
3}

list-style-position özelliği, işaretleyicinin (madde işareti) liste elemanının dışında mı yoksa içinde mi yer alacağını belirtir. list-style-position aşağıdaki değerlere sahip olabilir:.

outside: İşaretleyiciler liste elemanının dışında yer alır ve eleman işaretleyiciden sonra başlar. Bu varsayılan değerdir.
inside: İşaretleyiciler liste elemanının içinde yer alır ve metnin bir parçası olarak görüntülenir.

`list-style-image`

1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

list-style-image özelliği, liste işaretleyicisi olarak bir resim kullanıldığında ayarlanır. Resim url() kullanılarak belirtilir ve resim yüklenemezse, list-style-type tarafından belirtilen işaretleyici görüntülenir.

`list-style` kısayol özelliği

1ul {
2    list-style: square inside url('bullet.png');
3}

list-style özelliği, list-style-type, list-style-position ve list-style-image değerlerini tek seferde ayarlayabilen bir kısayol özelliğidir. Sıra esnektir ancak genellikle bu örnekteki gibi yazılır. Bu durumda, kare bir madde işareti liste elemanının içinde görüntülenir ve işaretleyici olarak bir resim kullanılır.

Özet

list-style, listenin görünümünü (işaretleyici türü, konum, özel resim) tek seferde belirtmenizi sağlayan bir kısayol özelliğidir.
list-style-type, list-style-position, list-style-image özelliklerini tek tek ayarlamak da mümkündür.
Liste işaretçilerini düzen ve tasarıma göre esnek bir şekilde özelleştirebilirsiniz.

CSS Sayacı (`counter()`)

 1/* Reset the counter */
 2dl {
 3    counter-reset: item;
 4}
 5
 6/* Apply the counter to list items */
 7dl dt::before {
 8    counter-increment: item; /* Increment the counter */
 9    content: counter(item) ". "; /* Display the counter */
10}

CSS sayaçlarını, liste öğelerini veya belirli öğeleri otomatik olarak numaralandırmak için kullanabilirsiniz.

Sayaçların Oluşturulması ve Başlatılması

1/* Create and initialize the counter */
2ol {
3  counter-reset: section; /* Set the counter name to 'section' */
4}

counter-reset özelliği ile bir sayaç oluşturabilir ve sıfırlayabilirsiniz.

Sayaçların Artırılması

1/* Increment the counter and display it */
2li::before {
3  counter-increment: section; /* Increment the counter by 1 */
4  content: counter(section) ". "; /* Display the counter value */
5}

counter-increment özelliğiyle bir sayacı artırabilir ve counter işleviyle sayaç değerini gösterebilirsiniz.

`counters()`

CSS'teki counters işlevi, liste öğelerini numaralandırmak veya paragrafları sıralamak gibi özel sayaçları yönetmek için çok kullanışlıdır. Bu işlev, birden fazla sayaç değerini bir dizeyle birleştirip CSS içeriğinde gösterebilir. Burada, counters işlevinin temel kullanımından pratik uygulama örneklerine kadar ayrıntılı olarak açıklayacağız.

`counter` ve `counters` Arasındaki Farklar

counter ve counters işlevleri sayaç değerlerini göstermek için kullanılır, ancak aralarında şu farklar vardır:.

counter: Tek bir sayacın değerini alır.
counters: Belirtilen bir ayırıcıyla birden fazla sayaç değerini birleştirir ve gösterir.

Örneğin, iç içe liste öğelerinde sayaç kullanmak isterseniz, counters işlevini kullanarak ebeveyn ve alt sayaçları birleştirerek gösterebilirsiniz.

`counters` İşlevinin Sözdizimi

counters(<counter-name>, <string>);

counters işlevi aşağıdaki sözdizimi ile kullanılır.

<counter-name>: Kullanılacak sayacın adını belirtir.
<string>: Her sayaç arasına eklenecek dizeyi belirtir (genellikle . veya - gibi bir ayırıcı).

`counters` İşlevinin Kullanım Örneği

Şimdi, counters işlevinin bir kullanım örneğini inceleyelim.

 1ol {
 2    list-style: none;
 3    counter-reset: list-counter;
 4}
 5
 6li {
 7    counter-increment: list-counter;
 8}
 9
10li::before {
11    content: counters(list-counter, ".") " ";
12}

Bu örnekte, iki seviyeli iç içe bir liste için ebeveyn ve alt sayaçlar birleştirilmiştir.
- list-counter sayacı tanımlanıyor.
- counters fonksiyonu, üst liste sayacını ve alt liste sayacını birleştirmek ve görüntülemek için kullanılır.

Çok seviyeli sayaçlar kullanarak gelişmiş örnek

counters fonksiyonunu kullanarak, özel numaralandırma veya paragraf numaralandırma gibi çok seviyeli sayaçları esnek bir şekilde yönetebilirsiniz. Örneğin, bölümler ve alt bölümler içeren belgeler oluştururken faydalıdır.

 1article {
 2    counter-reset: chapter;
 3}
 4
 5h1.chapter {
 6    font-size: 1.2rem;
 7    counter-increment: chapter;
 8    counter-reset: section;
 9}
10
11h1.chapter::before {
12    content: counter(chapter) " ";
13}
14
15h2.section {
16    font-size: 1.1rem;
17    counter-increment: section;
18    counter-reset: sub-section;
19}
20
21h2.section::before {
22    content: counters(chapter, ".") "." counter(section) " ";
23}
24
25h3.sub-section {
26    font-size: 1rem;
27    counter-increment: sub-section;
28}
29
30h3.sub-section::before {
31    content: counters(chapter, ".") "." counter(section) "." counter(sub-section) " ";
32}

Bu kodda, bölümler (h1), alt bölümler (h2) ve daha alt bölümler (h3) için sayaçlar sıfırlanır ve her seviyeyi birleştirmek için counters fonksiyonu kullanılır.

Özet

counters fonksiyonu, birden fazla sayacı hiyerarşik bir şekilde özelleştirmek ve görüntülemek istediğinizde çok kullanışlıdır. CSS sayaçlarını kullanarak, liste ve başlık numaralandırmalarını özgürce özelleştirebilir ve web sayfalarına gelişmiş bir bilgi yapısı kazandırabilirsiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

Kutu modeli dekorasyonuyla ilgili CSS özellikleri Tabloyla ilgili CSS özellikleri

Liste ile ilgili CSS özellikleri

YouTube Video

Önizleme için HTML

Liste ile ilgili

list-style özelliği

list-style yapısı

Temel Kullanım

Bireysel Özelliklerin Açıklaması

list-style-type

Değer örneği

list-style-position

list-style-image

list-style kısayol özelliği

Özet

CSS Sayacı (counter())

Sayaçların Oluşturulması ve Başlatılması

Sayaçların Artırılması

counters()

counter ve counters Arasındaki Farklar

counters İşlevinin Sözdizimi

counters İşlevinin Kullanım Örneği

Çok seviyeli sayaçlar kullanarak gelişmiş örnek

Özet

YouTube Video

`list-style` özelliği

`list-style` yapısı

`list-style-type`

`list-style-position`

`list-style-image`

`list-style` kısayol özelliği

CSS Sayacı (`counter()`)

`counters()`

`counter` ve `counters` Arasındaki Farklar

`counters` İşlevinin Sözdizimi

`counters` İşlevinin Kullanım Örneği