Idiomas

Esta é uma tradução. Ela pode conter erros ou estar desatualizada em relação à versão original em inglês. Tradutor(a): Maurício "Maujor®" Samy Silva

Folhas de estilos CSS dicas & truques

Ver index para todas as dicas.

regras par e ímpar

Uma das técnicas destinadas a melhorar a legibilidade de tabelas consiste em se estilizar com diferentes cores, alternadamente, as linhas da tabela. Por exemplo: as linhas de ordem par da tabela mostrada a seguir foram estilizadas com fundo na cor cinza-claro e aquelas de ordem ímpar em cinza-escuro. As regras CSS para obter esse efeito são bem simples e conforme mostradas a seguir: 

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Month '94 '95 '96 '97 '98 '99 '00 '01 '02
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

Na verdade as CSS vão além da estilização alternada par e ímpar e possibilitam a estilização das linhas de uma tabela em qualquer intervalo. As palavras-chave 'even' e 'odd' nada mais são do que convenientes parâmetros simplificados. Suponha uma tabela com uma grande quantidade de linhas e observe a regra CSS mostrada a seguir: 

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

Ela estiliza o texto de cada uma das primeiras linhas de um grupo de 5 linhas com o efeito negrito (bold) a partir da terceira linha. Ou seja, terão seus textos em negrito as linhas 3, 8, 13, 18, 23, etc.

Colunas par e ímpar

A mesma técnica de estilização pode ser usada para as colunas de uma tabela, mas nesse caso é necessário constar na marcação da tabela um elemento que agrupe colunas. A HTML prevê para isso o elemento COL. A tabela deve ser marcada com o elemento COL para cada uma das suas colunas, conforme mostrado a seguir: 

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>'94<th>'95<th>'96...

(A finalidade do elemento COL vai muito além de servir como referência para estilização, mas no nosso exemplo tudo o que precisamos é que o elemento COL faça parte da marcação.) Para estilizar o fundo da primeira coluna da tabela na cor amarela e a seguir cada segunda linha do agrupamento de duas colunas, a partir da terceira coluna, na cor cinza declare as regras CSS mostradas a seguir: 

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Month '94 '95 '96 '97 '98 '99 '00 '01 '02
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

A cor de fundo das linhas (TR) sobrepõe-se à cor de fundo das colunas (COL) e assim sendo para garantir a visibilidade da cor de fundo das colunas não se deve definir cor de fundo para as linhas.

Bert Bos, Coordenador das atividades das CSS
Copyright © 1994–2021 W3C® Privacy policy

Criado em 6 de fevereiro de 2003;
Atualizado qua 06 jan 2021 05:40:49 UTC

Idiomas

Sobre traduções