Thuộc tính list-style trong CSS

Định nghĩa và sử dụng

Thuộc tính list-style thiết lập kiểu cho một danh sách.

Chú ý: thuộc tính list-style chỉ sử dụng được cho danh sách (những thành phần chứa <li>): <ol>,<ul>,<menu>

Cấu trúc

tag { list-style: giá trị; }

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
list-style	Một hoặc nhiều giá trị của các thuộc tính image, position, style bên dưới.	list-style: square;	Đây là dạng viết ngắn gọn, tổng hợp các kiểu bên dưới (image, position, type).
list-style-image	URL	list-style: url(images/list.gif);	Thay thế các mục của danh sách bằng hình ảnh.
	none	list-style: none;	Không hiển thị image list, đây là dạng mặc định.
	inherit	list-style: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
list-style-position	inside	list-style: inside;	Xác định các mục nằm bên trong nội dung.
	outside	list-style: outside;	Xác định các mục nằm bên ngoài nội dung, đây là dạng mặc định.
	inherit	list-style:inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).
list-style-	armenian	list-style-type: armenian;	Danh sách list-style-type01. Danh sách list-style-type 02.
	circle	list-style-type: circle;	Danh sách list-style-type01. Danh sách list-style-type 02.
	cjk-ideographic	list-style-type: cjk-ideographic;	Danh sách list-style-type01. Danh sách list-style-type 02.
	decimal	list-style-type: decimal;	Danh sách list-style-type01. Danh sách list-style-type 02.
	decimal-leading-zero	list-style-type: decimal-leading-zero;	Danh sách list-style-type01. Danh sách list-style-type 02.
	disc	list-style-type: disc;	Danh sách list-style-type01. Danh sách list-style-type 02.
	georgian	list-style-type: georgian;	Danh sách list-style-type01. Danh sách list-style-type 02.
	hebrew	list-style-type: hebrew;	Danh sách list-style-type01. Danh sách list-style-type 02.
	hiragana	list-style-type: hiragana;	Danh sách list-style-type01. Danh sách list-style-type 02.
	hiragana-iroha	list-style-type: hiragana-iroha;	Danh sách list-style-type01. Danh sách list-style-type 02.
	katakana	list-style-type: katakana;	Danh sách list-style-type01. Danh sách list-style-type 02.
	katakana-iroha	list-style-type: katakana-iroha;	Danh sách list-style-type01. Danh sách list-style-type 02.
	lower-alpha	list-style-type: lower-alpha;	Danh sách list-style-type01. Danh sách list-style-type 02.
	lower-greek	list-style-type: lower-greek;	Danh sách list-style-type01. Danh sách list-style-type 02.
	lower-latin	list-style-type: lower-latin;	Danh sách list-style-type01. Danh sách list-style-type 02.
	lower-roman	list-style-type: lower-roman;	Danh sách list-style-type01. Danh sách list-style-type 02.
	none	list-style-type: none;	Danh sách list-style-type01. Danh sách list-style-type 02.
	square	list-style-type: square;	Danh sách list-style-type 01. Danh sách list-style-type 02.
	upper-alpha	list-style-type: upper-alpha;	Danh sách list-style-type01. Danh sách list-style-type 02.
	upper-latin	list-style-type: upper-latin;	Danh sách list-style-type01. Danh sách list-style-type 02.
	upper-roman	list-style-type: upper-roman;	Danh sách list-style-type01. Danh sách list-style-type 02.
	inherit	list-style-type: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

HTML viết:

<html>
<head></head>
<body>
<ul>
<li>Danh sách list-style-type 01.</li>
<li>Danh sách list-style-type 02.</li>
</ul>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Danh sách list-style-type 01.
Danh sách list-style-type 02.

CSS viết:

ul { list-style: square; }

Hiển thị trình duyệt khi có CSS:

Danh sách list-style-type 01.
Danh sách list-style-type 02.

Mr4 Java Developer

Đi lên từ nền tảng vững chắc!