Hướng dẫn Cách tùy biến trang trí danh sách với list-style

[PVS]

Cách tùy biến trang trí danh sách với list-style

Mặc định các thẻ list (danh sách) trong HTML sẽ được hiển thị dựa trên quy tắt hiển thị ở các trình duyệt cho các thẻ đó. Ví dụ khi bạn sử dụng <ol> thì sẽ hiển thị danh sách có đánh số, thẻ <ul> sẽ hiển thị dấu chấm tròn cho mỗi mục con bên trong. Nhưng với CSS, bạn có thể tùy biến lại được cách hiển thị của nó, chẳng hạn như bạn muốn dùng hình ảnh thay cho dấu chấm tròn ở thẻ <ul> chẳng hạn.

Và để tùy biến danh sách trong CSS, chúng ta sẽ sử dụng thuộc tính list-style để làm.

Quy tắt viết thuộc tính list-style
Ở thuộc tính này, bạn có thể viết giá trị theo thứ tự như sau:

list-style: <list-style-type> <list-style-position> <list-style-image>;

Trong đó, 3 giá trị mình ghi bên trong kia là 3 thuộc tính con của list-style nhưng bạn có thể viết vào thẻ này cùng lúc mà không cần viết từng thuộc tính. Cụ thể:

• list-style-type: Thay đổi loại hiển thị của danh sách.
• list-style-position: Tùy chỉnh vị trí hiển thị các dấu đầu dòng của mục con nằm bên trong danh sách hoặc bên ngoài danh sách.
• list-style-image: Sử dụng hình ảnh làm các dấu đầu dòng cho danh sách.

Khi biết cách sử dụng 3 thuộc tính con ở trên thì bạn có thể viết nó vào thuộc tính list-style cho gọn nhé.

Sử dụng thuộc tính này cho phần tử nào?
Các thuộc tính mà mình đề cập trong bài này đều sẽ sử dụng để tùy biến hiển thị cho các phần tử <li> trên website. Tuy nhiên bạn có thể sử dụng cho bất kỳ phần tử nào khác nếu phần tử đó có thêm thuộc tính display: list-item.

list-style-type

Ở giá trị này bạn sẽ thiết lập kiểu hiển thị cho các dấu đầu dòng trên mỗi thẻ <li>, bạn có thể thiết lập nó hiển thị thành số hay chữ cái hoặc ký tự tùy thích. Nó có một số thuộc tính thông dụng như sau:

• disc: Kiểu nút tròn có nền bên trong,
• circle: Kiểu nút tròn nhưng có viền nhưng không có nền.
• squre: Kiểu ô vuông có nền.
• decimal: Kiểu số thứ tự.
• lower-roman: Kiểu số La Mã in thường.
• upper-roman: Kiểu số La Mã in hoa.
• none: Xóa các dấu đầu dòng.

Ngoài ra nó còn rất nhiều các giá trị khác, bao gồm các giá trị đang thử nghiệm tại đây. Cũng nói thêm rằng tính năng list-style-type này ở CSS3 rất linh hoạt và có độ tùy biến cao, đặc biệt là với giá trị custom-counter-style nhưng cái này hơi nâng cao nên mình sẽ nói ở serie CSS3. Ví dụ

HTML:

<p>Ví dụ về các giá trị cơ bản của list-stype-type.</p>
<ul id="disc">
  <li>Kiểu disc</li>
  <li>Kiểu disc</li>
</ul>

<ul id="square">
  <li>Kiểu square</li>
  <li>Kiểu square</li>
</ul>

<ul id="circle">
  <li>Kiểu circle</li>
  <li>Kiểu circle</li>
</ul>

<ul id="decimal">
  <li>Kiểu decimal</li>
  <li>Kiểu decimal</li>
</ul>

CSS:

body {
  font-size: 24px;
}
#disc {
  list-style-type: disc;
}
#circle {
  list-style-type: circle;
}
#decimal {
  list-style-type: decimal;
}

Kết quả:

​

list-style-position
Với thuộc tính này chúng ta chỉ có duy nhất hai giá trị là:

• inside: Hiển thị dấu đầu dòng bên trong block.
• outside: Hiển thị dấu đầu dòng bên ngoài block.

Ví dụ:

HTML:

<ul id="inside">
  <li>Inside</li>
</ul>

<ul id="outside">
  <li>Outside</li>
</ul>

CSS:

ul {
  background: #e8e8e8;
  width: 250px;
  height: 50px;
  padding: 0;
  margin: 0 auto;
}
#inside {
  list-style-position: inside;
}
#outside {
  list-style-position: outside;
}

Kết quả:

​

list-style-image
Nếu bạn chán với kiểu hiển thị các dấu đầu dòng là ký tự thì có thể chuyển sang sử dụng hình ảnh (tốt nhất là một icon nhỏ) với thuộc tính list-style-image này. Cách dùng rất đơn giản như sau:

list-style-image: url('link ảnh');

Xem ví dụ sử dụng tại đây.

Viết ngắn gọn vào list-style
Bạn đã biết cách sử dụng ba thuộc tính ở trên rồi, bây giờ chúng ta có thể viết tất cả giá trị đó vào thuộc tính list-style để đỡ phải mất công viết nhiều hàng như sau:

list-style: square inside;

Hoặc nếu sử dụng ảnh thì không thể viết cùng với list-style-type được mà chỉ có hai giá trị như sau:

list-style: url('hình ảnh') outside;

Ví dụ sử dụng list-style cho các phần tử khác
Ở đầu bài mình có nói là các thuộc tính list-style này chỉ có thể áp dụng cho các phần tử <li> vì mặc định các phần tử này sẽ hiển thị theo kiểu list item (tức là mục danh sách). Nếu bạn muốn sử dụng cho các phần tử khác thì bắt buộc phải cần chuyển nó về kiểu hiển thị list item này. Bạn có thể chuyển kiểu hiển thị của nó với thuộc tính display: list-item. Dưới đây là một ví dụ về hiển thị danh sách với thẻ <p>.

HTML:

<div id="container">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
</div>

CSS:

#container {
  padding-left: 5px;
  margin-left: 15px;
}
#container p {
  display: list-item;
  list-style: disc;
  margin: 0;
}

Kết quả:

​

Và nếu bạn có tò mò về thuộc tính display thì mình sẽ giải thích về nó ở ngay bài tiếp theo đây.

Đơn giản phải không nào?

Chúc các bạn thành công.

Nguồn: thachpham.com​