Vinculando folhas de estilo a documentos ~ .::Acessa Brasil::.

Os três tipos de vinculação de folhas de estilo

As folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:

Importadas ou lincadas;
Incorporadas;
Inline.

Folha de estilo externa

Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html e que tem 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 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 tag <head> do documento. A sintaxe geral para lincar uma folha de estilo chamada estilo.css é mostrada abaixo.

<head>

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

A sintaxe geral para importar uma folha de estilo chamada estilo.css é mostrada abaixo:

<head>
...........
<style type="text/css">

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

O browser lerá as regras de estilo do arquivo estilo.css, e formatará o documento de acordo com elas.
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser "salvas" com uma extensão .css

Folha de estilo incorporada ou interna

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no 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 esta incorporada.
As regras de estilo, válidas para o documento, são declaradas na seção <head> do documento com a tag de estilo <style>, conforme sintaxe mostrada abaixo:

<head>
...........
<style type="text/css">
<!--
body {
background: #000000; 
url("imagens/minhaimagem.gif");
}
h3 {
color: #FF0000;
}
p {
margin-left: 15px; 
padding:1.5em;
}
-->
</style>
...........
</head>

O browser lerá agora as regras de estilo na própria página, e formatará o documento de acordo com elas.
Nota: Um browser ignora normalmente as tags desconhecidas. Isto significa que um browser velho que não suporte estilos, ignorará a tag <style>, mas o conteúdo da tag será mostrado na tela. É possível impedir que um browser velho mostre o conteúdo da tag, "escondendo-o" através do uso da marcação de comentário do HTML.
Observe a inclusão dos símbolos  (fecha comentário) no código acima.

Folha de estilo inline

Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag do elemento HTML.
Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Use este método excepcionalmente, como 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:#000000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4  margens.
</p>

Folhas múltiplas de estilo

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 propriedades para o seletor h2:

h2 {
color: #FFCC00;
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: #FFCC00;
text-align: center;
font: italic 10pt Verdana, Sans-serif;
}

Se ambas as páginas estiverem vinculadas ao documento, como há um conflito no tamanho das letras para <h2>, prevalecerá a folha interna e a letra de <h2> terá o tamanho igual a 10 pt.

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).

quinta-feira, 18 de março de 2010