Làm thế nào để hình ở đầu mỗi dòng của 1 list (danh sách có hình vuông)
Bài này thuộc phần 16 của 26 phần trong serie Học CSS cơ bản Show
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 thì sẽ hiển thị danh sách có đánh số, thẻ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ẻ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:; Trong đó, 3 giá trị mình ghi bên trong kia là 3 thuộc tính con của list-stylenhư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ể:
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ử
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ẻ
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-typenày ở CSS3 rất linh hoạt và có độ tùy biến cao, đặc biệt là với giá trị custom-counter-stylenhưng cái này hơi nâng cao nên mình sẽ nói ở serie CSS3.See the Pen GgbzNa by Thach Pham (@thachpham92) on CodePen. list-style-positionVới thuộc tính này chúng ta chỉ có duy nhất hai giá trị là:
list-style-imageNế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-imagenà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àolist-styleBạ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-stylecho các phần tử khácỞ đầu bài mình có nói làcác thuộc tính list-stylenày chỉ có thể áp dụng cho các phần tử
.See the Pen dPBavg by Thach Pham (@thachpham92) on CodePen. 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? Xem tiếp bài trong seriePhần trước: [Học CSS] Reset CSS là gì và vì sao nên reset CSSPhần kế tiếp: [Học CSS] Tùy biến loại phần tử với displayBài liên quan
Content retrieved from: Video liên quan |