Cách áp dụng CSS tạo list

Cùng FUNiX tìm hiểu về Cách áp dụng CSS để tạo list. Và để tạo list trong HTML bằng cách áp dụng CSS, chúng ta sẽ sử dụng thuộc tính list-style.

Trong một website, các thẻ list trong HTML sẽ hiển thị dựa trên các quy tắc hiển thị ở trình duyệt của mỗi thẻ. HTML thường có 2 kiểu list chính đó là <ol> và <ul>. Khi thiết lập danh sách bằng thẻ <ol> (ordered list), các hạng mục trong danh sách sẽ được đánh số thứ tự, sử dụng <ul> (unordered list) thì hạng mục trong danh sách sẽ hiển thị không được đánh số thứ tự mà thay vào đó là dấu chấm tròn cho mỗi mục con. Khi chúng ta ứng dụng ngôn ngữ CSS vào việc tạo list, các đặc tính của CSS sẽ cho phép chúng ta tùy biến danh sách theo nhiều kiểu khác nhau.

1. Quy tắc khi viết thuộc tính list-style

Các giá trị trong thuộc tính list-style có thể được viết theo thứ tự như sau:

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

Trong đó gồm 3 giá trị là 3 thuộc tính con của list-style, nhưng chúng ta có thể viết cùng lúc vào thẻ mà không cần viết riêng từng thuộc tính. Cụ thể:

• list-style-type: là thuộc tính dùng để thay đổi hiển thị danh sách theo tùy chọn.
• list-style-position: thuộc tính giúp người dùng có thể tùy chỉnh vị trí hiển thị cho các dấu đầu dòng của những hạng mục con bên trong hoặc bên ngoài danh sách.
• list-style-image: thuộc tính mà chúng ta có thể sử dụng hình ảnh để làm dấu đầu dòng cho các hạng mục trong danh sách.

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

Khi người dùng áp dụng CSS trong tạo list, thuộc tính list-style-type sẽ giúp xác định kiểu ký tự muốn dùng để liệt kê danh sách. Chúng ta có thể thiết lập hiển thị theo số thứ tự, chữ cái hoặc ký tự tùy thích. Những kiểu hiển thị thông dụng như sau:

Giá trị list-style-type cho danh sách không theo thứ tự (ul)

• Disc: kiểu nút tròn (●) có nền ở bên trong.
• Circle: kiểu nút tròn (○) có viền, không có nền.
• Square: kiểu ô vuông (■) có nền.

Giá trị list-style-type cho danh sách có thứ tự (ol)

• Decimal: kiểu số thứ tự 1, 2, 3,…decimal-leading-zero
• Decimal – leading – zero: kiểu số thứ tự 01, 02, 03
• Lower – roman: kiểu số La Mã thường i, ii, iii, iv, v,…
• Upper – roman: kiểu số La Mã hoa I, II, III, IV, V,…
• Lower-alpha: kiểu chữ cái thường a, b, c,… z
• Upper-alpha: kiểu chữ in hoa A, B, C,… Z

Xem cấu trúc và ví dụ dưới đây:

<style>
  ol.lower-alpha { 
      list-style-type: lower-alpha;
  } 
  ul.circle {
      list-style-type: circle;
  } 
  ol.decimal {
      list-style-type: decimal;
  }
<style>
<ol class=“lower-alpha’’>
    <li>Red</li>
    <li>Green</li>
    <li>Blue</li>
</ol>
<ul class=“circle”>
     <li>Red</li>
     <li>Green</li>
    <li>Blue</li>
</ul>
<ol  class=“decimal”>
     <li>Red</li>
     <li>Green</li>
     <li>Blue</li>
</ol>

Kết quả nhận được là:

1. Red
2. Green
3. Blue

o   Red

o   Green

o   Blue

1. Red
2. Green
3. Blue

>>> Đọc ngay: HTML (Hyper Text Markup Language) là gì? HTML được sử dụng làm gì?

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

Thuộc tính list-style-image sử dụng cho thẻ <ul>, sẽ dùng hình ảnh để liệt kê các mục trong danh sách.

Cấu trúc câu lệnh:

List-style-image: url(‘link ảnh’);

Ví dụ về áp dụng CSS list-style-image:

<ul style=”list-style-image: URL(‘../right-arrow-16.png’)”>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ul>

CSS list-style-image

• HTML
• CSS
• Javascript

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

Áp dụng CSS list-style-position cho thẻ <ul>, <ol> để thiết lập vị trí đặt các kí tự liệt kê.

Với thuộc tính này chúng ta có 2 loại:

• inside: Các kí tự sẽ hiển thị bên trong danh sách. Nên nó sẽ trở thành một phần văn bản và đẩy văn bản đầu dòng vào trong.

• outside: Các kí tự sẽ hiển thị bên ngoài danh sách. Đầu mỗi dòng của các mục sẽ được căn chỉnh nằm thẳng hàng với nhau theo chiều dọc. 

Cấu trúc câu lệnh này sẽ là:

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

Kết luận

Bên cạnh việc tạo list, chúng ta còn có thể áp dụng CSS để tạo kiểu cho bảng, cho các liên kết, tạo menu… Các bạn có thể xem thêm những bài viết liên quan tại:

>>> Nếu bạn đang có nhu cầu học lập trình trực tuyến, tìm hiểu ngay tại đây:

>>> Xem thêm chuỗi bài viết liên quan:

Cách tạo Mẫu F và Z bằng HTML và CSS

Cách thay đổi kích thước phông chữ HTML trong CSS

11 Thuộc tính HTML hữu ích bạn cần biết

Cách tạo menu accordion bằng HTML và CSS

Phạm Thị Thanh Ngọc