CSS Lists

21/05/2019

Bài sau » « Bài trước

HTML Lists and CSS List

Trong HTML có 2 cách chính để tạo list :

  • Không có thứ tự (ul) - List được đánh dấu theo biểu tượng 
  • Có thứ tự (ol) - List được đánh dấu theo số thứ tự

Thuộc tính của CSS List cho phép bạn :

  1. Thiết lập đánh dấu khác cho list item có thứ tự.
  2. Thiết lập đánh dấu khác cho list item không có thứ tự.
  3. Thiết lập image cho list item.
  4. Thêm background color cho list và list item.

Thuộc tính List style type

Thuộc tính list-style-type cho phép bạn thay đổi đánh dấu của list . Xem ví dụ dưới đây: 

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

Kết quả hiển thị :

- Không có thứ tự :

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

- Có thứ tự:

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

Thuộc tính List style image

Thuộc tính list-style-image cho phép bạn dùng image để đánh dấu cho list . Xem ví dụ dưới đây: 

ul { list-style-image: url('sqpurple.gif'); }

Kết quả hiển thị:

  • Coffee
  • Tea
  • Coca Cola

Position của đánh dấu trong list

Thuộc tính list-style-position chỉ định vị trí của đánh dấu của list.

list-style-position: outsite; có nghĩa là đánh dấu nằm bên ngoài list item. Đây là thuộc tính mặc định. Xem ví dụ bên dưới:

  • Coffee
  • Tea
  • Coca Cola

list-style-position: inside; có nghĩa là đánh dấu nằm bên trong list item. Xem ví dụ bên dưới:

  • Coffee
  • Tea
  • Coca Cola

Xóa thuộc tính mặc định

Thuộc tính list-style-type:none thường được dùng để xóa đánh dấu của list. Mặc định list có margin và padding. Vì vậy để xóa nó, ta dùng margin: 0padding: 0 cho ul hoặc ol.

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

Cú pháp ngắn gọn

Thuộc tính list-style là cú pháp viết ngắn gọn. Cú pháp viết như sau:

ul { list-style: square inside url("sqpurple.gif"); }

Khi viết theo cú pháp ngắn gọn thì thứ tự viết là:

  1. list-style-type
  2. list-style-position
  3. list-style-image

Nếu một trong các giá trị trên bị thiếu, thì giá trị mặc định sẽ được lấy.

Bài học CSS Lists đến đây là hết. Chúc các bạn thành công!


Bài sau » « Bài trước
Back to top