Bài 14: Định dạng HTML List trong CSS

Nếu bạn nào mới bắt đầu, vui lòng xem bài HTML List trước khi bắt đầu bài viết này. Mình sẽ không nói về HTML List nữa mã sẽ hướng dẫn cách sử dụng CSS để định dạng các phần tử HTML List.


Nếu bạn nào mới bắt đầu, vui lòng xem bài HTML List trước khi bắt đầu bài viết này. Mình sẽ không nói về HTML List nữa mã sẽ hướng dẫn cách sử dụng CSS để định dạng các phần tử HTML List.
Trong bài viết này mình sẽ hướng dẫn cách sử dụng CSS để:
Quy định kiểu dánh dấu (ký tự, số, chữ số…) các phần tử trong danh sách
Loại bỏ kiểu đánh dấu (không hiển thị) của các phần tử
Sử dụng ảnh nền thay cho các ký tự, số… mặc định của các phần tử
1. Thuộc tính list-style-type
Như chúng ta đã biết HTML List bao gồm 2 loại:
- UnOrdered List (Không có thứ tụ): Danh sách các phần tử được dánh dấu bằng các ký tự (bullets)
- Ordered List (có thứ tự): Danh sách các phần tử được dánh dấu bằng Số, alphabet, số La Mã.

Các kiểu đánh dấu này được quy định bằng thuộc tính type của thẻ <ul> và <ol>. Nhưng với CSS chúng ta có thể quy định kiểu đánh dấu của các phần tử mà không cần quan tâm đó là danh sách có thứ tự hay không có thứ tự, cũng như cho phép hiển thị hay không hiển thị kiểu đánh dấu với thuộc tính list-style-type.

Một số giá trị của thuộc tính list-style-type thường gặp nhất



Ví dụ sau ta sử dụng CSS để quy định kiểu đánh dấu dạng alphabet ở dạng in thường cho cả danh sách có thứ tự và không có thứ tự:

Code HTML
Danh sách không có thứ tự
<ul>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
Danh sách có thứ tự
<ol>
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ol>


Code CSS:
ul,ol{list-style-type: lower-alpha}

Và đây là kết quả:

2. Loại bỏ kiểu đánh dấu
Trong thiết kế của mình, không phải lúc nào bạn cũng muốn hiển thị các kiểu dánh dấu như trên, nhất là trong trường hợp sử dụng HTML List để thiết kế Menu. Để không hiển thị kiểu đánh dấu thứ tự các phần tử trong danh sách, ta chỉ việc khai báo css như sau:

list-style-type: none

3. Thay thế kiểu đánh dấu bằng ảnh nền
Chúng ta cũng có thể thay thế kiểu hiện của các phần tử trong danh sách bằng một ảnh nền với thuộc tính list-type-image

 list-style-image: url(icon.gif)

4. Thuộc tính list-style-position
Thuộc tính list-style-position quy định kiểu đánh dấu được hiển thị bên ngoài hay bên trong nội dung của phần tử tương ứng với 2 giá trị inside và outside (mặc định).
Chúng ta cùng xét ví dụ sau:
Code HTML

Hiển thị với giá trị inside
<ul class="a">
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>
Hiển thị với giá trị outside
<ul class="b">
<li>Phần tử 1</li>
<li>Phần tử 2</li>
<li>Phần tử 3</li>
</ul>

Để thấy rõ hơn về inside và outside mình sẽ quy định border cho các phần tử trong danh sách, và sử dụng ảnh nền làm kiểu đánh dấu.

 /* Hiển thị với ảnh nền */
ul.a, ul.b {list-style-image: url(icon.gif)}
/* Tạo border các các phần tử <li> */
ul.a li, ul.b li{ border: 1px solid #cfcfcf; margin-top: 7px; width: 150px }
/* Danh sách thứ nhất hiển thị với giá trị inside */
ul.a {list-style-position: inside}
/* Danh sách thứ 2 hiển thị với giá trị outside*/
ul.b {list-style-position: outsite}

Kết quả:

Chúng ta có gộp chung 3 thuộc tính: list-style-type, list-style-position và list-style-image theo thứ tự tương ứng như sau:

ul{list-style: circle inside url(icon.gif)}

Bài viết tiếp theo mình sẽ hướng dẫn các bạn sử dụng HTML List kết hợp với CSS để thiết kế menu cho trang web. Cảm ơn bạn đã quan tâm theo dõi.