Tìm hiểu về List trong CSS
Học Css bắt đầu với Hello, World
Tự làm quen với các bài tập và gửi đoạn code đầu tiên của bạn bằng cách hoàn thành bài đầu tiên "Hello, World!".
Luyện tập

    Trong hướng dẫn này, bạn sẽ học cách định dạng List HTML bằng CSS.

Các loại List HTML

    Có ba loại List khác nhau trong HTML:

  • List không có thứ tự — Một List các mục, trong đó mọi mục trong List được đánh dấu bằng dấu đầu dòng.
  • List có thứ tự — Một List các mục, trong đó mỗi mục trong List được đánh dấu bằng số.
  • List định nghĩa — Một List các mục, với mô tả của từng mục.

    Xem hướng dẫn về List HTML để tìm hiểu thêm về List và cách tạo List.

Định dạng List với CSS

    CSS cung cấp một số thuộc tính để tạo kiểu dáng và định dạng List có thứ tự và không có thứ tự được sử dụng phổ biến nhất. Các thuộc tính List CSS này thường cho phép bạn:

  • Kiểm soát hình dạng hoặc diện mạo của điểm đánh dấu.
  • Chỉ định hình ảnh cho điểm đánh dấu thay vì dấu đầu dòng hoặc số.
  • Đặt khoảng cách giữa điểm đánh dấu và văn bản trong List.
  • Chỉ định xem điểm đánh dấu sẽ xuất hiện bên trong hay bên ngoài hộp chứa các mục List.

    Trong phần sau, chúng ta sẽ thảo luận về các thuộc tính có thể được sử dụng để tạo kiểu cho List HTML.

Thay đổi đánh dấu của List

    Theo mặc định, các mục trong List có thứ tự được đánh số bằng chữ số Ả Rập (1, 2, 3, 5, v.v.), trong khi trong List không có thứ tự , các mục được đánh dấu bằng dấu tròn (•).

    Tuy nhiên, bạn có thể thay đổi loại đánh dấu List mặc định này thành bất kỳ loại nào khác, chẳng hạn như chữ số La Mã, chữ cái Latinh, hình tròn, hình vuông, v.v. bằng cách sử dụng thuộc tính list-style-type.

    Hãy thử ví dụ sau để hiểu cách thức hoạt động của thuộc tính này:

Ví dụ

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Thay đổi vị trí của các điểm đánh dấu List

    Theo mặc định, các điểm đánh dấu của từng mục List được định vị outside trong hộp hiển thị của chúng.

    Tuy nhiên, bạn cũng có thể định vị các điểm đánh dấu hoặc dấu đầu dòng này bên trong hộp hiển thị của mục List bằng cách sử dụng thuộc tính list-style-position cùng với giá trị inside. Trong trường hợp này, các dòng sẽ bao quanh bên dưới điểm đánh dấu thay vì được thụt vào. Đây là một ví dụ:

Ví dụ

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

    Chúng ta hãy xem hình minh họa sau đây để hiểu cách đánh dấu hoặc dấu đầu dòng được định vị.

List Phong cách Vị trí Minh họa

Sử dụng hình ảnh làm điểm đánh dấu List

    Bạn cũng có thể đặt hình ảnh làm điểm đánh dấu List bằng cách sử dụng thuộc tính list-style-image.

    Quy tắc kiểu trong ví dụ sau gán một hình ảnh PNG trong suốt "arrow.png" làm điểm đánh dấu List cho tất cả các mục trong List không có thứ tự. Hãy dùng thử và xem nó hoạt động như thế nào:

Ví dụ

ul li {
    list-style-image: url("images/bullet.png");
}

    Đôi khi, thuộc tính list-style-image có thể không tạo ra đầu ra như mong đợi. Ngoài ra, bạn có thể sử dụng giải pháp sau để kiểm soát tốt hơn việc định vị các điểm đánh dấu hình ảnh.

    Để giải quyết vấn đề này, bạn cũng có thể đặt dấu đầu dòng hình ảnh thông qua thuộc tính background-image. Đầu tiên, đặt List không có dấu đầu dòng. Sau đó, xác định hình nền không lặp lại cho thành phần List.

    Ví dụ sau hiển thị các điểm đánh dấu hình ảnh như nhau trong tất cả các trình duyệt:

Ví dụ

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Đặt tất cả thuộc tính List cùng một lúc

    Thuộc tính list-style là một thuộc tính rút gọn để xác định cả ba thuộc tính list-style-type, list-style-image list-style-position của một List ở một nơi.

    Quy tắc kiểu sau đặt tất cả các thuộc tính List trong một khai báo.

Ví dụ

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

 

 

    Lưu ý: Khi sử dụng thuộc tính list-style, thứ tự của các giá trị là: list-style-type | list-style-position | list-style-image. Sẽ không có vấn đề gì nếu một trong các giá trị trên bị thiếu miễn là các giá trị còn lại theo thứ tự đã chỉ định.

Tạo menu điều hướng bằng List

    List HTML thường được sử dụng để tạo thanh điều hướng ngang hoặc menu thường xuất hiện ở đầu trang web. Nhưng vì các mục trong List là các phần tử khối nên để hiển thị chúng nội tuyến, chúng ta cần sử dụng thuộc tính display. Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào:

Ví dụ

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

    Bạn sẽ tìm hiểu chi tiết về các thuộc tính phần đệmhiển thị CSS trong các chương sắp tới.

 

 

Một số bài viết liên quan
Devsne VN 5704 lượt xem

Cách tạo Boder Gradient trong css

Devsne VN 2376 lượt xem

Exploring the Benefits of Using Tailwind CSS

Devsne VN 5609 lượt xem

Một vài tip debug website của bạn chỉ với CSS

Devsne VN 1523 lượt xem

Using SASS/SCSS in Vue.js

Devsne VN 3243 lượt xem

Tìm hiểu về CSS Positioning

Devsne VN 3665 lượt xem

Tiêu đề thay thế: Giảm thời gian tải trang với sự thay đổi code CSS đơn giản.

Devsne VN 9163 lượt xem

[CSS] Bài 7 - Sử Dụng Thuộc Tính Position Để Tạo Động Hiệu Quả Trong Thiết Kế Giao Diện

Devsne VN 1610 lượt xem

Sử dụng CSS variables để giảm thiểu lượng code

Devsne VN 6991 lượt xem

[CSS] Bài 18 - Grid và Flex

Devsne VN 6199 lượt xem

TailwindCSS còn gì hay?