BH INTERNET AGÊNCIA WEB - CRIAÇÃO DE SITES - HOSPEDAGEM DE SITES - REGISTRO DE DOMÍNIO - PUBLICIDADE - DESENVOLVIMENTO DE SITES - BH

Guia Flash

Guia Hardware

Guia HTML

Guia Fireworks

Página 36

Folhas de Estilo

Um avanço interessante na linguagem HTML após a versão 3.2 foi a introdução das Style Sheets ou Cascading Style Sheets. Essas folhas de estilo permitem o uso de formatações uniformes em um site, de maneira bastante "econômica".

Logo nas primeiras seções deste tutorial (Cores e fontes de textos), vimos que, para poder formatar um texto, era preciso escrever uma marcação parecida com:

<h3><font face="Arial" color="#4A7D7B">Um título genérico</font></h3>
<p><font face="Arial" size="2">Um texto genérico com algum </font><font face="Arial" size="2" color="red">destaque qualquer</font><font face="Arial" size="2"> junto, após um título genérico, etc.</font></p>

para ter o resultado:

Um título genérico (REGISTRO DE DOMÍNIO)

Um texto genérico com algum destaque qualquer junto, após um título genérico, etc.

Acontece que, de um documento para outro, pode acontecer de esquecermos o tamanho da fonte usada no texto, qual a fonte ou a cor dos títulos de determinada subseção, e a uniformidade de apresentação das páginas acaba ficando prejudicada.

Com as folhas de estilo, podemos declarar estilos apropriados para seções de texto, aplicando esses estilos sem nos preocuparmos com detalhes de fontes, cor e tamanhos.

E mais: se for necessário modificar algum dia as cores de todos os títulos ou dos destaques ao longo dos textos, simplesmente alteramos a folha de estilo, atualizando imediatamente a apresentação de todos os documentos que fazem referência a ela.

Para o exemplo acima, poderíamos criar a seguinte folha de estilo:

BODY { font: 10pt Arial }
H3 { color:#4A7D7B }
.destaque { color: red }

E assim, para ter o mesmo resultado do exemplo acima, a formatação seria muito mais simples que a primeira:

<h3>Um título genérico</h3>
<p>Um texto genérico com algum <span class="destaque">destaque qualquer</span> junto, após um título genérico, etc.</p>

A definição da folha de estilo deve ficar dentro de <head>, da seguinte forma, se a folha for definida dentro do mesmo documento em que está sendo usada:

<head>
------
<STYLE TYPE="text/css">
   BODY { font: 10pt Arial }
   H3 { color:#4A7D7B }
   .destaque { color: red }
</STYLE>
------
</head>

Ou então,quando a folha de estilo é definida externamente:

Neste caso, uma mesma folha de estilo pode ser usada por vários documentos HTML, que também poderão ter suas próprias folhas de estilo internas.

<< Anterior 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36