Articles
Giới thiệu về CSS
Các thuộc tính CSS liên quan đến danh sách

Các thuộc tính CSS liên quan đến danh sách

Bài viết này giải thích các thuộc tính CSS liên quan đến danh sách.

Bạn có thể học cách sử dụng và viết thuộc tính list-style và hàm counter().

YouTube Video

HTML để Xem trước

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>

Liên quan đến danh sách

Thuộc tính 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}

Thuộc tính list-style là một thuộc tính CSS được sử dụng để chỉ định kiểu của dấu danh sách (chấm tròn hoặc số) cho các phần tử danh sách HTML như <ul> và <ol>. Thuộc tính này cho phép bạn kiểm soát kiểu dáng tổng thể của danh sách, rất hữu dụng để tùy chỉnh giao diện của chúng.

Trong ví dụ này, các kiểu dáng sau được áp dụng.

  • ul: Các chấm tròn rỗng được hiển thị bên trong.
  • ol: Được đánh số bằng số La Mã in hoa và các số được hiển thị bên ngoài.
  • Lớp custom-list: Hình ảnh được chỉ định sẽ được hiển thị như một dấu chấm.

Cấu trúc list-style

list-style là một cách viết tắt cho ba thuộc tính sau:

  • list-style-type: Chỉ định kiểu của dấu (chấm hoặc số) cho các mục trong danh sách.
  • list-style-position: Chỉ định vị trí của dấu nằm bên trong (inside) hay bên ngoài (outside) mục danh sách.
  • list-style-image: Chỉ định một hình ảnh sẽ được sử dụng làm dấu danh sách.

Cách sử dụng cơ bản 

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

Mã này hoạt động như sau:

  • list-style-type: square: Đặt kiểu dấu thành hình vuông.
  • list-style-position: inside: Dấu được hiển thị bên trong mục danh sách.
  • list-style-image: url('path/to/image.png'): Sử dụng một hình ảnh làm dấu.

Giải thích từng thuộc tính

list-style-type

list-style-type xác định kiểu dấu hiệu cho danh sách. Các kiểu có thể sử dụng phụ thuộc vào loại danh sách.

Ví dụ về giá trị 
 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: Không hiển thị dấu hiệu.
  • disc (mặc định): Một vòng tròn nhỏ màu đen.
  • circle: Một vòng tròn nhỏ rỗng (nhẫn).
  • square: Một hình vuông nhỏ.
  • decimal: Một danh sách đánh số như 1, 2, 3, ....
  • lower-alpha: Chữ cái viết thường như a, b, c, ....
  • upper-alpha: Chữ cái viết hoa như A, B, C, ....
  • lower-roman: Số La Mã viết thường như i, ii, iii, ....
  • upper-roman: Số La Mã viết hoa như I, II, III, ....
list-style-position 
1ul {
2    list-style-position: inside;
3}

Thuộc tính list-style-position xác định liệu dấu hiệu (gạch đầu dòng) được đặt bên ngoài hay bên trong mục danh sách. list-style-position có thể có các giá trị sau:.

  • outside: Dấu hiệu được đặt bên ngoài mục danh sách và mục bắt đầu sau dấu hiệu. Đây là giá trị mặc định.
  • inside: Dấu hiệu được đặt bên trong mục danh sách và hiển thị như một phần của văn bản.
list-style-image 
1ul {
2    list-style-image: url('bullet.png'); /* Use an image as the list marker */
3}

Thuộc tính list-style-image được sử dụng khi dùng hình ảnh làm dấu hiệu cho danh sách. Hình ảnh được chỉ định bằng url(), và nếu không thể tải hình ảnh, dấu hiệu được chỉ định bởi list-style-type sẽ hiển thị.

Thuộc tính viết tắt list-style 

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

Thuộc tính list-style là một thuộc tính viết tắt có thể thiết lập list-style-type, list-style-position, và list-style-image cùng lúc. Thứ tự là linh hoạt, nhưng nó thường được viết như trong ví dụ này. Trong trường hợp này, một dấu hiệu hình vuông hiển thị bên trong mục danh sách và một hình ảnh sẽ được hiển thị làm dấu hiệu.

