Hướng dẫn 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

  • ):
      ,
        ,

        Cấu trúc

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

        Với giá trị như sau:

        Thuộc tínhgiá 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:

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

        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ợ

        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