Onde armazenar ?
- Você pode armazenar as informações sobre a formatação das páginas
num arquivo com extensão .css ( valendo para todo o site ) ou dentro de uma página HTML.
Inseridas numa página, as formatações definidas serão válidas apenas para esta página.
Seus primeiros passos.
- Crie um documento HTML chamado minhapagina.html, utilizando a estrutura tradicional.
- Se você inserir a tag <H1>Bem-vindos ao meu site</H1>...
- ...o seu browser exibirá a mensagem assim.
- Esta é a formatação padrão do HTML para a tag <H1>.
- Em seguida, dentro do cabeçalho ( <Head>...</Head> ) insira a tag:
<style type="text/css">
</style>
- É aí que será definida toda a formatação do texto de minhapagina.html. Neste módulo, nós iremos trabalhar
somente com a tag H1 ( por enquanto, calma... ) Mas você pode definir estilos para
parágrafos ( <p> ), listas numeradas ( <ol> ),
tabelas ( <table> ), listas não numeradas ( <ul> ), etc., etc.
- <style type="text/css"> informa ao browser que serão utilizados
comandos Cascading Style Sheets. Assim, ele não precisar advinhar qual linguagem script será utilizada.
- Em seguida, defina a nova cor para a tag H1:
<style type="text/css">
H1 {color:blue}
</style>
- H1 {color:blue} informa ao browser que toda tag H1 deverá ser exibida na cor azul, alterando
a formatação padrão do HTML, que a exibe sempre na cor preta.
- Minhapagina.html ficará assim:
- E o resultado será este aí.
- Neste momento, você começou a centralizar a formatação da sua página num local apenas.
- Criando outras tags H1, a formatação definida em H1 {color:blue}...
- ...será aplicada aos textos.
Alterando tudo ao mesmo tempo.
- Tá. Agora, você quer alterar a cor de H1, mas sem essa de fazer uma alteração de cada vez.
- Como você utilizou CSS, será necessário alterar apenas a linha onde foi definido o estilo. Para
exibi-la em vermelho, por exemplo, digite: H1 {color:red}.
- E todos os cabeçalhos criados pela tag H1 serão alterados.
Se eu tiver 30 tags H1 numa página...
- ... as 30 tags H1 serão alteradas. Uma linha apenas fez todo o serviço. Você alterou a formatação
associada àquela tag HTML, utilizando o conceito de Cascading Style Sheets.
- E a sintaxe é muito fácil: tag HTML + { + a propriedade + : + valor da propriedade + }.
Posso alterar mais de uma propriedade ?! Por exemplo: cor, tamanho e alinhamento ?
- Tudo bem. As propriedades devem ficar separadas por ; ( ponto e vírgula ). Para redefinir,
por exemplo, o tamanho da fonte e o alinhamento do texto, digite: H1 {color:red; font-size:24; text-align:center}.
- font-size:24 altera o tamanho da fonte e text-align:center o alinhamento do texto ( cadê a dificuldade ?! ).
- Cascading Style Sheets é também suportado pelo Netscape.
- Neste módulo, nós trabalhamos apenas com H1, porque eu gosto de começar devagar. Nada de lhe
empurrar todas as informações ao mesmo tempo. Mas no próximo módulo, você irá aprender como
redefinir outros elementos do HTML.
- Cascading Style Sheets permite que você separe a formatação do conteúdo. A formatação fica dentro de
<style type="text/css">. O conteúdo ( texto ) fica dentro de <body>...</body>.
- Cada macaco ( gordo ou não ) no seu galho. E os arquivos HTML ficam mais limpos e fáceis
de serem lidos.
- Se você não usar CSS, será preciso definir a formatação, individualmente,
para cada tag:
<H3 align="center"><font color="red">.
.
- Para criar esta página, por exemplo,....
- ...utilizando apenas o HTML, você teria que definir a formatação para cada <H3>.
- ...a formatação ficaria centralizada no cabeçalho e separada do conteúdo. As alterações no estilo
da tag seriam feitas numa linha e valeria para todo o documento.
Parcerias RicardoHorta.Net
RicardoHorta.Net
Parcerias RicardoHorta.Net
www.ricardohorta.net - Direitos adquiridos - Autor: Ricardo Horta do Nascimento - 05/01/2001
