| Capítulo I - 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. O 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. |
class=TextoDestaque>
| Capítulo II - Criando Estilos | |
|
|
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte 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.
Para entender melhor, eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:
Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul;
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:
Note como é fácil aplicar todas as declarações ao elemento parágrafo (P) e como cada declaração, exceto a última, é seguida pelo caracter de ponto-e-vírgula exigido. |