Trình bày hay liệt kê một danh sách có kèm theo các bullet hoặc dưới dạng đánh số giúp phần văn bản của bạn dễ đọc và tạo cảm giác thân thiện hơn. Để tạo style riêng cho phần list, bạn có thể sử dụng các thuộc tính trong CSS.
Có 5 thuộc tính trong CSS
- Thuộc tính list-style-type cho phép bạn kiểm soát hình dạng hay bề ngoài của Marker (giống như Bullet) chẳng hạn ở dạng hình tròn, hình vuông, hay dạng số, ...
- Thuộc tính list-style-position xác định rằng marker nên xuất hiện bên trong hay bên ngoài luồng hiển thị nội dung.
- Thuộc tính list-style-image: sử dụng một hình ảnh để làm marker thay cho các bullet hoặc số.
- Thuộc tính list-style: sử dụng thuộc tính này, bạn có thể khai báo một lần mà vẫn có thể xác định được tất cả các thuộc tính trên.
- Thuộc tính marker-offset xác định khoảng cách giữa một marker và phần text trong danh sách.
Phần tiếp theo trình bày cách sử dụng các thuộc tính trên để tạo style cho danh sách trong CSS.
Thuộc tính list-style-type trong CSS
Để điều khiển hình dạng (hình tròn, hình vuông, …) của bullet trong trường hợp một danh sách không có thứ tự và style của các ký tự số (số La Mã, số tự nhiên, …) trong trường hợp danh sách đã được sắp xếp, bạn sử dụng thuộc tính list-style-type trong CSS.
Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách không có thứ tự:
| Giá trị | Miêu tả |
|---|---|
| none | Không hiển thị |
| disc (default) | Một dấu chấm tròn |
| circle | Một vòng tròn trống |
| square | Một hình vuông |
Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách đã qua sắp xếp:
| Giá trị | Miêu tả | Ví dụ |
|---|---|---|
| decimal | Số tự nhiên | 1,2,3,4,5 |
| decimal-leading-zero | Dạng số, bắt đầu từ 01 | 01, 02, 03, 04, 05 |
| lower-alpha | Dạng chữ cái thường | a, b, c, d, e |
| upper-alpha | Dạng chữ cái hoa | A, B, C, D, E |
| lower-roman | Dạng số La Mã thường | i, ii, iii, iv, v |
| upper-roman | Dạng số La Mã hoa | I, II, III, IV, V |
| lower-greek | Dạng chữ Hy Lạp thường | alpha, beta, gamma |
Ví dụ sau minh họa cách sử dụng thuộc tính list-style-type và các giá trị của thuộc tính này trong CSS.
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ul style="list-style-type:square;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
</body>
</html>Kết quả là:
- Java
- Android
- C++
- Java
- Android
- C++
- Java
- Android
- C++
- Java
- Android
- C++
- Java
- Android
- C++
Thuộc tính list-style-position trong CSS
Để xác định xem marker nên hiển thị ở bên trong hay bên ngoài luồng hiển thị nội dung, bạn sử dụng thuộc tính list-style-position trong CSS.
Thuộc tính này có thể nhận giá trị: none, inside hoặc outside.
Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-position trong CSS:
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle; list-style-position:outside;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ul style="list-style-type:square;list-style-position:inside;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ol style="list-style-type:decimal;list-style-position:outside;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
</body>
</html>Kết quả là:
- Java
- Android
- C++
- Java
- Android
- C++
- Java
- Android
- C++
- Java
- Android
- C++
Thuộc tính list-style-image trong CSS
Nếu bạn muốn tạo điểm nhấn cho phần danh sách bạn đang tạo, bạn có thể sử dụng một hình ảnh đẹp nào đó để sử dụng thay cho các marker đơn điệu có sẵn. Để thực hiện điều này, bạn sử dụng thuộc tính list-style-image trong CSS.
Cú pháp của thuộc tính này tương tự như thuộc tính background-image, tại đây, bạn cần xác định URL tới nơi bạn lưu giữ hình ảnh. Lưu ý rằng, nếu không tìm thấy hình ảnh, thì các bullet mặc định sẽ được sử dụng.
Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-image trong CSS
<html>
<head>
</head>
<body>
<ul>
<li style="list-style-image: url(https://media.hoc.tv/medias/list-va-marker-5fd0dcb58c2e5.png);">Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ol>
<li style="list-style-image: url(https://media.hoc.tv/medias/list-va-marker-5fd0dcb58c2e5.png);">Java</li>
<li>Android</li>
<li>C++</li>
</ol>
</body>
</html>Kết quả là:
- Java
- Android
- C++
- Java
- Android
- C++
Thuộc tính list-style trong CSS
Sử dụng thuộc tính list-style, bạn có thể xác định tất cả style cho danh sách (toàn bộ các thuộc tính ở trên) chỉ trong một khái báo Style Rule. Thứ tự của giá trị các thuộc tính này có thể là tùy ý.
Ví dụ sau minh họa cách sử dụng thuộc tính list-style trong CSS:
<html>
<head>
</head>
<body>
<ul style="list-style: inside square;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ol style="list-style: outside upper-alpha;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
</body>
</html>Kết quả là:
- Java
- Android
- C++
- Java
- Android
- C++
Thuộc tính marker-offset trong CSS
Nếu bạn cảm thấy khoảng cách mặc định giữa marker và phần nội dung hiển thị là dài hơn hoặc ngắn hơn bạn mong muốn, và bạn muốn thiết lập lại, bạn nên sử dụng thuộc tính marker-offset. Giá trị của thuộc tính này ở dưới dạng độ dài (đơn vị px, pt, cm, …).
Ghi chú: IE 6 và Netscape 7 không hỗ trợ thuộc tính này.
Ví dụ sau minh họa cách sử dụng thuộc tính marker-offset trong CSS:
<html>
<head>
</head>
<body>
<ul style="list-style: inside square; marker-offset:2em;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ul>
<ol style="list-style: outside upper-alpha; marker-offset:2cm;">
<li>Java</li>
<li>Android</li>
<li>C++</li>
</ol>
</body>
</html>Kết quả là:
- Java
- Android
- C++
- Java
- Android
- C++
Tạo màu cho List trong CSS
Với các thuộc tính đã học từ các chương trước, bạn có thể sử dụng kết hợp chúng với nhau để tạo một danh sách đẹp và lộng lẫy hơn bằng cách thêm màu nền chẳng hạn.
Ví dụ dưới đây minh họa cách sử dụng của thuộc tính background-color và thuộc tính padding trong CSS (bạn sẽ học thuộc tính padding trong chương tiếp theo).
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
