quarta-feira, 5 de junho de 2013
Vinculando folhas de estilo a documentos
Os três tipos de vinculação de folhas de estiloAs folhas de estilo podem ser vinculadas a um documento de três maneiras distintas:
1.Importadas ou lincadas;
2.Incorporadas;
3.Inline.
Folha de estilo externaUma 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” mce_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 internaUma 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 <!– (abre comentário) –> (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.
Eu e meu netinho.
Mauricio Samy Silva [maujorcss[arroba]maujor.com]
Copacabana – Rio de Janeiro, RJ – Brasil
fonte: http://www.meustutoriais.com.br
Assinar:
Postar comentários (Atom)
Nenhum comentário:
Postar um comentário