CSS básico #002

A BASE DO CSS É EM CAIXAS

Todos os elementos que podem ser vistos numa página da Web ocupam uma determinada área na página. Essa área tem a forma de um rectângulo, que designamos por caixa. A caixa de um elemento contém tudo aquilo que lhe diz respeito: conteúdo, linhas de contorno, margens e espaço em branco. O esquema seguinte representa de forma genérica as diversas áreas que constituem a caixa de um elemento.

Para percebermos o significado deste gráfico aqui ficam alguns esclarecimentos:

1. O conteúdo do elemento fica dentro de um rectângulo em redor do qual existem outras áreas.
2. Entre o conteúdo do elemento e os seus limites (border) pode existir espaço em branco, que designamos por padding.
3. Os limites do elemento designam-se por border. É aí que o elemento termina.
4. O rectângulo (caixa) que contém o elemento pode ter margens (margin) a separá-lo dos outros elementos da página. As margens estão fora dos limites do elemento.

A largura de um elemento é determinada unicamente pela largura do seu conteúdo. Já a largura da caixa que contém o elemento é dada pela soma da largura do conteúdo mais as larguras ocupadas pelas linhas de contorno (border) e pelo espaço em branco (padding). A altura de um elemento calcula-se de forma análoga. As margens servem para deslocar o rectângulo (caixa) do elemento relativamente à sua posição normal.

CSS básico #001

CSS A SINTAXE

A sintaxe das definições CSS é composta por duas partes: um seletor e uma declaração.
Exemplo:



No exemplo o seletor H1 diz que o estilo se aplica a elementos e a definição diz que a cor do texto destes elementos deve ser preto.
A declaração fica entre chavetas ({...}) e pode conter várias definições. Cada definição é formada por um par propriedade:valor, em que o valor é separado da propriedade pelo carácter : (dois pontos.) A exemplo seguinte ilustra isto de forma genérica:



O seletor é normalmente o nome de um elemento do HTML, mas também pode ser um seletor de classe, um seletor de ID ou um seletor contextual (estes conceitos serão esclarecidos mais à frente.)
Dentro das chavetas (caracteres { e }) podemos colocar várias definições separadas pelo carácter ";" (ponto e vírgula). O exemplo seguinte define três propriedades para o elemento , que são o alinhamento, a cor do texto e o tipo de letra.



AGRUPANDO SELETORES

Se precisarmos de aplicar os estilos a mais do que um elemento podemos agrupar os seletores que partilham as mesmas definições. Para isso escrevemos uns a seguir aos outros separados por vírgulas. No exemplo seguinte os elementos de até partilham todos a mesma definição:



SELETORES DE CLASSE

Os seletores de classe permitem-nos definir estilos diferentes que podem ser aplicados ao mesmo elemento.
Imagine que precisa de ter dois tipos diferentes de parágrafo no documento: um alinhado à direita e outro alinhado ao centro. Eis como os seletores de classe tornam isto muito fácil:



Os seletores de classe também podem ser definidos sem colocarmos o nome de um elemento no início da definição. Quando isso acontece as definições podem ser aplicadas a qualquer elemento cujo atributo class tenha o valor correcto. O exemplo seguinte define uma classe que pode ser utilizada com qualquer elemento do HTML:



SELETOR DE ID

O seletor de id é diferente do seletor de classe porque se aplica a um único elemento da página. As regras do HTML ditam que os valores do atributo id não podem repetir-se numa mesma página. Daí resulta que o número de elementos no documento com um determinado id é um ou é zero.
A regra de seleção para o estilo definido no exemplo seguinte indica que ele só pode ser aplicado a um elemento que tenha o valor "para1" no atributo id:



Se quisermos que a regra se aplique a qualquer elemento que tenha o id para1 basta escrevê-la na forma seguinte:



A regra acima é aplicável a qualquer elemento que tenha o id correto porque o seletor * diz que ela se aplica a todos os elementos. No exemplo seguinte ela seria aplicada ao elemento :



ESCREVER COMENTÁRIOS NUMA FOLHA DE ESTILOS

Podemos inserir comentários nas definições CSS para explicar o código que escrevemos tornando-o mais fácil de compreender. Quando mais tarde voltarmos a uma folha de estilos, ou se a partilharmos com outra pessoa, será mais fácil perceber como funciona.
Para iniciar um comentário escreva a sequência de caracteres "/*", depois o texto do comentário, e no fim escreva "*/" para terminar o comentário. O exemplo seguinte mostra como se faz: