Informática Numaboa - Tutoriais e Programação
Pequeno laboratório de CSS II
|
Seg 17 Abr 2006 23:21 |
- Detalhes
- Categoria: CSS - Cascanding Style Sheet
- Atualização: Domingo, 12 Abril 2009 12:47
- Autor: vovó Vicki
- Acessos: 11162
Esta é a continuação do tutorial de CSS para iniciantes, agora abordando assuntos de nível intermediário.
Propriedades de Texto
As propriedades de texto controlam a aparência do mesmo. É possível mudar sua cor, aumentar ou diminuir o espaço entre os caracteres, alinhar e decorar o texto, recuar a primeira linha de um texto e muito mais.
Nesta parte do tutorial veremos como se comportam as propriedades 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).
| ÁREA DE TESTE |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| color | Cor do texto. | color | 3 | 1 | 4 | 1 |
| direction | A direção do texto. | ltr rtl | 6 | 1 | 6 | 2 |
| letter-spacing | Aumenta ou diminui o espaço entre os caracteres. | normal length |
4 | 1 | 6 | 1 |
| text-align | Alinhamento do texto. | left right center justify |
4 | 1 | 4 | 1 |
| text-decoration | Decoração do texto. | none underline overline line-through blink |
4 | 1 | 4 | 1 |
| text-indent | Recua a primeira linha de um texto. | length % |
4 | 1 | 4 | 1 |
| text-transform | Controla as letras. | none capitalize uppercase lowercase |
4 | 1 | 4 | 1 |
| white-space | Especifica como os espaços são manipulados. | normal pre nowrap |
5 | 1 | 4 | 1 |
| word-spacing | Aumenta ou diminui o espaço entre palavras. | normal length |
6 | 1 | 6 | 1 |
Propriedades de Fundo
As propriedades de fundo permitem controlar a cor de fundo de um elemento, possibilitam inserir e posicionar imagens de fundo, além de repetir a imagem de fundo horizontal e verticalmente.
Veremos como se comportam as propriedades de fundo. 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).
| Área de Teste |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| background | Pode-se colocar todas as propriedades com apenas uma declaração. | background-color background-image background-repeat background-attachment background-position |
4 | 1 | 6 | 1 |
| background-attachment | Indica se a imagem de fundo deve ser fixa ou rolar com a página. | scroll fixed | 4 | 1 | 6 | 1 |
| background-color | A cor de fundo de um elemento. | color-rgb color-hex color-name transparent |
4 | 1 | 4 | 1 |
| background-image | Coloca uma imagem no fundo. | url none |
4 | 1 | 4 | 1 |
| background-position | Indica a posição inicial de uma imagem de fundo. | top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos |
4 | 1 | 6 | 1 |
| background-repeat | Determina se/como uma imagem de fundo será repetida. | repeat repeat-x repeat-y no-repeat |
4 | 1 | 4 | 1 |
Propriedades das Listas
As propriedades das listas permitem colocar marcadores de itens, escolher entre diversos marcadores predefinidos ou indicar uma imagem como marcador.
Aqui você pode ver como se comportam estas propriedades clicando 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).
|
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| list-style | Propriedade que permite usar apenas uma declaração. | list-style-type list-style-position list-style-image |
4 | 1 | 6 | 1 |
| list-style-image | Coloca uma imagem como marcador dos itens. | none url |
4 | 1 | 6 | 1 |
| list-style-position | Indica onde o marcador dos itens é colocado. | inside outside |
4 | 1 | 6 | 1 |
| list-style-type | O tipo de marcador de itens. | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
4 | 1 | 4 | 1 |
Referências
- CSS tutorial (em inglês)
- SELFHTML (alemão/inglês)