Tóm tắt

  • list-style là thuộc tính viết tắt cho phép bạn chỉ định giao diện danh sách (loại dấu hiệu, vị trí, hình ảnh tùy chỉnh) cùng lúc.
  • Cũng có thể thiết lập list-style-type, list-style-position, list-style-image riêng lẻ.
  • Bạn có thể tùy chỉnh linh hoạt các ký hiệu danh sách tùy theo bố cục và thiết kế.

Bộ đếm CSS (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}

Bạn có thể sử dụng các bộ đếm CSS để tự động đánh số các mục danh sách hoặc các phần tử cụ thể.

Tạo và Khởi tạo Bộ đếm 

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

Bạn có thể tạo một bộ đếm và đặt lại nó bằng thuộc tính counter-reset.

Tăng giá trị Bộ đếm 

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}

Bạn tăng giá trị bộ đếm bằng thuộc tính counter-increment và hiển thị giá trị bộ đếm bằng hàm counter.

counters()

Hàm counters trong CSS rất hữu ích để quản lý các bộ đếm tùy chỉnh, chẳng hạn như đánh số các mục danh sách hoặc sắp xếp đoạn văn. Hàm này có thể nối nhiều giá trị bộ đếm với một chuỗi và hiển thị nó trong nội dung CSS. Ở đây, chúng tôi sẽ giải thích chi tiết từ cách sử dụng cơ bản của hàm counters đến các ví dụ ứng dụng thực tế.

Sự khác biệt giữa counter và counters

Cả hai hàm counter và counters đều được sử dụng để hiển thị giá trị bộ đếm, nhưng chúng có sự khác biệt sau.

  • counter: Truy xuất giá trị của một bộ đếm đơn.
  • counters: Nối nhiều giá trị bộ đếm bằng một ký tự phân cách được chỉ định và hiển thị chúng.

Ví dụ, nếu bạn muốn sử dụng bộ đếm với các mục danh sách lồng nhau, bạn có thể sử dụng hàm counters để hiển thị chúng bằng cách nối các bộ đếm cha và con.

Cú pháp của hàm counters 

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

Hàm counters được sử dụng với cú pháp sau.

  • <counter-name>: Xác định tên của bộ đếm cần sử dụng.
  • <string>: Xác định chuỗi sẽ được chèn giữa mỗi bộ đếm (thường là các ký tự phân cách như . hoặc -).

Ví dụ về việc sử dụng hàm counters

Tiếp theo, hãy xem một ví dụ sử dụng hàm counters.

 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}
  • Trong ví dụ này, các bộ đếm cha và con được nối lại để tạo danh sách lồng nhau hai cấp.
    • Bộ đếm list-counter đang được định nghĩa.
    • Hàm counters được sử dụng để nối và hiển thị bộ đếm danh sách cha và bộ đếm danh sách con.

Ví dụ nâng cao sử dụng bộ đếm đa cấp

Sử dụng hàm counters, bạn có thể quản lý linh hoạt các bộ đếm đa cấp như đánh số tùy chỉnh hoặc đánh số đoạn văn. Ví dụ, nó rất hữu ích khi tạo các tài liệu bao gồm các chương và mục.

 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}

Trong đoạn mã này, các bộ đếm cho chương (h1), mục (h2) và mục con (h3) được đặt lại và hàm counters được sử dụng để kết hợp từng cấp độ.

Tóm tắt

Hàm counters rất hữu ích khi bạn muốn tùy chỉnh và hiển thị nhiều bộ đếm theo cấu trúc phân cấp. Bằng cách sử dụng các bộ đếm CSS, bạn có thể tùy chỉnh tự do việc đánh số danh sách và tiêu đề, cung cấp cho các trang web một cấu trúc thông tin cao cấp.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các thuộc tính CSS liên quan đến trang trí mô hình hộpCác thuộc tính CSS liên quan đến bảng