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).
Ví dụ
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;//thuộc tính để có hình vuông }
Hiển thị trình duyệt khi có CSS:
Danh sách list-style-type 01.
Danh sách list-style-type 02.
Không có nhận xét nào:
Đăng nhận xét