Articles
Panimula sa CSS
Mga property ng CSS na may kaugnayan sa listahan

Mga property ng CSS na may kaugnayan sa listahan

Ipinaliwanag ng artikulong ito ang mga property ng CSS na may kaugnayan sa listahan.

Matututuhan mo kung paano gamitin at isulat ang property na list-style at ang function na counter().

YouTube Video

HTML para sa Preview

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>

May kaugnayan sa listahan

Property na list-style 

 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}

Ang list-style na property ay isang CSS property na ginagamit upang tukuyin ang estilo ng mga marker ng listahan (mga bilog o numero) para sa mga elemento ng HTML na listahan tulad ng <ul> at <ol>. Pinapayagan ka ng property na ito na kontrolin ang kabuuang istilo ng listahan, na kapaki-pakinabang para sa pagpapasadya ng hitsura ng mga listahan.

Sa halimbawang ito, ang mga sumusunod na istilo ay inilalapat.

  • ul: Ang mga bilog na guhit ay ipinapakita sa loob.
  • ol: Binilang gamit ang malalaking titik na Roman numeral at ang mga numero ay ipinapakita sa labas.
  • custom-list na klase: Ang tinukoy na larawan ay ipinapakita bilang isang guhit.

Istruktura ng list-style

Ang list-style ay isang pinaikling paraan para sa sumusunod na tatlong property:

  • list-style-type: Tinutukoy ang uri ng marker (guhit o numero) para sa mga item ng listahan.
  • list-style-position: Tinutukoy kung ang marker ay nasa loob (inside) o labas (outside) ng item ng listahan.
  • list-style-image: Tinutukoy ang isang imahe na gagamitin bilang marker ng listahan.

Pangunahing Paggamit 

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

Gumagana ang code na ito sa sumusunod na paraan:

  • list-style-type: square: Inilalagay ang uri ng marker sa hugis na parisukat.
  • list-style-position: inside: Ang marker ay ipinapakita sa loob ng item ng listahan.
  • list-style-image: url('path/to/image.png'): Gumagamit ng imahe bilang marker.

Paliwanag ng Bawat Isa sa mga Property

list-style-type

Ang list-style-type ay nagtutukoy ng uri ng marker para sa listahan. Ang mga istilong magagamit ay nakadepende sa uri ng listahan.

Halimbawa ng halaga 
 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: Walang marker na ipapakita.
  • disc (default): Isang maliit na itim na bilog.
  • circle: Isang maliit na walang laman na bilog (singsing).
  • square: Isang maliit na parisukat.
  • decimal: Isang may bilang na listahan tulad ng 1, 2, 3, ....
  • lower-alpha: Mga maliit na titik na alpabeto tulad ng a, b, c, ....
  • upper-alpha: Malalaking titik na alpabeto tulad ng A, B, C, ....
  • lower-roman: Maliit na Romanong numeral tulad ng i, ii, iii, ....
  • upper-roman: Malalaking titik na Romanong numeral tulad ng I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

Ang ari-arian na list-style-position ay nagtutukoy kung ang marker (bala) ay ilalagay sa labas o loob ng item ng listahan. Ang list-style-position ay maaaring magkaroon ng mga sumusunod na halaga:.

  • outside: Ang mga marker ay inilalagay sa labas ng item ng listahan, at nagsisimula ang item pagkatapos ng marker. Ito ang default na halaga.
  • inside: Ang mga marker ay inilalagay sa loob ng item ng listahan at ipinapakita bilang bahagi ng teksto.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

Ang ari-arian na list-style-image ay itinakda kapag gumagamit ng larawan bilang marker ng listahan. Ang imahe ay tinutukoy gamit ang url(), at kung hindi ma-load ang imahe, ang marker na tinukoy ng list-style-type ay ipapakita.

Ang pinaikling ari-arian na list-style 

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

Ang ari-arian na list-style ay isang pinaikling ari-arian na maaaring magtakda ng list-style-type, list-style-position, at list-style-image nang sabay-sabay. Ang pagkakasunod-sunod ay flexible, ngunit karaniwang sinusulat tulad ng halimbawa na ito. Sa kasong ito, ang parisukat na bala ay ipinapakita sa loob ng item ng listahan, at isang larawan ang ipinapakita bilang marker.

