Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
  T u t o r i a l   D H T M L / C S S   E d a u r e l i o
            2 0 0 1  -  2 0 0 4

 FOLHA DE ESTILO 

  

O Cascading Style Sheets (CSS), ou Folhas de Estilo Encadeadas, é o nome de uma tecnologia criada para complementar a linguagem HTML e facilitar a criação e manutenção de sites na Web.

Sua primeira versão ou CSS1 foi lançada em dezembro de 1996 e é um modelo simples de formatação, na maior parte para apresentações screen-based. O CSS1 tem aproximadamente 60 propriedades. A versão CSS2, lançada em maio de 1998, foi desenvolvida sobre o CSS1 e, além de incluir todas as propriedades do CSS1, possui por volta de 70 propriedades novas. Ambos os padrões CSS1 & CSS2 são reconhecidos pelo W3C (World Wide Web Consortium), entidade que cuida do desenvolvimento e padronização das tecnologias ligadas à Web.

Uma folha de estilo pode ser definida como um gabarito que formata os comandos HTML de um bloco, uma página ou uma homepage de acordo com as preferências do programador. Através dela fica mais fácil e rápido gerenciar o layout de sua homepage. A palavra Cascading (encadeamento) se refere à possibilidade de uma style sheet "importar" outras formatações para dentro de si. Isto é, se quiser acrescentar outras formatações além das que já existem na própria página eu poderei criar um arquivo.css e depois chama-lo para dentro da página complementando suas formatações. Existe várias formas de incorporar a folha de estilo em uma página. Aqui estão as formas mais utilizadas:

Linking (Ligação) - Consiste em importar um arquivo.css (já previamente configurado) para dentro do arquivo.HTML. A ligação é feita através do comando LINK, cuja sintaxe é mostrada a seguir:

<LINK REL=StyleSheet HREF="arquivo.css">

Esse comando deve ser colocado dentro da tag <HEAD> no cabeçalho do arquivo HTML onde a configuração deve acontecer. Conforme você pode notar em HREF="arquivo.css", ambos os arquivos devem estar no mesmo diretório.

 

Embedding (Incorporação) - Consiste em incorporar a folha de estilo no próprio arquivo HTML. Esse método tem um efeito mais local pois ele configura apenas o arquivo onde ele está inserido. A sintaxe é a seguinte:

<STYLE TYPE="text/css">
...
...
</STYLE>

Esse comando também deve ser colocado dentro da tag <HEAD> no cabeçalho do arquivo HTML onde a configuração deve acontecer.

 

Importing (Importação) - A palavra Cascading (encadeamento) se refere à possibilidade de uma style sheet "importar" outra para dentro de si e definir novos comandos além dos já definidos no arquivo. O método importação é usado através do comando @IMPORT no qual é inserido um arquivo.css externo dentro do arquivo.HTML. Esse comando deve ser usado dentro da tag <STYLE> como mostra o modelo abaixo:

<STYLE TYPE="text/css">
@IMPORT URL(.../arquivo.css)
</STYLE>

A URL(...) deve conter o link absoluto de onde o arquivo.css de localiza. O atributo TYPE="text/css" é opcional e informa que o anexo se trata de um documento texto do tipo folha de estilo.

 

Inline (Em linha) - Esse método permite a aplicação da folha de estilo em apenas um bloco de comando específico sem que os demais blocos sejam alterados. Exemplo:

<P STYLE="color: white"> Embora todos os parágrafos desta página estejam configurado com fonte preta, este configurei com fonte branca por intermédio da folha de estilo através do método inline. </P>

Embora todos os parágrafos desta página estejam configurado com fonte preta, este configurei com fonte branca por intermédio da folha de estilo através do método inline.

Pronto, aqui foram apresentados os quatro principais métodos (Linking, Embedding, Importing e Inline) de utilizar uma folha de estilo. Agora vamos aprofundar em cada um deles, com exemplos práticos de como eles funcionam.

 

MÉTODO LINKING

O método Linking consiste em importar um arquivo.css para dentro do arquivo.HTML. O arquivo.css é um arquivo de texto que contém comandos de folha de estilo e possui uma extensão "css". Ele pode ser criado através de qualquer editor de texto simples, o WordPad do Windows por exemplo. A configuração das páginas desse tutorial está num arquivo chamado matrix.css. Dê uma olhada em sua sintaxe AQUI. A vantagem desse método é que ele facilita muito a reformatação do layout de uma homepage. Imagine ter que reconfigurar 40 ou 50 páginas! O comando que incorpora o arquivo matrix.css no arquivo.html é o seguinte:

<LINK REL=StyleSheet HREF="matrix.css">

Este comando deve ser colocado entre as tags <HEAD> e </HEAD>. O atributo HREF está com um link relativo, isso quer dizer que ambos os arquivos (este e o matrix.css) encontram-se no mesmo diretório do servidor onde esta HP está hospedada.

 

MÉTODO EMBEDDING

Por este método a folha de estilo é incorporada através do comando STYLE que sugiro colocar antes do comando </HEAD>. A sintaxe básica de um estilo é definida pelo modelo a seguir:

<style type="text/css">
seletores {propriedade:valor; propriedade:valor}
seletores {propriedade: valor}
...
</style>

Sendo que:

Seletor - É um comando HTML ou um nome criado iniciado por um ponto.
Propriedade - É o atributo desse comando que será alterado.
Valor - É a característica atribuída à propriedade.

Pois bem, vou começar criando três seletores que se chamarão .efeito1a, .efeito1b e .efeito1c, esses nomes escolhi aleatoriamente. Dentro de cada seletor vou declarar um tipo de fonte com seu respectivo tamanho (font:35px arial black), sua cor (color:#rrggbb), o espaçamento entre as letras (letter-spacing:3px), e finalmente sua disposição em relação a margem do parágrafo (margin:0px 0px -0px 0px;), tudo não necessariamente nesta ordem. Cada declaração DEVE estar separada por ponto e virgula. Como já falei (e é sempre bom repetir), todos os seletores deverão estar envolvidos pelas tags <STYLE>...</STYLE>. O comando TYPE="text/css" declara que as informações a seguir trata-se de um documento folha de estilo. Por exemplo:

<STYLE TYPE="text/css">
.efeito1a {color:#000080; font-size:35px; font-famify: arial black; letter-spacing:3px; margin:0px 3px -45px 1px;}
.efeito1b {color:#FFFFFF; font-size:35px; font-family:arial black; letter-spacing:3px; margin:0px 5px -48px 2px;}
.efeito1c {color:#4169E1; font-size:35px; font-family:arial black; letter-spacing:3px; margin:0px 10px -51px 3px;}
</STYLE>

Agora tenho 3 declarações prontas e configuradas. Elas podem ser inseridas em qualquer parte do arquivo mas aconselho coloca-la antes da tag de fechamento do cabeçalho </HEAD> (para ficar mais fácil localiza-la depois). Agora vou endereçar cada declaração através da propriedade CLASS. Esta deve ser colocada onde eu quero que o efeito aconteça. Exemplo:

<P ALIGN="center" CLASS=efeito1c>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito1b>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito1a>Cascading Style Sheets

E finalmente o resultado: uma frase com sobreposição de 3 textos com cores diferentes criando um efeito 3D:

 

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

 

Só para reforçar o entendimento agora vou pegar este mesmo exemplo e alterar alguns parâmetros para ver o que acontece:

<STYLE TYPE="text/css">
.efeito2a {color:#003366; font-size:35px; font-family:arial black; margin:0px;}
.efeito2b {color:#999999; font-size:35px; font-family:arial black; margin:0px 5px -52px 15px;}
.efeito2c {color:#CCCCCC; font-size:35px; font-family:arial black; margin:0px 10px -53px 30px;}
</STYLE>
<P ALIGN="center" CLASS=efeito2c>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito2b>Cascading Style Sheets
<P ALIGN="center" CLASS=efeito2a>Cascading Style Sheets

 

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

<STYLE TYPE="text/css">
.efeito3a {color:#000000; font-size:40px; margin:0px;}
.efeito3b {color:#444444; font-size:40px; margin:0px 0px -35px 20px;}
.efeito3c {color:#888888; font-size:40px; margin:0px 0px -35px 40px;}
.efeito3d {color:#cccccc; font-size:40px; margin:0px 0px -35px 60px;}
</STYLE>

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

<STYLE TYPE="text/css">
.efeito4a {color:#a0522d; font-size:35px; font-family:courier new; margin:0; letter-spacing:0px;}
.efeito4b {color:#daa520; font-size:40px; font-family:courier new; margin:0px 0px -45px 20px; letter-spacing:-1px;}
.efeito4c {color:#ffd700; font-size:45px; font-family:courier new; margin:0px 0px -50px 35px; letter-spacing:-2px;}
.efeito4d {color:#ffefd5; font-size:50px; font-family:courier new; margin:0px 0px -55px 50px; letter-spacing:-3px;}
</STYLE>

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

Cascading Style Sheets

 

Veja bem, nestes exemplos usei algumas propriedades CSS que foram aplicadas a um título, podemos dizer, deixando-o personalizado. Porém existem cerca de 130 propriedades que apresentam as mais diferentes formas possíveis de formatação de uma página, propiciando uma gama de recursos ainda pouco conhecido e explorado pelos webmasters. Na seção CSS apresento uma pequena relação delas que são abordadas neste tutorial.

Para aprender mais sobre efeitos 3D, vá para:

  • Fonte Tridimensional

    •  

    ALGUNS DETALHES IMPORTANTES:

    1) Se houver mais de um seletor para a mesma declaração, como H1 e H2 no exemplo abaixo, eles devem ser separados por vírgulas.

    <STYLE TYPE="text/css">
    BODY {background: url(textura.jpg) navy; color: white}
    H1, H2 {color: yellow; font-size: 24pt; font-family: Arial}
    </STYLE>

    2) Elementos de nível inferior herdam propriedades dos elementos de nível hierárquico mais alto. Uma cor de texto definida para body será usada para colorir todo o texto do documento, a não ser que sejam sobrepostos por uma regra subseqüente. No modelo abaixo o todo o texto será branco, exceto os títulos marcados com <H1> e <H2>, que serão amarelo.

    <STYLE TYPE="text/css">
    BODY {color: white}
    H1, H2 {color:yellow}
    </STYLE>

    3) Para seletores especiais que mudam de estado, como o texto marcado com <A>, é possível atribuir propriedades diferentes para cada estado. Um bom exemplo pode ser visto em Links Coloridos na seção Classe de Estilo.

     

    MÉTODO IMPORTING

    O método importação é usado através do comando @IMPORT e consiste no processo de inserir um arquivo.css externo dentro do arquivo.HTML. Esse comando deve ser usado dentro da tag <STYLE> como mostra o modelo abaixo:

    <STYLE TYPE="text/css">
    @IMPORT URL(.../arquivo.css)
    </STYLE>

    Método semelhante ao Linking que chama um arquivo externo por intermédio de um endereço HREF="...", porém com uma abrangência maior possibilitando chama-lo até de um servidor diferente. Eu, particularmente, não vejo a vantagem de ter um arquivo layout de uma página em servidor diferente salvo se eu entendi errado a função desse comando. Caso esteja enganado solicito a alguém mais instruído me informar através do E-mail edaurelio@hotmail.com a finalidade exata do mesmo.

    Obrigado!

     

    MÉTODO INLINE

    Esse método possibilita configurar apenas um bloco tag em questão mantendo inalterado os demais blocos similares através do atributo STYLE="lista de propriedades", de modo que estas propriedades não precisam ser declaradas em um cabeçalho especial em <head>. Aqui segue diversos exemplos interessantes de configuração:

    MANIPULANDO A ESPESSURA DA LINHA DO TEXTO:

    Os hobbits são um povo discreto mas muito antigo, mais numeroso outrora do que é hoje em dia. Amam a paz e a tranqüilidade e uma boa terra lavrada: uma região campestre bem organizada e bem cultivada era seu refúgio favorito. Hoje, como no passado, não conseguem entender ou gostar de máquinas mais complicadas que fole de forja, um moinho de água ou um tear manual, embora sejam habilidosos com ferramentas.

    Acima, em azul, temos uma frase com a espessura de linha padrão adotada pelo browser. Abaixo temos a mesma frase com a espessura entre as linhas alterada para mais.

    <P STYLE="line-height: 25pt; color:00009c"> Os hobbits são um povo...

    Os hobbits são um povo discreto mas muito antigo, mais numeroso outrora do que é hoje em dia. Amam a paz e a tranqüilidade e uma boa terra lavrada: uma região campestre bem organizada e bem cultivada era seu refúgio favorito. Hoje, como no passado, não conseguem entender ou gostar de máquinas mais complicadas que fole de forja, um moinho de água ou um tear manual, embora sejam habilidosos com ferramentas.

    Ainda o mesmo exemplo agora alterando o espaço para menos.

    <P STYLE="line-height: 10pt; color:00009c"> Os hobbits são um povo...

    Os hobbits são um povo discreto mas muito antigo, mais numeroso outrora do que é hoje em dia. Amam a paz e a tranqüilidade e uma boa terra lavrada: uma região campestre bem organizada e bem cultivada era seu refúgio favorito. Hoje, como no passado, não conseguem entender ou gostar de máquinas mais complicadas que fole de forja, um moinho de água ou um tear manual, embora sejam habilidosos com ferramentas.

     

    UNIDADES & VALORES

    O CSS proporciona diversas unidades de medidas para se definir o tamanho, distância, largura, altura ou espaçamento entre objetos (fonte, tabelas, margens, bordas... etc). As unidades podem ser Absolutas ou Relativas. Unidades absolutas são aquelas que apresentam valores fixos, que não se alteram conforme a resolução do monitor. Unidades relativas apresentam valores variáveis que sofrem alterações conforme a resolução do monitor onde a página é visualizada. Unidades absolutas e relativas só podem ser configuradas com números inteiros (positivos ou negativos), tais como, 1, 2, 15, -7, -10... etc. Não adianta configurar valores com números fracionários ou mistos, tais como, 3/4 ou 2,75 que o browser não os reconhecerá. As unidades são:

    ABSOLUTAS:
     
  • Milímetro (mm)
  • Centímetro (cm), onde 1cm = 10mm
  • Polegada (in), onde 1in = 2,54cm
  • Ponto (pt), onde 1pt = 1/72in
  • Pica (pc), onde 1pc = 12pt
    		•  RELATIVAS:
     
  • em
  • ex
  • Pixel (px) (default)
  • Porcentagem (%)
     
    		•

    A unidade utilizada por default pelos browsers é o pixel (px), isso é, o browser assume esta unidade de medida quando o webmaster não especifica qualquer unidade depois do valor. Exemplo:

    SINTAXEEFEITO
    <SPAN STYLE="font-size:12px">TEXTO</SPAN> TEXTO
    <SPAN STYLE="font-size:12">TEXTO</SPAN> TEXTO

    Repare que na segunda linha, como não especifiquei uma unidade para o valor 12, o browser assumiu a unidade pixel (px). Agora observe o que acontece quando pego o mesmo exemplo e defino a unidade milímetro (mm) para este número:

    SINTAXEEFEITO
    <SPAN STYLE="font-size:12px">TEXTO</SPAN> TEXTO
    <SPAN STYLE="font-size:12mm">TEXTO</SPAN> TEXTO

    Valores negativos criam um efeito de sobreposição dos objetos e são bons para criar efeitos 3D em texto ou sobrepor imagens para realçar o layout da página. Nesta página, mais acima, apresentei alguns exemplos de como isso acontece configurando a propriedade margin com valores negativos.

     

    HERANÇA DE ESTILO

    O que vem a ser herança em CSS? Herança quer dizer que as formatações genéricas (de nível hierárquico inferior), prevalecerão indefinidamente a menos que você declare outra formatação específica para cada elemento. Explico: Vamos supor que você tenha uma página cujo corpo seja formatado com fonte arial, background cor creme (#ffdead) e uma cor de letra cor marrom (#5b0000). Então, usando o Método Embedding a síntaxe de sua página seria a seguinte:

    <STYLE TYPE="text/css">
    BODY {font-family:arial; color:#B0C4DE; background:#007700}
    </STYLE>

    Isso quer dizer que essas características prevalecerão em sua página (herança) a menos que você altere algum elemento específico. No exemplo estou mudando a formatação de apenas um parágrafo usando o Método Inline.

    <P STYLE="font-family:courier new; color:00009c">

    Este parágrafo será diferente dos demais da página porque defini uma formatação específica para ele. Para os demais prevalece a formatação anterior.

     

    Home Importante! História Tutorial HTML Glossário Faqs Buscadores Sinapse
    Fóruns ASCII Cores JavaScript CSS Links Novidades Browsers Conclusão
    © Free Copyright - edaurelio@hotmail.com - Arquivo atualizado em 04/09/04