Foi de Stil Web
Indrumari si Trucuri CSS

Stare

Atentionare: la momentul scrierii (Februarie 2003), browserele majore nu suporta inca selectorul 'nth-child' (introdus in Noiembrie 2001) si numai cateva suporta elementul COL.

Reguli even si odd (par si impar)

Un mod de imbunatatire a citibilitatii tabelelor largi este sa se coloreze randurile alternativ. De exemplu, tabelul de mai jos are un fundal gri deschis pentru randurile pare si alb pentru randurile impare. Regulile pentru asta sunt extrem de simple:

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

De fapt, CSS permite nu numai alternari par/impar ci si intervale arbitrare. Cuvintele cheie 'even' si 'odd' sunt doar prescurtari convenabile. De exemplu, pentru o lista lunga puteti face aceasta:

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

Aceasta spune ca fiecare al cincilea element este aldin incepand cu al treilea. Cu alte cuvinte, elementele numerotate 3, 8, 13, 18, 23, etc., vor fi aldine.

Coloane pare si impare

Acelasi lucru functioneaza pentru coloanele tabelelor, deasemenea, dar atunci trebuie sa existe un element in document care corespunde coloanei. HTML furnizeaza COL pentru asta. Tabelul trebuie sa inceapa cu un COL pentru fiecare coloana:

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

(COL poate fi utilizat pentru alte lucruri decat stil, dar in acest caz tot ce avem nevoie este ca elementele COL sa fie prezente.) Urmatoarele reguli dau primei coloane un fundal galben, si apoi fiecare a doua coloana incepand de la coloana trei este una gri:

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

Fundalul randurilor (TR) este desenat in fata fundalului coloanelor (COL), astfel ca daca vreti sa fiti siguri ca fundalul coloanelor este vizibil, nu ar trebui sa setati un fundal pentru randuri.