Bài đăng nổi bật


Các thuộc tính về danh sách trong CSS cho phép bạn:

  • Thiết lập các đánh dấu phần tử danh sách khác nhau cho các danh sách có thứ tự
  • Thiết lập các đánh dấu phần tử danh sách khác nhau cho các danh sách không có thứ tự
  • Thiết lập một hình ảnh đánh dấu phần tử danh sách


Các danh sách HTML

Trong HTML, có hai loại danh sách:

  • Danh sách không có thứ tự (<ul>) - các phần tử trong danh sách được đánh dấu bằng các bullet.
  • Danh sách có thứ tự (<ol>) - các phần tử trong danh sách được đánh dấu bằng số hoặc chữ cái
Với CSS, danh sách có thể được định kiểu thêm, hình ảnh có thể được sử dụng để đánh dấu các mục trong danh sách.


Đánh dấu mục trong danh sách khác nhau

Thuộc tính list-style-type chỉ định các kiểu đánh dấu mục trong danh sách.
Ví dụ sau cho thấy một số danh sách có sẵn các đánh dấu dành cho mục của nó:
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Một số các giá trị dành cho danh sách không có thứ tự, và một số dành cho danh sách có thứ tự.


Đánh dấu các mục của danh sách bằng hình ảnh

Thuộc tính list-style-image chỉ định một hình ảnh để đánh dấu các mục trong danh sách:
ul {
list-style-image: url('sqpurple.gif');
}


Vị trí đánh dấu các mục trong danh sách

Thuộc tính list-style-position xác định nơi sẽ đánh dấu các mục của danh sách sẽ xuất hiện bên trong hoặc bên ngoài dòng nội dung:
ul {
list-style-position: inside;
}


Danh sách - Thuộc tính rút gọn

Thuộc tính list-style là một thuộc tính rút gọn. Nó được sử dụng để đặt tất cả các thuộc tính của danh sách trong một mô tả (declaration):
ul {
list-style: square inside url("sqpurple.gif");
}
Khi sử dụng thuộc tính rút gọn, thứ tự của các giá trị trong thuộc tính là:
·         list-style-type (nếu một danh sách đánh dâu bằng hình ảnh được chỉ định, giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì một số lý do nào đó không thể hiển thị)
·         list-style-position (xác định cho vị trí đánh dấu mục danh sách xuất hiện bên trong hoặc bên ngoài dòng nội dung)
·         list-style-image (chỉ định một hình ảnh như để đánh dấu các mục của danh sách)
Nếu một trong các giá trị thuộc tính ở trên bị thiếu, giá trị mặc định cho của các thuộc tính này sẽ được sử dụng, nếu có.


Kiểu của danh sách với màu sắc

Chúng ta cũng có thể định kiểu danh sách với màu sắc, để làm cho chúng nhìn thú vị hơn một chút.
Bất cứ điều gì thêm vào thẻ <ol> hoặc <ul>, sẽ ảnh hưởng đến toàn bộ danh sách, trong khi thuộc tính được bổ sung vào các thẻ <li> sẽ ảnh hưởng đến các mục (phần tử) của danh sách:
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}


Kết quả:

1.    Coffee
2.    Tea
3.    Coca Cola
·         Coffee
·         Tea
·         Coca Cola


Ví dụ khác

Ví dụ này cho thấy tất cả các kiểu đánh dấu khác nhau cho mục trong danh sách trong.


Tự làm bài tập!


Post a Comment

Mới hơn Cũ hơn