Css kiểu danh sách

Các thuộc tính về danh sách cho phép bạn thiết lập các ký hiệu chỉ số trong danh sách. Như đã biết trong HTML có hai loại danh sách

  • Danh sách có thứ tự. với ký hiệu thứ tự (số hoặc chữ) đầu phần tử
  • Danh sách không thứ tự. with signature đánh dấu (tròn, vuông) ở đầu phần tử

Với CSS, các danh sách này có thể mở rộng hơn, thậm chí các hình ảnh có thể được sử dụng để đánh dấu chỉ số phần tử. Phần tử trong danh sách không giới hạn là

  • mà bất kỳ phần tử nào có thiết lập css
    • Test 1 (inside)
    • Test 2 (inside)
    • Test 1 (outside)
    • Test 2 (outside)
    3. Đầu tiên, hãy xem thuộc tính
    • Test 1 (inside)
    • Test 2 (inside)
    • Test 1 (outside)
    • Test 2 (outside)
    4 có thể nhận các biến đánh giá phổ biến sau (áp dụng cho cả hai)
      and
        )

        The other value

          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          5 không có ký hiệu chỉ số cho phần tử
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          6 only number is ●
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          0 only number is ○
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          1 only number ■

        Những giá trị có thứ tự

          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          2 chỉ số 1, 2, 3
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          3 chỉ số 01, 02, 03
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          4 tôi, ii, iii, iv, v
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          5 I, II, III, IV, V
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          6 α, β, γ,
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          7 a, b, c,
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          8 A, B, C,. z
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          9 a, b, c,. z
          • Test 1 (inside)
          • Test 2 (inside)
          • Test 1 (outside)
          • Test 2 (outside)
          00 A, B, C,. z

        Ví dụ - list-style-type

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        1

        Kết quả

        Last list, used tag

        làm phần tử bao gồm, các phần tử danh sách bên trong cũng là thẻ

        (chỉ cần thiết lập css

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        01)

        Thuộc tính css list-style-position

        Thuộc tính

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        02 để thiết lập vị trí của ký hiệu đánh dấu phần tử. Nó nhận giá trị
        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        03 thì ký hiệu đánh dấu nằm trong phần tử,
        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        04 thì nằm bên ngoài phần tử

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)

        • Kiểm tra 1 (bên trong)
        • Kiểm tra 2 (bên trong)
        • Bài kiểm tra 1 (bên ngoài)
        • Bài kiểm tra 2 (bên ngoài)

        Bạn đã tìm thấy vị trí của các ký hiệu đánh dấu phần tử đầu cho trường hợp bên trong và bên ngoài

        Thuộc tính css list-style-image

        Thuộc tính

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        05. set setting image doing the first section element list, setting value used use function
        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        06

        Ví dụ sử dụng ảnh

        Css kiểu danh sách
        có url là https. //xuanthulab. mạng/ảnh/logosm. png is symbol of the head section of the list

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        0

        Thuộc tính

        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        07 là dạng kết hợp của cả ba thuộc tính
        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        4
        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        05
        • Test 1 (inside)
        • Test 2 (inside)
        • Test 1 (outside)
        • Test 2 (outside)
        02. Ba đặc tính này được khai báo trên 1 dòng