Bài này thuộc phần 16 của 26 phần trong serie Học CSS cơ bản
- 1.Quy tắt viết thuộc tính list-style
- 2.Sử dụng thuộc tính này cho phần tử nào?
- 2.1.list-style-type
- 2.2.list-style-position
- 2.3.list-style-image
- 2.4.Viết ngắn gọn vàolist-style
- 3.Ví dụ sử dụng list-stylecho các phần tử khác
- 3.1.Xem tiếp bài trong serie
- 4.Bài liên quan
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ể:
- 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òngcủ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ử
- 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ẻ
- , 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òncó nền bên trong,
- circle:Kiểu nút tròn nhưngcó viền nhưng không có nền.
- squre: Kiểu ô vuôngcó 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-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-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 trongblock.
- outside:Hiển thị dấu đầu dòng bên ngoài block.See the Pen EaBrZo by Thach Pham [@thachpham92] on CodePen.
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-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-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-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ử
- 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ẻ
.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 display
Bài liên quan
- [Học CSS] Reset CSS là gì và vì sao nên reset CSS
- [Học CSS] CSS là gì và vai trò của nó trên website
- [Học CSS] Position và Absolute Relative
- [Học CSS] Thẻ div và tạo bố cục trên website
- [Học CSS] Tìm hiểu box-sizing
- [Học CSS] Thực hành tạo layout đơn giản
Content retrieved from:
//thachpham.com/web-development/html-css/tuy-bien-danh-sach-list-voi-css.html.