Arkusze CSS - rady i triki

Status

Ostrzeżenie: podczas pisania tego artykułu (luty 2003), standardowe przeglądarki nie miały wsparcia dla 'nth-child' selector (wprowadzony w listopadzie 2001) i jedynie nieliczne wspierały COL element.

reguły parzyste i nieparzyste

Jednym sposobem na poprawienie czytelności dużych tabel jest kolorowanie rzędów na przemian. Na przykład poniższa tabela ma jasno szare tło dla parzystych rzędów i biały kolor dla nieparzystych. Reguły są bardzo proste:

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 pozwala nie tylko na przeplatanką parzysty/ nieparzysty ale również na dowolne przerwy. Słowa jak 'even' i 'odd' są jedynie dogodnymi skrótami. Na przykład dla długich list można wykonać coś takiego:

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

Oznacza to, że co piąta linia listy jest pogrubiona zaczynając of trzeciej. Innymi słowami pozycje 3, 8, 13, 18, 23, etc., będą pogrubione.

parzyste i nieparzyste kolumny

Powyższe działa również w przypadku kolumn tabeli, ale w dokumencie musi znajdować się element odpowiadający kolumnie. HTML przewidziało do tego celu COL. Tabela musi zaczynać sie od COL dla każdej kolumny:

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

(COL może być użyty do innych rzeczy niż styl, ale w tym przypadku potrzebujemy elementu COL) Następujące reguły dają żółte tło pierwszej kolumnie i szare tło co drugiej kolumnie zaczynając od trzeciej:

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

Tło rzędów (TR) jest nakładane na tło kolumn (COL), dłatego jeśli chcesz żeby tło kolum było widoczne nie ustawiaj tła dla rzędów.