O que são folhas de estilos?
Folhas de estilos são nada mais que alguns comandos HTML que são introduzidas no cabeçalho de uma web page. Estas fazem um web site mais padronizado e bonitos . Também conhecidas como Style Sheets.
Quais os browsers que suportam as folhas de estilos?
O primeiro browser compativel foi o Internet Explorer 3.0. Recomendo o uso do Netscape Communicator e o Internet Explorer 4.0.
O que posso fazer com folhas de estilos?
Você já deve ter visto, ou teve o trabalho de criar uma tabela (<table>) para colocar uma cor de fundo em uma palavra. Veja o exemplo abaixo:
| texto aqui |
| texto aqui |
Qual o comando básico para folhas de estilos?
<style type="text/css">
<!--
O que você especificar deve ser
inserido aqui
-->
</style>
Importante: Coloque isso no cabeçalho (<head>...</head>).
Ok, e um exemplo de como especificar?
Veja abaixo o comando abaixo:
<style type="text/css">
<!--
H3 {
font-size : 34pt;
text-decoration : underline;
color : red;
background : #FFCC99
}
-->
</style>
Pronto, acima está o comando. Todo texto que for colocado entre <h3>...</h3> virá de vermelho, sublinhado, fonte do tamanho 34pt e o a cor de fundo #FFCC99.
Como faço para aprender mais?
A melhor maneira que eu acho para aprender, e como aprendi foi olhando o source de exemplos. Por isso criei 3 exemplos de folhas de estilos para você copiar, modificar, pesquisar, ou fazer o que você quiser com elas.
Existe alguma forma de criar um único arquivo com os comandos de folhas de estilos para que possa ser usado em todas as minhas páginas?
Sim, existe. Você deve fazer sua folha de estilo e salva-la com "aluma_coisa.ccs".
Para você chamar este arquivo, coloque o comando html:
<link rel=stylesheet href="alguma_coisa.css" TYPE="text/css">
Lembre, sempre no cabeçalho (<head>....</head>).
Conclusão
Folhas de Estilos fazem sua página mais atraente, bonita, padronizada e também economiza o seu tempo.
Espero que você tenha aprendido alguma coisa com este tutorial. Peço a você que preencha o formulário abaixo deixando seus comentários sobre o tutorial:
Get your own Free Home Page