Postagens
Male
Como são criadas as folhas de estilos
Olá pessoal estou postando este tutorial sobre folhas de estilos em CSS. Procurei deixar o código bem colorido para facilitar o entendimento.
As três modalidades de folhas de estilos
As definições de estilos podem ser feitas de três formas:
1. Folha de estilos externa — Definem-se estilos que poderão ser usados por todas as páginas do site criando um arquivo externo que contenha o código CSS. Assim, é possível realizar simultaneamente mudanças na aparência de todas as páginas que estiverem vinculadas a esse arquivo.
2. Folha de estilos interna — As definições são feitas na própria página e funcionam somente nela.
3. Folha de estilos inline — Os estilos são definidos em um elemento específico para funcionarem só nele.
Folhas de estilos externas
Uma folha de estilos externa é um arquivo de texto separado do arquivo HTML e deve conter apenas código CSS; nenhum outro texto pode ser inserido, nem tags HTML. O arquivo deve ser salvo, de preferência, com a extensão .css.
No documento HTML, o arquivo CSS deverá ser LINKADO ou IMPORTADO de dentro do elemento <head>.
Veja como LINKAR uma folha de estilos:
<head>
...
<link rel="stylesheet" type="text/css" href="arquivo.css">
...
</head>
Onde:
rel="stylesheet" indica que o link é feito com uma folha de estilos.
type="text/css" indica que é um arquivo de texto que contém código CSS.
href="arquivo.css" indica o nome do arquivo.
Para IMPORTAR uma folha de estilos coloca-se a linha de comando @import url("arquivo.css") entre as tags <style> e </style>. Veja o exemplo abaixo:
<head>
...
<style type="text/css">
<!--
@import url("arquivo.css");
-->
</style>
...
</head>
Onde:
type="text/css" indica que é um arquivo de texto que contém código CSS.
"arquivo.css" indica o nome do arquivo.
Folhas de estilos internas
Uma folha de estilos interna — também chamada de folha de estilos incorporada — é o código CSS inserido no próprio documento HTML, entre as tags <style> e </style>, dentro da seção <head>. O que se insere entre essas tags é a mesma coisa que constituiria o conteúdo do arquivo externo. Veja como utilizar uma folha de estilos interna:
<head>
...
<style type="text/css">
<!--
/* código CSS */
-->
</style>
...
</head>
O browser lê as regras de estilo entre as tags <style> e </style> e formata o documento de acordo com elas.
Note que o código CSS foi colocado entre os símbolos de comentários HTML <!-- (abre comentário) --> (fecha comentário). Por que? Um browser mais antigo irá ignorar o elemento <style>, e o conteúdo do elemento será mostrado na tela. Para impedir que um browser mais antigo mostre esse conteúdo, é necessário escondê-lo através do uso da marcação de comentário do HTML.
Folhas de estilos inline
Estilos inline são inseridos direto na Tag. São definidos dentro do próprio elemento, só para ele. Na tag que o introduz insere-se o atributo style e, a este, atribui-se um valor que é constituído de código CSS. Pode-se, por exemplo, definir estilos para um cabeçalho específico, para um parágrafo específico, para um link específico, etc.
<elemento style="código CSS">
A maioria dos elementos HTML pode receber o atributo style.
Deve-se evitar utilizar o a folha de estilo inline porque contrariam o propósito principal das CSS que é o de separar o conteúdo da apresentação. Posso dizer que não tem muita diferença entre usar o atributo style ou um atributo de formatação da linguagem HTML. Porém, é um recurso que faz parte da linguagem e não poderia ficar de fora dessa explicação.
Observação:
O atributo style tratado aqui não tem nada a ver com o elemento <style> mencionado anteriormente. Apenas a palavra é a mesma.
Comentários CSS
Comentários são usados para explicar o código de forma a auxiliar numa futura manutenção feita por você mesmo ou outra pessoa. Iniciam-se pelo símbolo /* e terminam com o símbolo */. Um comentário pode ser inserido em qualquer parte do código ou em qualquer linha que componha uma regra CSS, para explicar o código.
/* Isto é um comentário */
Este comentário possui uma linha, mas poderia possuir mais.
É isso pessoal. Espero que seja de ajuda. No próximo tutorial vou falar sobre o atributo font.
