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:
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.
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.
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.
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:
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:
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:
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.
documentos HTML, que também poderão ter suas próprias folhas de estilo internas.
0 comentários:
Postar um comentário
Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).