Vinculando folhas de estilo à documentos
Introdução
Folhas de estilo, segundo sua localização, podem ser classificadas em três tipos:
- Externas;
- Incorporadas;
- Em escopo;
- Inline.
Neste tutorial estudaremos como vincular a um documento HTML cada um destes tipos de folhas de estilo.
Folha de estilo externa
Uma folha de estilo é dita externa, quando as regras CSS são declaradas em um arquivo separado dos documentos HTML para os quais foram criadas. Um arquivo de folha de estilo deve ser gravado com a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).
O arquivo CSS da folha de estilo externa poderá ser lincado ou importado. A sintaxe geral para lincar uma folha de estilo denominada main.css é mostrada a seguir.
<head>
...
<link rel="stylesheet" type="text/css" href="main.css">
...
</head>
Conforme mostrado, usa-se o elemento link dentro da seção head do documento para importar uma folha de estilos em um documento HTML.
O navegador "lê" as regras de estilo do arquivo main.css, e formata o documento de acordo com elas.
A sintaxe geral para importar uma folha de estilo denominada fontes.css é mostrada a seguir.
/* essa folha de estilo demomina-se main.css */
@charset utf-8;
@import url("fontes.css");
body {
margin: 0;
background: #fff;
color: #333;
...
}
/* mais regras CSS */
Conforme mostrado, usou-se a diretiva @import dentro da folha de estilos main.css para importar uma folha de estilos denominada fontes.css.
Ao usar essa diretiva em uma folha de estilo ela obrigatoriamente deverá ser a primeira declaração na folha logo a seguir da diretiva @charset. Caso contrário não haverá importação.
A seguir você precisa usar o elemento link dentro da seção head do documento para importar a folha de estilos main.css, conforme mostrado anteriormente.
Folhas de estilos externas podem ser escritas em qualquer editor de texto, devem ser gravadas com a extensão .css e a codificação de caracteres utf-8. O arquivo não deve conter nenhuma tag HTML.
Notas complementares
A diretiva @import também pode ser usada para importação na seção head do documento HTML conforme mostrado a seguir.
<head>
...
<style rel="stylesheet" type="text/css">
@import url("fontes.css");
</style>
...
</head>
Contudo é aconselhável que esse tipo de importação seja evitado, pois o carregamento da folha de estilo pode trazer queda de performance. Então, prefira o uso do elemento LINK
A diretiva @import admite variadas sintaxes conforme mostradas a seguir
@charset utf-8;
1. @import url("fontes.css");
2. @import "fontes.css";
3. @import url("fontes.css") screen, projection;
4. @import "fontes.css" print;
5. @import url("fontes.css") media screen and (min-width: 800px);- As declarações 1 e 2 são rigorosamente iguais. A sintaxe admite usar ou não a função
url( ). - Nas declarações 3 e 4 definiu-se o tipo de mídia para as quais será feita a importação. Em cada uma das declarações usou-se uma das sintaxes para importar. Quando mais de uma, separe a declaração dos tipos de mídia com uso de vírgula.
- Na declaração 5 usou-se media-query para condicionar a importação. Essa funcionalidade foi criada pela CSS3.
Folha de estilo incorporada
Uma folha de estilo é dita incorporada ou interna, quando as regras CSS são declaradas na seção head do próprio documento HTML.
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.
As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.
<head>
...
<style rel="stylesheet" type="text/css">
body {
background: #000;
url(imagens/minhaimagem.gif);
}
h3 {
color: #f00;
}
p {
margin-left: 15px;
padding:1.5em;
}
</style>
...
</head>O navegador "lê" as regras de estilo na própria página, e formata o documento de acordo com elas.
Nota: Navegadores ignoram elementos desconhecidos. Isto significa que um navegador antigo que não suporte estilos, ignorará o elemento style, mas o conteúdo do elemento (as regras de estilo) será mostrado na tela. Para evitar que um navegador antigo mostre o conteúdo do elemento style coloque sinais de comentário HTML em volta das regras de estilo.
Observe a inclusão dos símbolos <!-- (abre comentário) --> (fecha comentário) na folha de estilo mostrada anteriormente. Nos dias atuais mesmo os navegadores mais antigos ainda em uso suportam CSS e a prática de se marcar regras de estilo com sinais de comentário HTML está em desuso.
Folha de estilo em escopo
A HTML5 criou uma folha de estilo do tipo vinculada para ser usada dentro de um container da marcação HTML. As regras CSS declaradas nessa modalidade de folha de estilo se aplicam somente ao elementos da marcação que se encontram dentro do container, ou no escopo do container, daí seu nome.
A sintaxe para declarar uma folha de estilo deste tipo é mostrada a seguir.
<!-- marcação HTML do documento -->
<div class="minha-classe">
<style rel="stylesheet" type="text/css" scoped="scoped">
/* regras de estilo */
</style>
<!-- marcação HTML dentro do div.minha-classe
As regras CSS serão aplicadas somente aqui -->
</div>
<!-- mais marcação HTML do documento -->Folha de estilo inline
Uma folha de estilo é dita inline, quando as regras CSS são declaradas dentro da tag de abertura do elemento HTML com uso do atributo style.
Estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens das folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.
A sintaxe para aplicar estilo inline é mostrada a seguir:
<p style="color:#000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>Folhas de estilo múltiplas
Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica.
Suponha, uma folha de estilo externa com as seguintes declarações para o seletor h2:
h2 {
color: #fc0;
text-align: center;
font: italic 14px Verdana, Sans-serif;
}e, uma folha de estilo interna com as seguintes propriedades para o seletor h2:
h2 {
color: #fc0;
text-align: center;
font: italic 16px Verdana, Sans-serif;
}
Estando ambas as folhas vinculadas ao documento há um conflito no tamanho da fonte para o elemento h2. e Sendo a folha interna declarada depois da externa na seção head do documento, prevalecerá a folha interna e a fonte de h2 terá o tamanho igual a 16px. Saiba mais...
Compartilhe essa matéria com seus amigos
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.