Thuộc tính list-style

Đăng bởi: Admin


Đị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-type armenian list-style-type: armenian;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
circle list-style-type: circle;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
cjk-ideographic list-style-type: cjk-ideographic;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
decimal list-style-type: decimal;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
decimal-leading-zero list-style-type: decimal-leading-zero;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
disc list-style-type: disc;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
georgian list-style-type: georgian;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
hebrew list-style-type: hebrew;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
hiragana list-style-type: hiragana;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
hiragana-iroha list-style-type: hiragana-iroha;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
katakana list-style-type: katakana;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
katakana-iroha list-style-type: katakana-iroha;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
lower-alpha list-style-type: lower-alpha;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
lower-greek list-style-type: lower-greek;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
lower-latin list-style-type: lower-latin;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
lower-roman list-style-type: lower-roman;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
none list-style-type: none;
  • Danh sách list-style-type 01.
  • 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-type 01.
  • Danh sách list-style-type 02.
upper-latin list-style-type: upper-latin;
  • Danh sách list-style-type 01.
  • Danh sách list-style-type 02.
upper-roman list-style-type: upper-roman;
  • Danh sách list-style-type 01.
  • 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.

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính list-style được hỗ trợ trong đa số các trình duyệt.

Trình duyệt IE9 và Opera không hỗ trợ các giá trị: cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, and katakana-iroha.

Giá trị inherit, decimal-leading-zero, lower-greek, lower-latin, upper-latin, armenian, georgian : IE8 trở xuống đòi hỏi phải có !Doctype


vncoder logo

Theo dõi VnCoder trên Facebook, để cập nhật những bài viết, tin tức và khoá học mới nhất!