Български превод на "Even and odd rules"

Настоящият документ е превод на статията "Even and odd rules".

Оригиналната версия на документа се намира само на уебсайта на W3C http://www.w3.org/Style/Examples/007/evenodd.
Това НЕ е официален документ на W3C. Всички авторски права принадлежат на W3C.

Автор: Александър Дичев (всички преводи на автора). Новини в блога.
Преводът е направен на 25.08.2008. Последна актуализация на 17.12.2008.

Настоящият документ може да съдържа грешки или неточности в превода.
Ако желаете да предложите корекция или да сигнализирате за грешка, свържете се с автора.

Документът е преведен със съдействието на АБА уеб дизайн, Balkans и Велина Янкова.

Web Style Sheets
CSS съвети и трикове

(Тази страница използва CSS style sheets)

Статус

Внимание: по време на написването (февруари 2003) на документа, повечето браузъри все още не поддържаха 'nth-child' селектор (представен през ноември 2001) и само някои поддържаха елемента COL.

Четни и нечетни правила

Един от начините да се подобри четимостта на големи таблици е редуващите се редове да се оцветят в различни цветове. Например, следващата таблица светлосив фон за четните редове и бял фон за нечетните. Правилата за това са много лесни:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Месец199419951996199719981999200020012002
Яну141314131411111111
Фев131512151512141313
Мар161514171615141515
Апр171617171715151616
Май212020212220212019
Юни242325242523252324
Юли292826262726252625
Авг292827282827262826
Сеп242323262424242221
Окт2022202220192022
Ное1817161716151415
Дек1513131413101311

На практика, CSS позволява редуване не само на четно/нечетно, но и на определени интервали. Ключовите думи 'even' и 'odd' са само удобни за писани. например, за по-дълъг списък може да се използва:

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

Това указва, че всеки 5ти елемент от списъка е bold, започвайки от третия. С други думи, елементите с номера 3, 8, 13, 18, 23, и т.н., ще бъдат bold.

Четни и нечетни колони

Същото важи и за колоните в таблица, но тогава трябва да има елемент в документа съответстващ на колона. 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 елементите.) Следните правила задават на първата колона жълт фон и сив фон за всяка друга колона след колона 3:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Месец199419951996199719981999200020012002
Яну141314131411111111
Фев131512151512141313
Мар161514171615141515
Апр171617171715151616
Май212020212220212019
Юни242325242523252324
Юли292826262726252625
Авг292827282827262826
Сеп242323262424242221
Окт2022202220192022
Ное1817161716151415
Дек1513131413101311

Фонът на редовете (TR) се изобразява пред фона на колоните (COL), така че ако искате да сте сигурни, че фона на колоните Ви ще е видим, не задавайте фон на редовете.

CSS Валиден CSS!Валиден HTML 4.0!

Bert Bos
създадено на 6 Feb 2003;
последна промяна $Date: 2008/07/07 15:03:47 $ GMT