TłUMACZENIA ANGIELSKI METODYKA JĘZYKOZNAWSTWO SŁOWNIK KONTAKT

 

Dokument ten jest tłumaczeniem, które może zawierać błędy. Zostało ono wykonane przez Angielski ELTT. Oryginalna wersja dokumentu en

Zobacz inne strony

Arkusze CSS - rady i triki

(This page uses CSS style sheets)

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}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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}
Month199419951996199719981999200020012002
Jan141314131411111111
Feb131512151512141313
Mar161514171615141515
Apr171617171715151616
May212020212220212019
Jun242325242523252324
Jul292826262726252625
Aug292827282827262826
Sep242323262424242221
Oct2022202220192022
Nov1817161716151415
Dec1513131413101311

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.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2004/01/06 21:54:41 $ GMT

Mapa