Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Web Style Sheets CSS tips & tricks

Zobacz także indeks wszystkich porad.

Reguły even i odd (parzyste i niepatrzyste)

Jednym ze sposobów poprawy czytelności dużych tabel jest kolorowanie naprzemiennych wierszy. Na przykład parzyste wiersze w tabeli poniżej są jasnoszare, a nieparzyste mają białe tło. Reguła CSS odpowiedzialna za ten efekt jest niezwykle prosta: 

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Miesiąc '94 '95 '96 '97 '98 '99 '00 '01 '02
Sty 14 13 14 13 14 11 11 11 11
Lut 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Kwi 17 16 17 17 17 15 15 16 16
Maj 21 20 20 21 22 20 21 20 19
Cze 24 23 25 24 25 23 25 23 24
Lip 29 28 26 26 27 26 25 26 25
Sie 29 28 27 28 28 27 26 28 26
Wrz 24 23 23 26 24 24 24 22 21
Paź 20 22 20 22 20 19 20 22
Lis 18 17 16 17 16 15 14 15
Gru 15 13 13 14 13 10 13 11

Tak naprawdę CSS pozwala kolorować nie tylko parzyste i nieparzyste elementy - okres może być dowolny. Słowa kluczowe even (parzyste) i odd (nieparzyste) są tylko wygodnym skrótem. Dla długiej listy możesz na przykład zastosować coś takiego: 

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

Powyższa reguła mówi o tym, że co 5. element, zaczynając od trzeciego, jest pogrubiony. Inaczej mówiąc, pogrubione będą numery 3, 8, 13, 18, 23, itd.

Parzyste i nieparzyste kolumny

Ta sama zasada działa także dla kolumn tabeli, jednak w dokumencie musi znaleźć się element, który odpowiada kolumnie. HTML wykorzystuje w tym celu tag COL. Tabela musi zaczynać się taką samą liczbą znaczników COL ile jest w niej kolumn, np.: 

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Miesiąc<th>'94<th>'95<th>'96...

(COL może być użyty do innych celów niż pisanie CSS-ów, jednak w tym wypadku wystarczy jedynie, że element COL jest zadeklarowany). Powyższa reguła sprawia, że pierwsza kolumna ma żółte tło, a następnie co druga kolumna, zaczynając od 3., jest szara: 

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Miesiąc '94 '95 '96 '97 '98 '99 '00 '01 '02
Sty 14 13 14 13 14 11 11 11 11
Lut 13 15 12 15 15 12 14 13 13
Mar 16 15 14 17 16 15 14 15 15
Kwi 17 16 17 17 17 15 15 16 16
Maj 21 20 20 21 22 20 21 20 19
Cze 24 23 25 24 25 23 25 23 24
Lip 29 28 26 26 27 26 25 26 25
Sie 29 28 27 28 28 27 26 28 26
Wrz 24 23 23 26 24 24 24 22 21
Paź 20 22 20 22 20 19 20 22
Lis 18 17 16 17 16 15 14 15
Gru 15 13 13 14 13 10 13 11

Tło wiesza (TR) jest nadrzędne względem tła kolumny (COL), dlatego jeśli chcesz mieć pewność, że tło kolumny jest widoczne, to nie powinieneś ustawiać tła wierszy tabeli.

Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 6 Lutego 2003;
Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

O tłumaczeniach