Bert
BosДакумент створаны 6 лютага 2003;
Апошнія змены $Date: 2007/07/20 16:15:58 $ GMT
(Гэтая старонка выкарыстоўвае каскадныя табліцы стыляў CSS)
Дадзены дакумент з'яўляецца перакладам артыкула "Web Style Sheets CSS
tips & tricks".
Арыгінальная версія якога існуе толькі на сайце W3C http://www.w3.org/Style/Examples/007/evenodd.html
Дадзены пераклад не з'яўляецца афіцыйным дакументам W3C.
Усе Аўтарскія Правы Належаць W3C.
Дадзены дакумент можа ўтрымоўваць памылкі перакладу і памылкі друку.
Аўтар: Аляксей Пятроў ( усе пераклады ) Дзякуй за падтрымку: Чорны Квадрат
Папярэджанне:падчас напісання (люты 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), так што калі вы жадаеце ўпэўніцца, што фон калонак бачны, не ўсталёўвайце фон на шэрагі.