banco de dúvidaslistacontatooutros materiais


Material desenvolvido para os usuários do Instituto de Ciências Matemáticas e de Computação, da Universidade de São Paulo em São Carlos, SP

Autora: Maria Alice Soares de Castro

ATENÇÃO:
Este material não pode ser comercializado.

Este trabalho não tem fins lucrativos, nem está relacionado a provedores de acesso ou sites comerciais.

:: Capa » HTML Avançado

  

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

    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:

    <HEAD>
    ...
    <LINK REL="stylesheet" HREF="folha_de_estilo.css">
    ...
    </HEAD>

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.

topicoTabelas
topicoFrames
topicoInteração
topicoÁudio e Vídeo
topicoFolhas de Estilo
    itemOpções gerais
    itemSeções de texto
    itemOutros efeitos

 

 

«Quase sem qualquer desvantagem»

As folhas de estilo não têm efeito nos browsers que são compatíveis somente com versões de HTML anteriores (e inclusive) à 3.2.

O Netscape ainda não reconhece algumas definições de folhas de estilo.

 




©1995-2003 - URL: http://www.icmc.usp.br/ensino/material/html/css.html