List trong CSS

Trình bày hay liệt kê một danh sách có kèm theo các bullet hoặc dưới dạng đánh số giúp phần văn bản của bạn dễ đọc và tạo cảm giác thân thiện hơn. Để tạo style riêng cho phần list, bạn có thể sử dụng các thuộc tính trong CSS.

Có 5 thuộc tính trong CSS

Thuộc tính list-style-type cho phép bạn kiểm soát hình dạng hay bề ngoài của Marker (giống như Bullet) chẳng hạn ở dạng hình tròn, hình vuông, hay dạng số, ...
Thuộc tính list-style-position xác định rằng marker nên xuất hiện bên trong hay bên ngoài luồng hiển thị nội dung.
Thuộc tính list-style-image: sử dụng một hình ảnh để làm marker thay cho các bullet hoặc số.
Thuộc tính list-style: sử dụng thuộc tính này, bạn có thể khai báo một lần mà vẫn có thể xác định được tất cả các thuộc tính trên.
Thuộc tính marker-offset xác định khoảng cách giữa một marker và phần text trong danh sách.

Phần tiếp theo trình bày cách sử dụng các thuộc tính trên để tạo style cho danh sách trong CSS.

Thuộc tính list-style-type trong CSS

Để điều khiển hình dạng (hình tròn, hình vuông, …) của bullet trong trường hợp một danh sách không có thứ tự và style của các ký tự số (số La Mã, số tự nhiên, …) trong trường hợp danh sách đã được sắp xếp, bạn sử dụng thuộc tính list-style-type trong CSS.

Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách không có thứ tự:

Giá trị	Miêu tả
none	Không hiển thị
disc (default)	Một dấu chấm tròn
circle	Một vòng tròn trống
square	Một hình vuông

Dưới đây là các giá trị có thể được sử dụng cho dạng danh sách đã qua sắp xếp:

Giá trị	Miêu tả	Ví dụ
decimal	Số tự nhiên	1,2,3,4,5
decimal-leading-zero	Dạng số, bắt đầu từ 01	01, 02, 03, 04, 05
lower-alpha	Dạng chữ cái thường	a, b, c, d, e
upper-alpha	Dạng chữ cái hoa	A, B, C, D, E
lower-roman	Dạng số La Mã thường	i, ii, iii, iv, v
upper-roman	Dạng số La Mã hoa	I, II, III, IV, V
lower-greek	Dạng chữ Hy Lạp thường	alpha, beta, gamma

Quảng cáo

Ví dụ sau minh họa cách sử dụng thuộc tính list-style-type và các giá trị của thuộc tính này trong CSS.

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ul style="list-style-type:square;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ol style="list-style-type:decimal;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
      
      <ol style="list-style-type:lower-roman;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
   </body>
   
</html>

Kết quả là:

Thuộc tính list-style-position trong CSS

Để xác định xem marker nên hiển thị ở bên trong hay bên ngoài luồng hiển thị nội dung, bạn sử dụng thuộc tính list-style-position trong CSS.

Thuộc tính này có thể nhận giá trị: none, inside hoặc outside.

Quảng cáo

Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-position trong CSS:

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle; list-style-position:outside;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ul style="list-style-type:square;list-style-position:inside;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ol style="list-style-type:decimal;list-style-position:outside;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;list-style-position:inside;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
   </body>
   
</html>

Kết quả là:

Thuộc tính list-style-image trong CSS

Nếu bạn muốn tạo điểm nhấn cho phần danh sách bạn đang tạo, bạn có thể sử dụng một hình ảnh đẹp nào đó để sử dụng thay cho các marker đơn điệu có sẵn. Để thực hiện điều này, bạn sử dụng thuộc tính list-style-image trong CSS.

Cú pháp của thuộc tính này tương tự như thuộc tính background-image, tại đây, bạn cần xác định URL tới nơi bạn lưu giữ hình ảnh. Lưu ý rằng, nếu không tìm thấy hình ảnh, thì các bullet mặc định sẽ được sử dụng.

Ví dụ sau minh họa cách sử dụng của thuộc tính list-style-image trong CSS

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style="list-style-image: url(../images/bullet.gif);">Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ol>
         <li style="list-style-image: url(../images/bullet.gif);">Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
   </body>
   
</html>

Kết quả là:

Thuộc tính list-style trong CSS

Sử dụng thuộc tính list-style, bạn có thể xác định tất cả style cho danh sách (toàn bộ các thuộc tính ở trên) chỉ trong một khái báo Style Rule. Thứ tự của giá trị các thuộc tính này có thể là tùy ý.

Ví dụ sau minh họa cách sử dụng thuộc tính list-style trong CSS:

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
   </body>
   
</html>

Kết quả là:

Thuộc tính marker-offset trong CSS

Nếu bạn cảm thấy khoảng cách mặc định giữa marker và phần nội dung hiển thị là dài hơn hoặc ngắn hơn bạn mong muốn, và bạn muốn thiết lập lại, bạn nên sử dụng thuộc tính marker-offset. Giá trị của thuộc tính này ở dưới dạng độ dài (đơn vị px, pt, cm, …).

Ghi chú: IE 6 và Netscape 7 không hỗ trợ thuộc tính này.

Ví dụ sau minh họa cách sử dụng thuộc tính marker-offset trong CSS:

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square; marker-offset:2em;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Java</li>
         <li>Android</li>
         <li>C++</li>
      </ol>
   </body>
   
</html>

Kết quả là:

Tạo màu cho List trong CSS

Với các thuộc tính đã học từ các chương trước, bạn có thể sử dụng kết hợp chúng với nhau để tạo một danh sách đẹp và lộng lẫy hơn bằng cách thêm màu nền chẳng hạn.

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính background-color và thuộc tính padding trong CSS (bạn sẽ học thuộc tính padding trong chương tiếp theo).

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

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: