CSS cho thẻ ul li

Khi chúng ta viết mã CSS cho trang web hoặc ứng dụng web, thông thường chúng ta cần cung cấp giao diện tùy chỉnh của đạn trong danh sách UL. Các quy tắc CSS tiêu chuẩn cho chúng ta không có nhiều khả năng để làm điều đó. Chúng ta có các quy tắc CSS như:

• list-style – xác định tất cả các thuộc tính cho danh sách UL (từng được liệt kê bên dưới)
• list-style-location – xác định vị trí của dấu đầu dòng (điểm đánh dấu) – bên trong hoặc bên ngoài danh sách
• list-style-type – xác định nếu chúng ta muốn sử dụng hình tròn, hình vuông vv
• list-style-image – đó là những gì chúng tôi quan tâm bây giờ

Vì vậy, chỉ có quy tắc CSS liệt kê danh sách phong cách CSS cho chúng ta khả năng xác định kiểu tùy chỉnh của biểu tượng trong danh sách ul. Ưu điểm của phương pháp này là sự dễ dàng, nhưng nhược điểm là thao tác cứng của hình ảnh đó.

Thứ hai, và theo tôi thì tốt hơn, phương pháp là sử dụng phần tử giả CSS CSS :: before. Tôi sẽ chỉ cho bạn cách sử dụng cả hai phương pháp.

Trước hết, chúng ta phải bắt đầu từ việc tạo hình ảnh. Tôi khuyên bạn nên tạo kích thước tối thiểu 64 x 64 px để chắc chắn rằng nó sẽ được thay thế đúng trên tất cả các độ phân giải màn hình và thiết bị. Tôi đã tạo biểu tượng ul tùy chỉnh của mình trong Inkscape và bạn có thể thấy nó bên dưới:

Phương pháp 1: Quy tắc hình ảnh kiểu danh sách CSS

Hãy tạo một số danh sách UL trong HTML:

Dog
Cat
Monkey
Lion
Dragonfly

Và thêm mã CSS rất đơn giản này

.custom-list {
    list-style-image: url(‘img/bullet.png’);
}

Các kết quả:

Chúng ta có thể thấy rằng một cái gì đó đã đi thực sự sai! Để chắc chắn chúng tôi có đạn tùy chỉnh, nhưng chúng tôi mong đợi một cái gì đó tốt hơn nhiều, phải không?

Không có khả năng thay đổi kích thước trong hình ảnh danh sách ul tùy chỉnh CSS, để sử dụng hình ảnh lớn hơn và chất lượng tốt hơn nhưng hiển thị tỷ lệ. Vì vậy, bây giờ chúng ta nên thay đổi kích thước hình ảnh và làm cho nó nhỏ, ví dụ 10 x 10 px. Nhưng kết quả là chúng ta có thể gặp rắc rối trên màn hình HD lớn, vd. Siêu HD.

Kết quả với hình ảnh đã thay đổi kích thước thành 10 x 10 px:

Vâng, bây giờ kích thước là chính xác, nhưng chúng ta có thể thấy rằng chất lượng là kém. Theo tôi, hãy kiểm tra xem phương pháp tốt nhất để làm điều đó

Phương pháp 2: CSS3 Phiên bản phần tử giả ::before giả cho phong cách tùy chỉnh biểu tượng UL

Như trong phương pháp trước, chúng ta có cùng một danh sách:

Dog
Cat
Monkey
Lion
Dragonfly

Nhưng chúng tôi viết mã CSS tinh vi hơn, thực hiện toàn bộ phép thuật. Hãy nhớ sử dụng ở đây hình ảnh 64 x 64 px lớn của chúng tôi.

.custom-list {
    list-style: none;
    padding-left: 0;
}
.custom-list li {
    position: relative;
    padding-left: 20px;
}
.custom-list li:before {
    content: ”;
    width: 10px;
    height: 10px;
    position: absolute;
    background-image: url(‘img/bullet.png’);
    background-size: cover;
    background-position: center;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

Các kết quả:

Và như chúng ta có thể thấy trên hình ảnh trên – chúng ta có những biểu tượng tùy chỉnh với chất lượng tốt. Và chúng ta có thể thực hiện bất kỳ thao tác nào theo ý muốn, bởi vì biểu tượng là các yếu tố hoàn toàn độc lập mà chúng ta có thể tạo kiểu theo cách chúng ta muốn.

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à

và
. Khi thiết lập danh sách bằng thẻ
(ordered list), các hạng mục trong danh sách sẽ được đánh số thứ tự, sử dụng
(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.

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

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.
Cách áp dụng CSS tạo list.

1. 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: