Informática Numaboa - Tutoriais e Programação
Pequeno laboratório de CSS III
|
Ter 18 Abr 2006 18:56 |
- Detalhes
- Categoria: CSS - Cascanding Style Sheet
- Atualização: Domingo, 12 Abril 2009 11:03
- Autor: vovó Vicki
- Acessos: 12542
Neste tutorial de nível avançado serão vistas as propriedades de dimensão, de classificação, de posicionamento e das tabelas. Além disso será explicado o que são pseudo-classes. Agora é que vai dar gosto pilotar um CSS 
Controlando dimensões com CSS
As propriedades de dimensão permitem controlar a altura e a largura dos elementos. Também permitem aumentar o espaço entre duas linhas de texto.
Clique várias vezes nos links da tabela para ver como as propriedades são entendidas pelo navegador e colocadas na Área de Teste.
Na tabelas abaixo, a coluna IE indica a versão do Internet Explorer, a F do Firefox e a N do Netscape. A coluna W3C indica a versão da recomendação (CSS1 ou CSS2).
Este elemento contém algumas linhas de texto para que possamos ver o efeito da propriedade line-height. |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| height | Altura de um elemento. | auto length % |
4 | 1 | 6 | 1 |
| line-height | Distância entre linhas de texto. | normal number length % |
4 | 1 | 4 | 1 |
| max-height | Altura máxima de um elemento. | none length % |
- | 1 | 6 | 2 |
| max-width | Largura máxima de um elemento. | none length % |
- | 1 | 6 | 2 |
| min-height | Altura mínima de um elemento. | length % |
- | 1 | 6 | 2 |
| min-width | Largura mínima de um elemento. | length % |
- | 1 | 6 | 2 |
| width | Largura de um elemento. | auto length % |
4 | 1 | 4 | 1 |
As propriedades de classificação permitem controlar a disposição de elementos, determinar onde imagens devem aparecer em outros elementos, posicionar um elemento em relação à sua posição normal, posicionar elementos usando valores absolutos e controlar a visibilidade de elementos.
Se você não sabe o que é CSS ou quais são os fundamentos do CSS, sugiro que leia o Tutorial de CSS e os pequenos tutoriais referentes a cada grupo de propriedades antes de continuar.
Propriedades de classificação
Veja como se comportam as propriedades de classificação clicando várias vezes nos links da tabela para verificar como estas propriedades são entendidas pelo navegador e colocadas na Área de Teste.
Na tabelas abaixo, a coluna IE indica a versão do Internet Explorer, a F do Firefox e a N do Netscape. A coluna W3C indica a versão da recomendação (CSS1 ou CSS2).
| Após clicar em cursor, coloque o cursor do mouse sobre a área de teste. |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| clear | Os lados de um elemento onde outros elementos flutuantes não são permitidos. | left right both none |
4 | 1 | 4 | 1 |
| cursor | O tipo de cursor que deve ser mostrado. | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
4 | 1 | 6 | 2 |
| display | Determina como e se um elemento deve ser mostrado. | none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption |
4 | 1 | 4 | 1 |
Esta também é uma área que está com as propriedades mudadas para que a primeira letra apareça em tamanho maior e flutuando à esquerda do parágrafo. No início este parágrafo está invisível porque seu estilo foi determinado como hidden. Quando você clica em visibility, o parágrafo some e aparece porque esta propriedade é alterada.
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| float | Determina onde uma imagem ou texto deve aparecer em outro elemento. | left right none |
4 | 1 | 4 | 1 |
| position | Coloca o elemento numa posição estática, absoluta, relativa ou fixa. | static relative absolute fixed |
4 | 1 | 4 | 2 |
| visibility | Determina se um elemento é visível ou não. | visible hidden collapse |
4 | 1 | 6 | 2 |
As propriedades de posicionamento permitem controlar a posição esquerda, direita, superior e inferior de elementos, designar a forma de um elemento, colocar um elemento atrás de outros e especificar o que deve ser feito caso o conteúdo de um elemento seja muito grande para caber na área especificada.
Se você não sabe o que é CSS ou quais são os fundamentos do CSS, sugiro que leia o Tutorial de CSS e os pequenos tutoriais referentes a cada grupo de propriedades antes de continuar.
Propriedades de posicionamento
Clique várias vezes nos links da tabela para ver como as propriedades de posicionamento são entendidas pelo navegador e colocadas na Área de Teste.
Na tabelas abaixo, a coluna IE indica a versão do Internet Explorer, a F do Firefox e a N do Netscape. A coluna W3C indica a versão da recomendação (CSS1 ou CSS2).
 |
