CSS Lists

Xin chào mọi người, bài học hôm nay mình sẽ giới thiệu cho các bạn về một thuộc tính nữa của css là Css Lists. Nó tạo ra danh sách rất hữu ích dúp truyền đạt một tập hợp điểm đánh số hoặc hay dấu đầu dòng.

Các thuộc tính

CSS có những thuộc tính như là: list-style-typelist-style-imagelist-style-position nó cho phép thay đổi biểu tượng đánh dấu danh mục của danh sách.

Bây giờ chúng ta hãy cùng nhau tìm hiểu sâu hơn về các thuộc tính của nó.

list-style-type

Nó là thuộc tính cho phép chỉ định loại đánh dấu mục của danh sách. Ví dụ như hình tròn, vuông, chữ la mã …

list-style-type có rất nhiều giá trị, dưới đây là các giá trị thông dụng nhất:

  • circle: hiển thị ra dạng hình tròn
  • square:  hiển thị ra dạng hình vuông
  • upper-roman: hiển thị ra dạng chữ la mã như là I, II, II, IV …
  • lower-roman:hiển thị ra dạng chữ la mã thường như là i, ii, iii, iv …
  • upper-latin: hiển thị ra dạng chữ cái latin hoa như A, B, C …
  • lower-alpha: hiển thị ra dạng chữ cái alphabet như a, b, c …
  • none: không hiển thị gì hêt
  • decimal: hiển thị ra dạng số như 1, 2, 3 …
  • decimal-leading-zero: hiển thị ra dạng số nhưng sẽ thêm số 0 phía trước số, nếu số đó < 10 như 01, 02, 03 …

Cú pháp:

Selector {
   list-style-type: giá trị;
}

Ví dụ cụ thể:

.demo {
      list-style-type: circle;
    }
.demo {
      list-style-type: square;
    }
.demo {
      list-style-type: upper-roman;
    }
.demo {
      list-style-type: lower-roman;
    }
.demo  {
      list-style-type: upper-latin;
    }
.demo {
      list-style-type: lower-alpha ;
    }
.demo {
      list-style-type: none;
    }
.demo{
      list-style-type: decimal;
    }

list-style-image

list-style-image là thuộc tính sử dụng hình ảnh để đánh dấu mục của danh sách.

Cú pháp:

selector {
   list-style-image: url của hình ảnh;
}

Ví dụ cụ thể:

<!DOCTYPE html>
<html>
  <head>
    <style>
      li {
        list-style-image: url('../img/1.1.jpg');
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Giá trị 1</li>
      <li>Giá trị 2</li>
      <li>Giá trị 3</li>
    </ul>
  </body>
</html>

Hiển thị:

Css lists

ảnh hiển thị

list-style-position

list-style-position là thuộc tính  thiết lập vị trí nhằm hiển thị của các đánh dấu mục của một danh sách.

list-style-position gồm 2 giá trị chính là:

  • outside: đánh dấu mục của danh sách  nằm bên ngoài của các phần tử của danh sách.
  • inside: đánh dấu mục của danh sách nằm bên trong của các phần tử của danh sách.

Cú pháp:

selector {
   list-style-position: giá trị;
}

Ví dụ minh họa:

ul.a {list-style-position: inside;}
ul.a {list-style-position: outsite;}
p {color: blue;}

Bạn có thể tham khảo:

CSS Buttons

Cách reponsive Videos với CSS

CSS Box Sizing

CSS3 Rounded Corners

Kết luận

Bài viết của mình giới thiệu về cách sử dụng của Css Lists đến đây hết rồi. Chúc các bạn một ngày học tập và rèn luyện hiệu quả hẹn gặp các bạn trong các seri tiếp.

Bạn cũng có thể tham khảo thêm nhiều điều bổ ích về lập trình tại đây.

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *