Parte I Parte II
Por que usar CSS? Tags personalizadas
Como criar estilos Atalhos e atributos de CSS
As folhas de estilo Miscelâneas
O uso deste tutorial em outros documentos é permitido desde que mantenha o conteúdo original e seja exposto claramente a fonte. Qualquer dúvida contate o criador do tutorial pelo e-mail ricardo@iecentral.net .
Tutorial CSS - Parte 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. A HTML inclui uma tag para praticamente todos os elementos de design comumente utilizados, incluindo tags de título (
,
...), lista (a tag para lista ordenada, a tag para lista não ordenada) e assim por diante.
No passado , a tag 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 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
sejam verdes". Você precisa dizer isso somente uma vez e cada título
em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag
para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos
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. Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags
) 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
) 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}
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.
As folhas de estilo
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte "em cascata".Os três lugares são: 1) em um documento separado fora de todos os documentos HTML, 2) no cabeçalho de um documento HTML e 3) dentro de uma tag de HTML. Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, como discutido aqui:
Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.
Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.
Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.
Estilos externos
Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag no cabeçalho que referencie esse arquivo .css.Veja o exemplo:
Arquivo meu_estilo.css
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
P {font-family: 'Courier';
margin-left: 0.5in}
Agora, para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css.
OBS: Você deve inserir este texto entre as tags ...e colocar a localização correta do seu arquivo e seu nome.
Estilos incorporados
Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:
Exemplo Estilos Incorporados
Estilos inline
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:
Exemplo:
Note que em vez das tags , você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.
Parte II
Internet Explorer® Central - Copyright© 1998
Central - Serviços para internet.
Webmaster: Ricardo Klamath
- para lista não ordenada) e assim por diante.
No passado , a tag
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 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
sejam verdes". Você precisa dizer isso somente uma vez e cada título
em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag
para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos
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. Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags
) 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
) 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}
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.
As folhas de estilo
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três métodos nos seus web sites. A maneira como as regras interagem entre si está relacionada à parte "em cascata".Os três lugares são: 1) em um documento separado fora de todos os documentos HTML, 2) no cabeçalho de um documento HTML e 3) dentro de uma tag de HTML. Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, como discutido aqui:
Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.
Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.
Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.
Estilos externos
Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag no cabeçalho que referencie esse arquivo .css.Veja o exemplo:
Arquivo meu_estilo.css
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
P {font-family: 'Courier';
margin-left: 0.5in}
Agora, para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css.
OBS: Você deve inserir este texto entre as tags ...e colocar a localização correta do seu arquivo e seu nome.
Estilos incorporados
Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:
Exemplo Estilos Incorporados
Estilos inline
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:
Exemplo:
Note que em vez das tags , você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.
Parte II
Internet Explorer® Central - Copyright© 1998
Central - Serviços para internet.
Webmaster: Ricardo Klamath
Exemplo:
Note que em vez das tags , você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.
Parte II
Internet Explorer® Central - Copyright© 1998
Central - Serviços para internet.
Webmaster: Ricardo Klamath
0 comentários:
Enviar um comentário