Bài 16: CSS Lists (Tạo kiểu cho danh sách bằng CSS)

Danh sách không theo thứ tự:

Coffee
Tea
Coca Cola

Danh sách theo thứ tự:

Coffee
Tea
Coca Cola

Danh sách HTML và Thuộc tính danh sách CSS

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

Danh sách không theo thứ tự (<ul>) – các mục của danh sách được đánh dấu bằng dấu đầu dòng
Danh sách theo thứ tự (<ol>) – các mục của danh sách được đánh dấu bằng số hoặc chữ cái

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

Đặt các dấu mục khác nhau cho danh sách theo thứ tự
Đặt các dấu mục khác nhau cho danh sách không theo thứ tự
Dùng hình ảnh làm dấu mục cho danh sách
Thêm màu nền vào danh sách và các mục của danh sách

Thuộc tính list-style-type

Thuộc tínhlist-style-type xác định kiểu của dấu mục.

Ví dụ sau đây cho thấy một số dấu mục danh sách có sẵn:

Ví dụ:


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;
}

Chú ý: 1 vài giá trị là của danh sách không theo thứ tự, 1 vài là của danh sách theo thứ tự.

Thuộc tính list-style-image

Thuộc tính list-style-image dùng để đặt hình ảnh làm dấu mục cho danh sách

Ví dụ:


ul {
list-style-image: url('https://timoday.edu.vn/wp-content/uploads/2020/02/sqpurple.gif');
}

Thuộc tính list-style-position

Thuộc tínhlist-style-position xác định vị trí của các dấu mục (bullet points).

“list-style-position: outside;” có nghĩa là các dấu mục sẽ nằm bên ngoài các mục của danh sách. Bắt đầu của mỗi dòng của một mục danh sách sẽ được căn chỉnh theo chiều dọc.

“list-style-position: inside;” có nghĩa là các dấu mục sẽ nằm bên trong các mục của danh sách. Vì nó là một phần của mục danh sách.

Ví dụ:


ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}

Thuộc tính list-style-type

Thuộc tínhlist-style-type:none được dùng để bỏ đi các dấu mục. Lưu ý rằng danh sách cũng có lề (margin) và phần đệm (padding) mặc định. Để xóa cái này, thêm margin:0và padding:0vào <ul> hoặc <ol>:

Ví dụ:


ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Thuộc tính list-style

Thuộc tính list-style được sử dụng để đặt tất cả các thuộc tính của danh sách trong một khai báo:

Ví dụ:


ul {
list-style: square inside url("https://timoday.edu.vn/wp-content/uploads/2020/02/sqpurple.gif");
}

Khi sử dụng thuộc tính này, thứ tự các giá trị của thuộc tính là:

list-style-type (nếu một hình ảnh được xác định làm dấu mục của danh sách (list-style-image), giá trị của thuộc tính này sẽ được hiển thị nếu hình ảnh vì lý do nào đó không thể được hiển thị)
list-style-position (xác định các dấu mục danh sách sẽ nằm bên trong hay bên ngoài luồng nội dung)
list-style-image (xác định một hình ảnh làm dấu 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 thuộc tính bị thiếu (nếu có) sẽ được chèn.

Tạo màu sắc cho danh sách

Chúng ta cũng có thể tạo kiểu cho danh sách bằng màu sắc, để làm cho chúng trông thú vị hơn một chút.

Bất cứ điều gì được thêm vào thẻ <ol> hoặc <ul>, đều ảnh hưởng đến toàn bộ danh sách, trong khi các thuộc tính được thêm vào thẻ <li> sẽ ảnh hưởng đến các mục danh sách riêng lẻ:

Ví dụ:


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;
}