Tipos
de folhas de estilos CSS
As definições de estilos podem ser feitas por três
vias:- Folha de estilos externa — Definem-se estilos que
poderão ser adotados por todas as páginas do site criando um arquivo
externo que contenha o código CSS. Assim, é possível realizar
simultaneamente mudanças na aparência de todas as páginas que estiverem
vinculadas a esse arquivo.
- Folha de estilos interna — As definições são
feitas na própria página e, neste caso, só nela os estilos funcionam.
- Folha de estilos inline — Os estilos são
definidos em um elemento específico para funcionarem só nele.
Folhas
de estilos externas
Uma folha de estilos externa é um arquivo de texto
separado do arquivo HTML e deve conter apenas código CSS; nenhum outro texto
pode ser inserido, nem tags HTML. O arquivo pode ser salvo com qualquer
extensão, mas é interessante atribuirmos a extensão css para que saibamos que se
trata de arquivo de folha de estilos.No documento HTML, o arquivo CSS deverá ser LINKADO ou IMPORTADO de dentro do elemento <head>.
Para LINKAR uma folha de estilos usa-se a seguinte sintaxe geral:
<head>...<link rel="stylesheet"
type="text/css" href="arquivo.css">...</head>rel="stylesheet" indica que o link é feito com uma folha de estilos.
type="text/css" indica que é um arquivo de texto que contém código CSS.
href="arquivo.css" indica o nome do arquivo.
Para IMPORTAR uma folha de estilos coloca-se a linha de comando @import url(arquivo.css) entre as tags <style> e </style>. Eis a sintaxe geral:
<head>...<style type="text/css">@import url("arquivo.css");</style>...</head>type="text/css" indica que é um arquivo de texto que contém código CSS.
arquivo.css indica o nome do arquivo.
Folhas de estilos
internas
<head>...<style
type="text/css"><!--
/* código CSS */--></style>...</head>Note-se que o código CSS foi colocado entre os símbolos de comentários HTML <!-- (abre comentário) --> (fecha comentário). Por que? Qualquer aplicação de usuártio ignora tags desconhecidas. Isso significa que um browser que não suporte estilos(browser velho) irá ignorar o elemento <style>, mas o conteúdo do elemento será mostrado na tela. Para impedir que um browser velho mostre esse conteúdo, é necessário escondê-lo através do uso da marcação de comentário do HTML.
Folhas de estilos
inline
Estilos inline são aqueles que são aplicados a uma
única instância de um elemento. São definidos dentro do próprio elemento, só
para ele. Na tag que o introduz insere-se o atributo style e, a este,
atribui-se um valor que é constituído de código CSS. Pode-se, por exemplo,
definir estilos para um cabeçalho específico, para um parágrafo específico,
para um link específico, etc.<elemento style="código CSS">Os estilos inline devem ser utilizados excepcionalmente porque contrariam o propósito principal das CSS que é o de separar o conteúdo da apresentação. Na verdade, não há muita diferença entre usar o atributo style ou um atributo de formatação da linguagem HTML. Mas, de qualquer forma, é um recurso que faz parte da linguagem e muitas vezes se faz necessário o seu uso.
Observação:
Não se deve fazer confusão: o atributo style tratado aqui não tem a ver com o elemento <style> mencionado anteriormente. Apenas a palavra é a mesma.
O efeito em
cascata das folhas de estilos
O efeito em cascata permite que se faça múltiplas
definições de estilo incidentes sobre o mesmo elemento. Mas como se resolvem os
conflitos?Prevalece a definição mais específica. Ou seja, uma definição feita no próprio documento HTML prevalece sobre a feita no arquivo externo; uma feita para um elemento específico prevalece sobre a do documento; etc. Esta é uma característica de enorme utilidade, porque fazem-se as definições gerais e, conforme as necessidades, estabelecem-se diferenciações.
A aplicação do usuário (browser, p. ex.) faz incidirem as definições de estilo, obedecendo a seguinte ordem (o item 5 tem maior prioridade):
1
|
folha de
estilos default da aplicação do usuário
|
||
2
|
folha de
estilos do usuário
|
||
3
|
folha de
estilos externa
|
folhas de
estilos do autor
|
|
4
|
folha de
estilos interna
|
||
5
|
folha de
estilos inline
|
||
Dentro de cada folha de estilos, a última definição tem prioridade.
É possível, no entanto, atribuir à definição de estilo a característica especial de "importante", acrescentando a ela a declaração !important. Neste caso, essa definição suplanta as demais que tenham o mesmo alvo, idependentemente da ordem mostrada acima. Havendo conflito de definições de autor e usuário que possuam a declaração !important, prevalecerá a do usuário.
É sobre o efeito em cascata que o autor do documento concentra seu raciocíncio para encadear as folhas de estilos adequadamente.
