(Bu səhifə CSS stillərin kaskadlı cədvəllərini istifadə edir)
Bu sənəd məqalənin tərcüməsidir "Web Style Sheets CSS tips & tricks".
Sənədin original versiyası mövcüddür yalnız W3C saytında http://www.w3.org/Style/Examples/007/evenodd.html
Bü tərcümə rəsmi W3C sənəddi DEYIL.
Bütün Müəllif Hüqüqları W3C Malikdir.
Bu sənəddə tərcümə tərcümə səhvləri və mətbəə xətaları ola bilər.
Müəllif: Sabir Sabutai (bütün tərcümələr müəllifindir)
Lokal versiya: http://www.carionltd.com/Style/Example007/evenodd.html
Qeyd: yazılan dövrdə (fevral 2003) əsas brauzerlər dəstəkləmirdi 'nth-child' xüsusiyyətini (niyabr 2001-də təqdim edilib) və yalnız bəziləri COL elementini dəstəkləyirdi.
Böyük cədvəllərin asan oxunmasını yüksəldmək üçün addım – alternativ sıraları rəngləmək. Misal üçün, aşağıdakı cədvəldə cüt sıralar üçün açıq boz, və tək sıralar üçün ağ fon istifadə edilir. Bu üçün qaydalar çox asandır:
tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF}
Month | 1994 | 1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 |
---|---|---|---|---|---|---|---|---|---|
Jan | 14 | 13 | 14 | 13 | 14 | 11 | 11 | 11 | 11 |
Feb | 13 | 15 | 12 | 15 | 15 | 12 | 14 | 13 | 13 |
Mar | 16 | 15 | 14 | 17 | 16 | 15 | 14 | 15 | 15 |
Apr | 17 | 16 | 17 | 17 | 17 | 15 | 15 | 16 | 16 |
May | 21 | 20 | 20 | 21 | 22 | 20 | 21 | 20 | 19 |
Jun | 24 | 23 | 25 | 24 | 25 | 23 | 25 | 23 | 24 |
Jul | 29 | 28 | 26 | 26 | 27 | 26 | 25 | 26 | 25 |
Aug | 29 | 28 | 27 | 28 | 28 | 27 | 26 | 28 | 26 |
Sep | 24 | 23 | 23 | 26 | 24 | 24 | 24 | 22 | 21 |
Oct | 20 | 22 | 20 | 22 | 20 | 19 | 20 | 22 | |
Nov | 18 | 17 | 16 | 17 | 16 | 15 | 14 | 15 | |
Dec | 15 | 13 | 13 | 14 | 13 | 10 | 13 | 11 |
Faktiki olaraq CSS ancaq cüt/tək alternativa yox, həmçinin sərbəst intervallara yol verir. Açarı sözlər 'even' (cüt) və 'odd' (tək) yalnız rahar şərtı işarələrdir. Məsələn, uzun siyahı üçün bunu edin:
li:nth-child(5n+3) {font-weight: bold}
Bu onu deməkdir ki, 3-cüdən başlayaraq hər 5-ci siyahı boşdur. Başqa sözlə 3,8, 13, 18, 23 və s. bəndlər boş olacaqlar.
Eyni şey cədvəlin sütunları üçündür, lakin sənəddə sütuna uyğun gələn element olmalıdır. Bu üçün HTML COL-ilə təmin edir. Cədvəl hər sütun üçün bir COL ilə başlamalıdır:
<table> <col><col><col><col><col><col><col><col><col><col> <tr><th>Month<th>1994<th>1995<th>1996...
(COL stillərdən başqa digər şeylər üçün istifadə edilə bilər, lakin bu uçün bizə yalnız COL elementlər lazım olacaq.) Sonrakı qaydalar birinci sütuna sarı fon verir, sonra isə üçüncüdən başlayaraq gələn hər sütuna boz fon verir:
col:first-child {background: #FF0} col:nth-child(2n+3) {background: #CCC}
Month | 1994 | 1995 | 1996 | 1997 | 1998 | 1999 | 2000 | 2001 | 2002 |
---|---|---|---|---|---|---|---|---|---|
Jan | 14 | 13 | 14 | 13 | 14 | 11 | 11 | 11 | 11 |
Feb | 13 | 15 | 12 | 15 | 15 | 12 | 14 | 13 | 13 |
Mar | 16 | 15 | 14 | 17 | 16 | 15 | 14 | 15 | 15 |
Apr | 17 | 16 | 17 | 17 | 17 | 15 | 15 | 16 | 16 |
May | 21 | 20 | 20 | 21 | 22 | 20 | 21 | 20 | 19 |
Jun | 24 | 23 | 25 | 24 | 25 | 23 | 25 | 23 | 24 |
Jul | 29 | 28 | 26 | 26 | 27 | 26 | 25 | 26 | 25 |
Aug | 29 | 28 | 27 | 28 | 28 | 27 | 26 | 28 | 26 |
Sep | 24 | 23 | 23 | 26 | 24 | 24 | 24 | 22 | 21 |
Oct | 20 | 22 | 20 | 22 | 20 | 19 | 20 | 22 | |
Nov | 18 | 17 | 16 | 17 | 16 | 15 | 14 | 15 | |
Dec | 15 | 13 | 13 | 14 | 13 | 10 | 13 | 11 |
Sıraların fonu (TR) sütunların fonuna qədər yazılıb (COL), və sütunların fonu görünən olmasında əmin olmaq istəyirsinizsə, sıralara fon qoymayın.