A Aldeia Numaboa lhe dá as boas vindas!
Pequeno laboratório de CSS I
|
Seg 17 Abr 2006 12:43 |
- Detalhes
- Categoria: CSS - Cascanding Style Sheet
- Acessos: 14043
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 //.
- Anterior
- Próximo >>