Error message

Notice: Undefined offset: 1 in nice_menus_block_view() (line 306 of /home/mamast08nv/public_html/sites/all/modules/nice_menus/nice_menus.module).

HỌC HTML & CSS|Định đạ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.
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

Giá trị	Mô tả
none	Không hiển thị đánh dấu
disc	Chấm vuông
circle	Chấm tròn trắng
square	Chấm tròn đen
decimal	Kiểu số
lower-alpha	Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)
upper-alpha	Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman	Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman	Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)

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

01
Danh sách không có thứ tự

02
<ul>

03
     <li>Phần tử 1</li>

04
     <li>Phần tử 2</li>

05
     <li>Phần tử 3</li>

06
</ul>

07
Danh sách có thứ tự

08
<ol>

09
     <li>Phần tử 1</li>

10
     <li>Phần tử 2</li>

11
     <li>Phần tử 3</li>

12
</ol>