Vinculando folhas de estilo à documentos

Postado por em
republicado de www.maujor.com

Vinculando folhas de estilo à documentos

Publicado em: 10/12/2003 | Atualizado em: 03/05/2005 | 11/03/2011 | 18/05/2014

Introdução

Folhas de estilo, segundo sua localização, podem ser classificadas em três tipos:

  1. Externas;
  2. Incorporadas;
  3. Inline.

Neste tutorial estudaremos como vincular ao 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 documento a parte do documento HTML, isto é, a folha de estilo é um arquivo separado do arquivo html. 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 deverá ser lincado ou importado ao documento HTML, dentro da seção head do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css é mostrada a seguir.

<head>
...
 <link rel="stylesheet" type="text/css" href="estilo.css">
...
</head>

A sintaxe para importar uma folha de estilo chamada estilo.css é mostrada a seguir.

<head>
...
<style type="text/css">
 @import url("estilo.css");
</style> 
... 
</head>

O navegador "lê" as regras de estilo do arquivo estilo.css, e formata o documento de acordo com elas.

Uma folha de estilo externa pode ser escrita em qualquer editor de texto e gravado com a codificação de caracteres utf-8. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extensão .css

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 9pt 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 10pt 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 10 pt.

Comentários

Postar um comentário