Aqui fica um texto que não cabe no quadrado. Aqui está um texto que não cabe no quadrado. Aqui está um texto que não cabe no quadrado. |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| bottom | O quanto um elemento pode ficar acima/abaixo do limite inferior do elemento pai. | auto length % |
5 | 1 | 6 | 2 |
| clip | Determina a forma de um elemento. O elemento é cortado e colocado dentro da forma. | shape auto |
4 | 1 | 6 | 2 |
| left | O quanto um elemento pode ficar à esquerda/direita do limite esquerdo do elemento pai. | auto length % |
4 | 1 | 4 | 2 |
| overflow | Determina o que acontece se o conteúdo de um elemento extrapola a sua área. | visible hidden scroll auto |
4 | 1 | 6 | 2 |
| position | Coloca o elemento numa posição estática, absoluta, relativa ou fixa. | static relative absolute fixed |
4 | 1 | 4 | 2 |
| right | O quanto um elemento pode ficar à esquerda/direita do limite direito do elemento pai. | auto length % |
5 | 1 | 6 | 2 |
| top | O quanto um elemento pode ficar acima/abaixo do limite superior do elemento pai. | auto length % |
4 | 1 | 4 | 2 |
| vertical-align | O alinhamento vertical do elemento. | baseline sub super top text-top middle bottom text-bottom length % |
4 | 1 | 4 | 1 |
| z-index | A posição que o elemento ocupa na pilha. | auto number |
4 | 1 | 6 | 2 |
TEXTO TEXTO TEXTO TEXTO  |
Tabelas
As tabelas só receberam propriedades próprias depois do CSS 2.0. Apesar disto, muitas propriedades da versão CSS 1.0 podem ser usadas. Os elementos HTML table, tr, colgroup, col, thead, tbody, tfoot, th e td podem ser formatados usando propriedades de texto, fundo, margens, recuo, bordas, etc. Mas a versão 1.0, principalmente no que se refere a bordas de células vizinhas, deixava muito a desejar. Também a largura e a altura de colunas e linhas não tinha muito suporte. Já a versão 2.0 preenche estas lacunas.
Aqui veremos como se comportam as propriedades de tabelas. Clique várias vezes nos links da tabela para ver como as propriedades são entendidas pelo navegador e colocadas na Área de Teste.
Na tabela abaixo, a coluna IE indica a versão do Internet Explorer, a F do Firefox e a N do Netscape. A coluna W3C indica a versão da recomendação (CSS1 ou CSS2).
| Texto da célula 1 | Texto da célula 2 | Texto da célula 3 |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| border-collapse | Determina se as bordas devem ou não se sobrepor. | separate collapse |
5 | 1 | - | 2 |
| border-spacing | Determina o espaço entre as bordas. | valor | - | 1 | 6 | 2 |
| caption-side | Determina a posição do elemento caption de uma tabela. | top bottom left right |
- | 1 | 6 | 2 |
| empty-cells | Determina se as bordas de células vazias devem ser mostradas ou não. | show hide |
- | 1 | 6 | 2 |
| table-layout | Determina como as larguras definidas devem ser tratadas. | auto fixed |
5 | 1 | 6 | 2 |
Pseudo-classes
As pseudo-classes do CSS referem-se a determinados elementos do HTML. Os nomes das pseudo-classes são determinados pelo padrão CSS, ou seja, não é possível criar sub-classes com qualquer nome.
Sintaxe das pseudo-classes
Pseudo-classes para Links
Os exemplos mais conhecidos de pseudo-classes são os do elemento a, usado nos links.
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| :link | Propriedades dos links não visitados. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #FF0000; } |
3 | 1 | 4 | 1 |
| :visited | Propriedades dos links visitados. | qualquer propriedade de texto (cor, peso, decoração). a:visited { color: #00FF00; } |
3 | 1 | 4 | 1 |
| :focus | Propriedades dos links ativados via teclado. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #00FF00; } |
3 | 1 | 4 | 1 |
| :hover | Propriedades dos links quando o cursor do mouse eatá sobre eles. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #FF00FF; } |
3 | 1 | 4 | 1 |
| :active | Propriedades do link ativo. | qualquer propriedade de texto (cor, peso, decoração). a:link { color: #0000FF; } |
3 | 1 | 4 | 1 |
Para funcionar corretamente, a pseudo-classe a:hover precisa ser definida DEPOIS de a:link e a:visited. Da mesma forma, a:active precisa ser definida DEPOIS de a:hover. :focus e :hover podem ser usados para outros elementos além de links, como por exemplo h2:hover { color: #00FF00; cursor: help; }. Teste o título abaixo:
Teste de Pseudo-classe
Nada impede usar pseudo-classes com classes. Por exemplo, a definição a.azul:visited { color: navy; } é perfeitamente válida. Cria-se a classe "azul" para "a" e define-se a cor da pseudo-classe ":visited" como azul escuro ("navy").
Pseudo-classes para Parágrafos
Para parágrafos existem as pseudo-classes :first-child, :first-line e :first-letter
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| :first-child | Propriedades de elementos que são os primeiros filhos de outro elemento. Pode ser usada para outros elementos além do parágrafo. | qualquer propriedade. | 6 | 1 | 6 | 1 |
| :first-line | Propriedades da primeira linha de um parágrafo. | qualquer propriedade. | 6 | 1 | 6 | 1 |
| :first-letter | Propriedades da primeira letra de um parágrafo. | qualquer propriedade. | 6 | 1 | 6 | 1 |
A folha de estilo abaixo diz para que a primeira linha dos parágrafos seja mostrada em negrito, que a primeira letra dos parágrafos seja vermelha e 300% maior que as outras, que as áreas "div" tenham cor de fundo #E0E0E0 e que seu primeiro parágrafo filho tenha cor de fundo #C0C0C0:
Esta é a primeira linha do parágrafo e, de acordo com a folha de estilo, deve aparecer em negrito. A primeira letra, também de acordo com a folha de estilo, deve ser 300% maior e aparecer em vermelho.
Este é o primeiro parágrafo dentro de um elemento div e a folha de estilo diz que o primeiro elemento filho deve ter a cor de fundo #C0C0C0. O parágrafo mantém o estilo da primeira linha e da primeira letra.
Este é o segundo parágrafo dentro do mesmo elemento div. Sua cor de fundo não é alterada e o que aparece é a cor de fundo do elemento div, #E0E0E0. O parágrafo mantém o estilo da primeira linha e da primeira letra.
Pseudo-classes para conteúdo dinâmico
Existem duas pseudo-classes que permitem inserir conteúdo dinâmico nas suas páginas. São :before e :after.
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| :before | Conteúdo colocado antes do elemento. | content | - | 1 | 6 | 2 |
| :after | Conteúdo colocado depois do elemento. | content | - | 1 | 6 | 2 |
A folha de estilo abaixo prepara três condições, mostradas nos exemplos. Recado para os que ainda usam o navegador Internet Explorer: não vai dar para testar os exemplos!
Observe abaixo o elemento <h1> normal e o gráfico adicionado dinamicamente antes do título conforme determinado na primeira especificação da folha de estilo:
Título normal
Título com gráfico adicionado dinamicamente
A segunda especificação da folha de estilo faz com que o "bullet", caracter gráfico de número 2022 do conjunto unicode seja colocado na frente do título. A terceira especificação faz com que o conteúdo do atributo "id" do título seja mostrado depois do mesmo quando o cursor do mouse estiver sobre ele. No exemplo abaixo, chamei o segundo título com <h2 id="Recadinho dinâmico">...
Título normal
Título com bullet adicionado dinamicamente
Referências
- CSS tutorial (em inglês)
- SELFHTML (alemão/inglês)