29/01/2012

CSS


Por que usar CSS?

Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim de manter a mesma aparência, seguir um padrão. Por exemplo, um elemento de design Heading 1 é geralmente alguma fonte grande que identifica todas as principais divisões de tópicos de um capítulo, artigo ou página da web. Um elemento de design Heading 2 identifica todos os títulos dos subtópicos. A HTML inclui uma tag para praticamente todos os elementos de design comumente utilizados, incluindo tags de título (<H1>,<H2>...), lista (a tag <OL> para lista ordenada, a tag <UL> para lista não ordenada) e assim por diante.
No passado , a tag <H1> em quase todos os web sites parecia a mesma - texto preto era consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus próprios títulos diferenciados, tinha de formatar cada tag de título individualmente, utilizando tags <FONT> ou similares. Se mais tarde mudasse de idéias sobre a aparência desses títulos, tinha de voltar e mudar cada título individualmente. Ou seja: um processo lento e trabalhoso.


As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, você pode fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". Você precisa dizer isso somente uma vez e cada título <H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos <H1> sejam azuis" e pronto!

Obviamente você não está limitado a títulos e nem a cor azul. É possível definir um estilo personalizado para cada elemento de design em seu web site, incluindo títulos, lista, tabelas e imagens, para citar só alguns. E, além de definir uma cor, você pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante.
-->
Como criar estilos

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

elemento {atributo1: valor; atributo2: valor ...}


Explicação desta sintaxe:
Elemento - descreve o elemento de design ao qual o estilo será aplicado.
A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra é às vezes chamadas de seletor.
Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.
Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão , como 20pt (20 pontos) para font-size.
Atributo:valor - a parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.


Agora é hora de exemplos.

 Uma regra CSS que especifica que todos os títulos de nível 1 (tags <br />
<h1>
) sejam exibidos em uma fonte de 36 pontos:

H1 {font-size: 36pt}

Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags </h1>
<h2>
) devem ter tamanho de 24 pontos e cor azul;

H2 {font-size: 24pt; color: blue}

Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos. Por exemplo, aqui está uma regra que diz que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da página:

P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 0.5in}




0 comentários

Postar um comentário

Deixe seu comentário ou critica