Các Trang Mẫu Web
Thủ thuật và lời khuyên CSS

Tài liệu nầy được phiên dịch từ W3C's Web Style Sheets CSS Tips & Tricks Thủ thuật và lời khuyên CSS. Tài liệu nầy có thể có những phiên dịch sai sót. Quí vị có thể tham khảo với bản chính tiếng Anh ở:
https://www.w3.org/Style/Examples/007/evenodd.html


Người phiên dịch:
Manh Nguyen, Real Estate for Sale in Safety Harbor
Homes for Sale in Safety Harbor
Cabins For Sale In Gatlinburg

(This page uses CSS style sheets)

Trạng thái

Chú ý: Tại thời điểm viết (tháng 2/2003), những trình duyệt chính vẫn chưa hỗ trợ bộ chọn 'nth-child' (đưa ra vào tháng 11/2001) và chỉ hỗ trợ rất ít thành phần của thẻ COL.

Quy luật chẵn và lẻ

Một cách để cải thiện khả năng đọc trên các bảng lớn là tô màu lần lượt các hàng. Ví dụ, bảng dưới đây với các hàng chẵn có nền là màu xám nhạt và với các hàng lẻ có nền là màu trắng. Quy tắc đó vô cùng đơn giản:

tr:nth-child(even) {background: #CCC}tr:nth-child(odd) {background: #FFF}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

Thực chất CSS cho phép không chỉ xen kẽ chẵn/lẻ mà còn những khoảng tuỳ ý. Các từ khoá ‘even’ và ‘odd’ chỉ là lối viết tắt cho tiện. Ví dụ, với một danh sách dài bạn có thể làm như sau:

li:nth-child(5n+3) {font-weight: bold}

Có nghĩa là mục thứ 5 trong danh mục sẽ được tô đậm, và bắt đầu từ mục thứ 3. Nói cách khác, các mục số 3, 8, 13, 18, 23, … sẽ đậm.

Các cột chẵn và lẻ

Đối với các cột của bảng thì cũng như vậy, nhưng sau đó phải có một thành phần trong văn bản tương ứng với cột. HTMT cung cấp thẻ COL để làm điều đó. Bảng phải bắt đầu với một thẻ COL cho mỗi cột:

<table><col><col><col><col><col><col><col><col><col><col><tr><th>Month<th>1994<th>1995<th>1996...

(thẻ COL có thể được dùng cho những đối tượng khác chứ không chỉ trong trang mẫu, nhưng trong trường hợp này tất cả những gì chúng ta cần là các thành phần của thẻ COL phải được đưa ra.) Quy tắc dưới đây cho ra cột đầu tiên có nền màu vàng và sau đó các cột xen kẽ khác bắt đầu từ cột 3 có nền màu xám.

col:first-child {background: #FF0}col:nth-child(2n+3) {background: #CCC}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

Nền của các hàng (TR) được tô lên trên nền của các cột (COL), vì vậy nếu bạn muốn chắc chắn rằng nền của các cột được hiển thị bạn không nên đặt màu nền cho các hàng.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Viết ngày 6/2/2003 Cập nhật ngày: 03/03/2009; 12:46:41 $ GMT