Informática Numaboa - Tutoriais e Programação
Pequeno laboratório de CSS I
|
Seg 17 Abr 2006 12:43 |
- Detalhes
- Categoria: CSS - Cascanding Style Sheet
- Atualização: Quarta, 15 Abril 2009 12:03
- Autor: vovó Vicki
- Acessos: 14045
CSS é a abreviação de Cascading Style Sheets. Estilos (styles) normalmente definem a aparência de elementos HTML e são armazenados em folhas (sheets) de estilo. Múltiplas definições são cascateadas (cascading) em uma única.
Introdução
Aqui vão algumas considerações importantes.
A origem do CSS
Originalmente as tags da linguagem HTML foram projetadas para definir o conteúdo de documentos. Assim "isto é um cabeçalho", "isto é um parágrafo" e "isto é uma tabela" é definido com as tags <h1>, <p> e <table>. O layout do documento ficava por conta do navegador e não havia tags de formatação.
Como a evolução dos navegadores não parou, novas tags foram criadas (como <font> e atributos de cor) e foi ficando cada vez mais difícil separar o conteúdo do layout de apresentação. Para resolver este problema, o W3C, o consórcio responsável pela padronização do HTML, criou os STYLES (estilos) na versão 4.0 do HTML.
Características do CSS
Folhas de estilo definem COMO os elementos HTML são mostrados, da mesma forma que as tags font e os atributos de cor faziam em versões anteriores. Normalmente os estilos são guardados em arquivos externos do tipo .css e podem ser atrelados a uma, várias ou até a todas páginas de um site. Isto facilita enormemente a manutenção - ao invés de alterar trocentas páginas, altera-se apenas um (ou alguns poucos) arquivo de estilo.
As informações de estilo podem ser especificadas de várias formas. O estilo pode ser especificado dentro de um determinado elemento HTML, dentro do elemento <HEAD> de uma página HTML ou num arquivo externo. Até mesmo vários arquivos externos podem ser referenciados dentro de um único documento HTML. Quando há mais de uma fonte, os estilos são "cascateados" numa nova folha de estilos "virtual" obedecendo a seguinte prioridade:
- Estilo em linha (dentro de um elemento HTML)
- Folha de estilo interna (dentro da tag <head>)
- Folha de estilo externa
- Padrão (default) do navegador
Isto significa que, um atributo definido dentro da tag de um elemento terá preferência, mesmo que o mesmo atributo esteja definido numa folha de estilo interna, numa folha de estilo externa ou seja o default do navegador.
Sintaxe CSS
A sintaxe CSS pede três partes: um seletor, uma propriedade e um valor. O seletor, normalmente, é um elemento ou uma tag HTML e a propriedade é o atributo que se quer alterar atribuindo-lhe um novo valor. A propriedade deve ser separada do valor por dois pontos e ambos ficam entre chaves. Por exemplo, para definir que o corpo do documento seja preto, usa-se:
Para um mesmo elemento podemos definir várias propriedades. Por exemplo:
Observe algumas particularidades:
- As propriedades e seus valores podem estar em várias linhas (o que facilita a leitura)
- Os espaços no início das linhas são ignorados
- Cada propriedade e valor é terminada por um ponto e vírgula (por isso podemos usar várias linhas!)
- Pode-se usar quantas propriedades se quiser dentro das chaves referentes a um elemento (no exemplo, o parágrafo)
- Caso o valor tenha mais de uma palavra, estas devem ser colocadas entre aspas ("Sans Serif")
Agrupamentos também são permitidos. Por exemplo, podemos indicar várias famílias de fontes ou vários elementos. Neste caso, o separador é a vírgula. No caso das famílias de fontes, o navegador procura pela primeira; se não encontrar a fonte, escolhe a segunda e assim sucessivamente. Veja os exemplos abaixo:
O seletor class
Pode-se criar classes para os seletores. A vantagem é que podemos usar o mesmo elemento de diversas formas. Por exemplo, se quisermos ter duas classes diferentes de parágrafos, um com o texto alinhado à direita e outro com o texto centralizado, basta definir:
Depois, no documento HTML, é só indicar:
Apenas UMA classe de atributo pode ser usada num mesmo elemento! <p class="direita" class="centro">este é um parágrafo</p> está errado!
As classes não precisam necessariamente estar associadas a um elemento. Estas classes genéricas podem ser usadas com vários elementos que as aceitem, por exemplo:
O seletor id
Também podemos definir estilos para elementos HTML com o seletor id. O seletor id é definido como #. Se definirmos um id como
poderemos atribuir este estilo para qualquer elemento identificado como "verde". Por exemplo:
Se quisermos restringir a id a algum elemento, como por exemplo o parágrafo, determinamos:
NÃO comece o nome de uma classe ou de uma id com um número.
O Mozilla/Firefox vai estrilar!
Comentários
Se você quiser inserir comentários nos seus arquivos .css (e deve mesmo, porque depois de alguns meses você não vai lembrar chongas do que fez), você pode usar os delimitadores de área /* e */ ou o comentário de linha //.
Como inserir uma folha de estilo
Quando o navegador lê uma folha de estilo, ele vai formatar o documento de acordo com as informações obtidas. Existem três maneiras de se inserir folhas de estilo:
Folhas de estilo externas
Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Cada uma das páginas precisam linkar a folha de estilo usando a tag <link> na seção head:
Neste exemplo, o arquivo que contém os elementos, seus atributos e valores é o meuEstilo.css. Este arquivo não pode conter caracteres de formatação (como os criados pelo Word) ou tags HTML. Pode ser algo como:
Quando os valores dos atributos tiverem medidas, não as separe com um espaço porque, novamente, o Mozilla/Firefox vai estrilar. Use 20px e não 20 px.
Folha de estilo interna
Deve-se usar uma folha de estilo interna quando apenas um documento deve ter um determinado estilo. Define-se estilos internos na seção head usando a tag <style>.
Estilo em linha
A folha de estilo em linha não está fica num arquivo separado ou na seção head - ela é colocada diretamente na tag do elemento que se queira alterar. Por exemplo:
Recuos
As propriedades de recuo definem os espaços entre as bordas e o conteúdo dos elementos. Valores negativos não são aceitos. Os recuos superior, direito, inferior e esquerdo podem ser alterados independentemente usando propriedades próprias. A propriedade padding pode controlar todos os recuos simultaneamente.
Aqui veremos como se comportam estas propriedades. Clique várias vezes nos links da tabela para ver como elas 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).
| { padding-top: 0px } { padding-right: 0px } { padding-bottom: 0px } { padding-left: 0px } |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| padding | Propriedade que permite usar apenas uma declaração. | padding-top padding-right padding-bottom padding-left |
4 | 1 | 4 | 1 |
| padding-bottom | Propriedade do recuo inferior. | length % |
4 | 1 | 4 | 1 |
| padding-left | Propriedade do recuo esquerdo. | length % |
4 | 1 | 4 | 1 |
| padding-right | Propriedade do recuo direito. | length % |
4 | 1 | 4 | 1 |
| padding-top | Propriedade do recuo superior. | length % |
4 | 1 | 4 | 1 |
Margens
As propriedades das margens definem os espaços ao redor dos elementos. É possível usar valores negativos para sobrepor conteúdos. As margens superior, direita, inferior e esquerda podem ser alteradas independentemente usando propriedades próprias. A propriedade geral margin pode ser usada para alterar todas as margens de uma vez só.
Propriedades das Margens
Aqui veremos como se comportam as propriedades das margens. Clique 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).
{ margin-top: 0px } { margin-right: 0px } { margin-bottom: 0px } { margin-left: 0px } |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| margin | Propriedade que permite usar apenas uma declaração. | margin-top margin-right margin-bottom margin-left |
4 | 1 | 4 | 1 |
| margin-bottom | Propriedade para a margem inferior. | auto length % |
4 | 1 | 4 | 1 |
| margin-left | Propriedade da margem esquerda. | auto length % |
3 | 1 | 4 | 1 |
| margin-right | Propriedade da margem direita. | auto length % |
3 | 1 | 4 | 1 |
| margin-top | Propriedade da margem superior. | auto length % |
3 | 1 | 4 | 1 |
Bordas
As propriedades das bordas permitem especificar o estilo e a cor das bordas dos elementos. No HTML usamos tabelas para criar bordas ao redor de textos, mas com as propriedades CSS das bordas podemos criar vários efeitos que podem ser aplicados em qualquer elemento.
Clique várias vezes nos links da tabela para ver 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).
Bordas teste 1
| AQUI É QUE AS COISAS ACONTECEM! |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| border | Propriedade que permite usar apenas uma declaração. | border-width border-style border-color |
4 | 1 | 4 | 1 |
| border-bottom | Propriedade que permite usar apenas uma declaração para a borda inferior. | border-bottom-width border-style border-color |
4 | 1 | 6 | 1 |
| border-bottom-color | Cor da borda inferior. | border-color | 4 | 1 | 6 | 2 |
| border-bottom-style | Estilo da borda inferior. | border-style | 4 | 1 | 6 | 2 |
| border-bottom-width | Largura da borda inferior. | thin medium thick length |
4 | 1 | 4 | 1 |
| border-color | A cor das quatro bordas. Aceita de 1 a 4 valores. | color | 4 | 1 | 6 | 1 |
| border-left | Propriedade que permite usar apenas uma declaração para a borda esquerda. | border-left-width border-style border-color |
4 | 1 | 6 | 1 |
| border-left-color | Cor da borda esquerda. | border-color | 4 | 1 | 6 | 2 |
| border-left-style | Estilo da borda esquerda. | border-style | 4 | 1 | 6 | 2 |
| border-left-width | Largura da borda esquerda. | thin medium thick length |
4 | 1 | 4 | 1 |
| border-right | Propriedade que permite usar apenas uma declaração para a borda direita. | border-right-width border-style border-color |
4 | 1 | 6 | 1 |
| border-right-color | Cor da borda direita. | border-color | 4 | 1 | 6 | 2 |
| border-right-style | Estilo da borda direita. | border-style | 4 | 1 | 6 | 2 |
| border-right-width | Largura da borda direita. | thin medium thick length |
4 | 1 | 4 | 1 |
Bordas teste 2
| Experimente compor diferentes bordas clicando em border-style E border-width! |
| AQUI É QUE AS COISAS ACONTECEM! |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| border-style | Estilo das quatro bordas, pode ter de 1 a 4 estilos. | none hidden dotted dashed solid double groove ridge inset outset |
4 | 1 | 6 | 1 |
| border-top | Propriedade que permite usar apenas uma declaração para a borda do topo. | border-top-width border-style border-color |
4 | 1 | 6 | 1 |
| border-top-color | Cor da borda do topo. | border-color | 4 | 1 | 6 | 2 |
| border-top-style | Estilo da borda do topo. | border-style | 4 | 1 | 6 | 2 |
| border-top-width | Largura da borda do topo. | thin medium thick length |
4 | 1 | 4 | 1 |
| border-width | Permite declarar a largura das quatro bordas. Aceita de 1 a 4 valores. | thin medium thick length |
4 | 1 | 4 | 1 |
Fontes
As propriedades de fontes permitem escolher famílias, peso, tamanho e estilo do texto.
Como sempre, 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).
| AQUI É QUE AS COISAS ACONTECEM! |
| Propriedade | Descrição | Valores | IE | F | N | W3C |
| font | Propriedade que permite usar apenas uma declaração. | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
4 | 1 | 4 | 1 |
| font-family | Uma lista priorizada de de nomes de famílias de fontes. | family-name generic-family |
3 | 1 | 4 | 1 |
| font-size | Indica o tamanho da fonte. | xx-small x-small small medium large x-large xx-large smaller larger length % |
3 | 1 | 4 | 1 |
| font-style | Indica o estilo da fonte. | normal italic oblique |
4 | 1 | 4 | 1 |
| font-variant | Mostra o texto em small-caps ou na fonte normal. | normal small-caps |
4 | 1 | 6 | 1 |
| font-weight | Indica o peso da fonte. | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
4 | 1 | 4 | 1 |
Referências
- CSS tutorial (em inglês)
- SELFHTML (alemão/inglês)