Buod

  • Ang list-style ay isang pinaikling ari-arian na nagbibigay-daan sa iyo na tukuyin ang anyo ng listahan (uri ng marker, posisyon, custom na larawan) nang sabay-sabay.
  • Maaari ring itakda nang paisa-isa ang list-style-type, list-style-position, at list-style-image.
  • Maaari mong i-customize nang flexible ang mga list markers ayon sa layout at disenyo.

CSS Counter (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}

Maaari mong gamitin ang CSS counters upang awtomatikong bilangin ang mga elemento ng listahan o tiyak na mga elemento.

Paglikha at Pag-initialize ng Counters 

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

Maaari kang lumikha ng counter at i-reset ito gamit ang counter-reset na katangian.

Dodoblehin ang Counters 

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}

Dinadagdagan mo ang counter gamit ang counter-increment na katangian at ipinapakita ang halaga nito gamit ang counter function.

counters()

Ang function na counters sa CSS ay napaka-kapaki-pakinabang para sa pamamahala ng mga custom counter, tulad ng pagbilang sa mga item ng listahan o pag-ayos ng mga talata. Maaaring pagsamahin ng function na ito ang maraming counter values gamit ang isang string at ipakita ito sa CSS content. Dito, ipapaliwanag namin nang detalyado mula sa pangunahing paggamit ng counters function hanggang sa mga praktikal na halimbawa ng aplikasyon.

Pagkakaiba sa pagitan ng counter at counters

Parehong ginagamit ang counter at counters na mga function upang ipakita ang mga halaga ng counter, ngunit may mga sumusunod na pagkakaiba.

  • counter: Kinukuha ang halaga ng isang counter.
  • counters: Pinagsasama-sama ang maraming halaga ng counter gamit ang isang tinukoy na separator at ipinapakita ang mga ito.

Halimbawa, kung nais mong gumamit ng counters kasama ang mga nakapugad na item ng listahan, maaari mong gamitin ang counters function upang ipakita ang mga ito sa pamamagitan ng pagsasama-sama ng parent at child counters.

Syntax ng counters Function 

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

Ginagamit ang counters function gamit ang sumusunod na syntax.

  • <counter-name>: Itinatakda ang pangalan ng counter na gagamitin.
  • <string>: Itinatakda ang string na ipapasok sa pagitan ng bawat counter (karaniwan ay isang separator tulad ng . o -).

Halimbawa ng paggamit ng counters function

Ngayon, tingnan natin ang isang halimbawa ng paggamit ng counters function.

 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}
  • Sa halimbawang ito, ang parent at child counters ay pinagsama para sa isang dalawa-level na nested list.
    • Ang list-counter na counter ay tinutukoy.
    • Ang counters na function ay ginagamit upang pagsamahin at ipakita ang parent list counter at ang child list counter.

Advanced na halimbawa gamit ang multi-level na mga counter

Sa paggamit ng counters function, maaari mong madaling pamahalaan ang multi-level na mga counter tulad ng custom na pagnumero o pagnumero ng mga talata. Halimbawa, ito ay kapaki-pakinabang kapag gumagawa ng mga dokumento na may kasamang mga kabanata at seksyon.

 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}

Sa code na ito, ang mga counter para sa mga kabanata (h1), mga seksyon (h2), at mga subseksyon (h3) ay nire-reset, at ang counters function ay ginagamit upang pagsamahin ang bawat antas.

Buod

Ang counters function ay lubhang kapaki-pakinabang kapag nais mong i-customize at ipakita ang maraming counter sa hierarchical na paraan. Gamit ang CSS counters, maaari mong malayang i-customize ang pagnumero ng mga listahan at pamagat, na nagbibigay ng advanced na istruktura ng impormasyon sa mga web page.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

Mga ari-arian ng CSS na may kinalaman sa dekorasyon ng box modelMga property ng CSS na may kaugnayan sa talahanayan