Bert BosДокумент створено Feb 2003;
Остання зміна документу $Date: 2007/07/20 16:16:25 $ GMT
(Ця сторінка використовує каскадні таблиці стилів CSS)
Цей документ є перекладом статті з сайту W3C.
Оригінальна версія документу знаходиться тільки на сайті W3C http://www.w3.org/Style/Examples/007/evenodd.html
Цей переклад НЕ є офіційним документом W3C.
Всі Авторські Права Належать W3C.
Цей документ може містить помилки перекладу та похибки.
Автор: Скрипець Євген - розробник проекту SSL (всі переклади автора: en, ru, uk )
Локальна копія: http://www.indeep76.com/Style/Example007ukr/evenodd.html
Попередження: під час написання (лютий 2003) основні браузери не підтримували 'nth-child' властивість (представлену у листопаді 2001) й тільки деякі підтримували COL елемент.
Один засіб покращити читабельність великих сторінок - це розмалювати альтернативні ряди. Наприклад, таблиця нижче має світло-сірий фон для парних рядів й білий для непарних. Правила для цього дуже прості:
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 |
Фактично CSS дозволяє не тільки дозволити парні/непарні альтернативи, але й довільні інтервали. Ключеві слова 'even' (парний) й 'odd' (непарний) є просто зручними умовними позначеннями. Наприклад, для довгого списку рекомендовано зробити наступне:
li:nth-child(5n+3) {font-weight: bold}
Це говорить про те, що кожний 5й список порожній, починаючи з 3го. Іншими словами, пункти під номерами 3, 8, 13, 18, 23 и т.д. будуть порожніми.
Те ж саме діє для колонок таблиці, але для цього потрібен елемент в документі, який відповідає колонці. Для цього HTML забезпечує COL. Таблиця повинна починатися з одного COL для кожної колонки:
<table> <col><col><col><col><col><col><col><col><col><col> <tr><th>Month<th>1994<th>1995<th>1996...
(COL може використовуватися для інший речей, окрім стилів, але в цьому випадку все, що нам потрібно, це щоб COL елементы були присутніми.) Наступні правила дають першій колонці жовтий фон, а потім кожній іншій колонці, починаючи з треьої, сірий:
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 |
Фон рядів (TR) прописаний до фону колонок (COL), так що якщо ви бажаєте переконатися, що фон колонок видимий, не встановлюйте фон на ряди.