CSS Lists – Cách sử dụng Danh Sách trong CSS

CSS Lists là một tập hợp các thuộc tính CSS được sử dụng để kiểm soát các danh sách trên trang web. Danh sách có thể được phân loại thành danh sách được sắp xếp và danh sách không được sắp xếp. Trong các danh sách đã được sắp xếp, các mục trong danh sách được đánh dấu bằng chữ cái và số, trong khi đó trong các danh sách không được sắp xếp, các mục trong danh sách được đánh dấu bằng đạn hoặc các ký hiệu khác. Chúng ta có thể tạo kiểu cho các danh sách bằng cách sử dụng CSS.

Các thuộc tính của danh sách CSS cho phép chúng ta:

• Thiết lập khoảng cách giữa văn bản và đánh dấu trong danh sách.
• Chỉ định một hình ảnh cho đánh dấu thay vì sử dụng số hoặc điểm đánh dấu.
• Kiểm soát hình dáng và xuất hiện của đánh dấu.
• Đặt đánh dấu bên ngoài hoặc bên trong hộp chứa các mục trong danh sách.
• Thiết lập màu nền cho các mục trong danh sách và danh sách.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS Lists là gì ?

Khi thiết kế trang web, việc tạo danh sách là một phần quan trọng của thiết kế. Danh sách được sử dụng để liệt kê các thông tin, sản phẩm và dịch vụ. CSS cho phép chúng ta tạo kiểu cho danh sách bằng cách sử dụng các thuộc tính như list-style-type, list-style-image, list-style-position, marker-offset và list-style.

CSS Lists là một phần quan trọng của thiết kế web và được sử dụng bởi các nhà thiết kế web, nhà phát triển web và các chuyên gia SEO. Các nhà thiết kế web sử dụng CSS Lists để tạo ra các danh sách chuyên nghiệp và thu hút khách hàng. Nhà phát triển web sử dụng CSS Lists để tối ưu hóa trang web và cải thiện trải nghiệm người dùng. Các chuyên gia SEO sử dụng CSS Lists để tăng khả năng tìm thấy của trang web trên các công cụ tìm kiếm bằng cách tối ưu hóa các từ khóa trong danh sách.

CSS Lists là một bộ các thuộc tính CSS được sử dụng để kiểm soát các danh sách trên trang web. Chúng ta có thể tạo kiểu cho danh sách bằng cách sử dụng các thuộc tính như list-style-type, list-style-image, list-style-position, marker-offset và list-style.

Hướng dẫn CSS Lists

Để tạo kiểu cho danh sách bằng CSS, chúng ta có thể sử dụng các thuộc tính như list-style-type, list-style-image, list-style-position, marker-offset và list-style. Dưới đây là hướng dẫn cụ thể về việc sử dụng các thuộc tính này:

1. Thuộc tính list-style-type

Thuộc tính list-style-type cho phép chúng ta thiết lập loại đánh dấu của danh sách. Loại đánh dấu mặc định của danh sách đã được sắp xếp là chữ số La Mã, trong khi loại đánh dấu mặc định của danh sách không được sắp xế thì là dấu đạn hoặc ký hiệu tròn. Chúng ta có thể thiết lập loại đánh dấu khác như hình vuông, hình tròn, số La-tinh, chữ cái Latin và nhiều hơn nữa bằng cách sử dụng thuộc tính list-style-type. Nếu giá trị của thuộc tính được đặt là none, đánh dấu sẽ bị loại bỏ.

Ví dụ:

ul {
  list-style-type: square;
}

2. Thuộc tính list-style-position

Thuộc tính list-style-position cho phép chúng ta xác định vị trí hiển thị của đánh dấu trong danh sách đã được sắp xếp hoặc ký hiệu trong danh sách không được sắp xếp. Có hai giá trị của thuộc tính này là inside và outside. Nếu giá trị được đặt là inside, đánh dấu sẽ được hiển thị bên trong mục, ngược lại nếu giá trị được đặt là outside, đánh dấu sẽ được hiển thị bên ngoài mục.

Ví dụ:

ul {
  list-style-position: inside;
}

3. Thuộc tính list-style-image

Thuộc tính list-style-image cho phép chúng ta xác định một hình ảnh để sử dụng làm đánh dấu trong danh sách. Cú pháp của thuộc tính này giống với thuộc tính background-image, cho phép chúng ta thiết lập một đường dẫn đến hình ảnh và chỉ định kích thước của đánh dấu.

Ví dụ:

ul {
  list-style-image: url("marker.png");
}

4. Thuộc tính marker-offset

Thuộc tính marker-offset được sử dụng để xác định khoảng cách giữa đánh dấu và nội dung của mục trong danh sách. Tuy nhiên, thuộc tính này không được hỗ trợ trong IE6 hoặc Netscape 7.

Ví dụ:

ul {
  marker-offset: 10px;
}

5. Thuộc tính list-style

Thuộc tính list-style là thuộc tính rút gọn cho phép chúng ta thiết lập tất cả các thuộc tính danh sách trong một biểu thức duy nhất. Thứ tự của giá trị của thuộc tính này là type, position và image. Nếu bất kỳ giá trị thuộc tính nào bị thiếu, giá trị mặc định sẽ được sử dụng.

Ví dụ:

ul {
  list-style: square inside url("marker.png");
}

Ví dụ cụ thể:

<!DOCTYPE html>  
<html> 
   <head> 
   <title>CSS Lists</title>
      <style> 
	  .num{
	    list-style-type:decimal; 	  
	  }
	  .alpha{
	  	    list-style-type:lower-alpha; 
	  }
	  .roman{
	  	    list-style-type:lower-roman; 
	  }
	  .circle{
	    list-style-type:circle; 
	  }
	  .square{
	    list-style-type:square; 
	  }
	  .disc{
	    list-style-type:disc; 
	  }
      </style> 
   </head> 
   <body> 
      <h1> 
         Welcome to the Laptrinhvien.org 
      </h1> 
	        <h2> 
         Ordered Lists 
      </h2> 
      <ol class="num"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <ol class="alpha"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
	        <ol class="roman"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ol> 
      <h2> 
         Unordered lists 
      </h2> 
      <ul class="disc"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
      <ul class="circle"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 
	  <ul class="square"> 
         <li>one</li> 
         <li>two</li> 
         <li>three</li> 
      </ul> 

   </body> 
</html>

Ưu và Nhược điểm CSS Lists

Ưu điểm:

• Cho phép tạo kiểu cho các danh sách một cách linh hoạt và chuyên nghiệp.
• Tăng tính thẩm mỹ cho trang web.
• Cải thiện trải nghiệm người dùng trên trang web.

Nhược điểm:

• Một số thuộc tính không được hỗ trợ trên các trình duyệt web cũ.
• Sử dụng quá nhiều kiểu đánh dấu trong danh sách có thể làm cho trang web trở nên rối và khó đọc.

Lời khuyên CSS Lists

Khi thiết kế danh sách trên trang web, hãy sử dụng CSS Lists để tạo kiểu cho danh sách một cách chuyên nghiệp và thẩm mỹ. Hãy chọn loại đánh dấ k phù hợp với nội dung của trang web và chọn kiểu đánh dấu phù hợp để tăng tính thẩm mỹ cho trang web. Hãy nhớ luôn kiểm tra hiển thị của danh sách trên các trình duyệt khác nhau để đảm bảo rằng nó được hiển thị chính xác trên tất cả các thiết bị. Ngoài ra, hãy tránh sử dụng quá nhiều kiểu đánh dấu trong danh sách để tránh làm cho trang web trở nên rối và khó đọc.