Tipos de Css
As folhas de
estilo podem ser vinculadas a um documento HTML de três maneiras distintas:
- Externas (Importadas ou linkadas);
- Internas (Incorporadas);
- Inline.
Folhas de Estilos Externas (Importadas ou Linkadas)
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. O
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 linkado ou importado ao documento HTML, dentro da seção head
do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir.
<head><link rel="stylesheet" type="text/css" href="estilo.css"></head>
A sintaxe
geral para importar uma folha de estilo chamada estilo.css é mostrada a seguir.
<head><style type="text/css">@import url("estilo.css");</style></head>
Folhas de Estilos Incorporadas ou Internas
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 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 type="text/css"><!--body{background: #000;url(imagens/minhaimagem.gif);}h3{color: #f00;}p{margin-left: 15px;padding:1.5em;}--></style></head>
Folhas de Estilos InLine
Uma folha de estilo é dita inline, quando as
regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo
style.
Um estilo inline só se aplica a um elemento
HTML. Ele perde muitas das vantagens de 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:
<pstyle="color:#000; margin: 5px;">Aqui um parágrafo de cor preta e com 5px nas 4 margens.</p>
Excelente a explicação. Parabéns!!!
ResponderExcluir