Declaração de uma folha de estilo (CSS)

Fevereiro 2017

Declaração de uma folha de estilo

As folhas de estilo são um conjunto-superior da linguagem HTML, o que significa que não estão integradas directamente nas recomendações HTML do W3C. Assim, é necessário informar o código HTML com elementos que indicam, por um lado, o tipo do documento, quer dizer a versão das recomendações HTML e CS utilizadas na página e, por outro lado, os estilos propriamente ditos.

Declaração do tipo de documento

É necessário indicar na página HTML o prólogo do tipo de documento, quer dizer, uma referência à norma HTML utilizada. Esta declaração faz-se com uma linha do tipo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>...</HEAD>  
 <BODY>Contenu de la page</BODY>  
</HTML>


Além disso, uma baliza Metapermite indicar ao navegador ou aos motores de busca a linguagem utilizada para a definição das folhas de estilo. Esta baliza Méta, a incluir na rubrica HTML do documento, é a seguinte :

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>  
  <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">  
 </HEAD>  
 <BODY>Contenu de la page</BODY>  
</HTML>

Incorporar os estilos

Os estilos podem ser incorporados no documento HTML de três maneiras diferentes:


Estilo do documento

As folhas de estilo de uma página web são declaradas graças à baliza ESTILO, baliza <HEAD> e </HEAD>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>  
  <STYLE type="text/css">  
  <!--  

  Definição dos estilos;  

  -->  
  </STYLE>  
 </HEAD>  
<BODY></BODY>  
</HTML>


O atributo type= " text/css " da baliza <STYLE> permite especificar o tipo de folha de estilo utilizada. A baliza de comentário <!-- ... --> serve para evitar que navegadores pouco recentes, por conseguinte que não suportam as folhas de estilo, mostrem estas informações.

Estilo em linha

É igualmente possível definir o estilo numa baliza de um documento. Chama-se a este tipo de declaração uma declaração em linha.

Esta maneira de definir as folhas de estilo é pouco recomendada porque vai ao encontro do interesse das folhas de estilo, na medida em que o estilo é embarcado no seio de cada elemento. Isto pode no entanto servir para definir de maneira excepcional um estilo para um elemento HTML específico, que não necessita uma definição global.

Para definir um estilo em linha, basta informar o atributo ESTILO da baliza HTML à qual se deseja aplicar um estilo específico:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>  
 ...  
 </HEAD>  
<BODY>  
...  
<BALISE Style="style:valeur;"> ... </BALISE>  
...  
</BODY>  
</HTML>




Nota
É possível aplicar um estilo “em linha” a todas as balizas HTML, excepto as balizas seguintes : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE



Eis um exemplo de estilo aplicado a uma baliza<H1> :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>  
 ...  
 </HEAD>  
<BODY>  
...  
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>  
...  
</BODY>  
</HTML>

Estilo externo

O facto de poder armazenar a definição das folhas de estilo fora do documento é uma vantagem porque é assim possível, alterando o ficheiro que contém as folhas de estilo, alterar o aspecto de todas as páginas web relacionadas!

Trata-se, numa primeira etapa, de criar um ficheiro de texto contendo as folhas de estilo e cuja extensão seja .css, por exemplo style.css :

<!--  
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0//EN&quot;>  
 body {background-image: home.gif;}  
 LI  {font: 13px Verdana;}  
 B  {font: 14px Verdana; font-weight: bold;}  
 A  {  
     font:12px Verdana;  
     font-weight: bold;  
     color=black;  
     text-decoration: none;  
   }  
 H1  {font: 16px Arial;font-weight: bold;color=black;}  
 H2  {font: 14px Arial;font-weight: bold;color=black;}  
-->


Seguidamente, basta criar em cada página HTML o atalho para esta página de definição de estilo :

<HTML>  
 <HEAD>  
  <LINK rel="stylesheet" type="text/css" href="style.css">  
 </HEAD>  
...
  • A baliza <LINK> avisa o navegador que deve procurar um documento situado fora da página HTML.
  • O atributo rel= " stylesheet " precisa que o documento em questão é uma folha de estilo externa.
  • O atributo type= " text/css " precisa o tipo de folha de estilo.
  • O atributo href= " URL “dá a 'URL da folha de estilo, quer dizer, o seu lugar na Internet.

Estilo importado

As recomendações do W3C oferecem uma última maneira de incluir folhas de estilo num documento: importando folhas de estilo. Com efeito, é possível importar folhas de estilo externas a nível da declaração do estilo de documento, inserindo o comando @IMPORT imediatamente após a baliza estilo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>  
  <STYLE type="text/css">  
  <!--  
  @IMPORT URL(url da folha a importar);  

    Definição dos estilos do documento;  

  -->  
  </STYLE>  
 </HEAD>  
<BODY></BODY>  
</HTML>



Nota
Se várias definições importadas se referirem à mesma baliza, só a última será tida em conta pelo navegador

As balizas <SPAN> e <DIV>

Pode ser necessário aplicar estilos diferentes a partes de texto num mesmo parágrafo, é para isto que servem as balizas <SPAN> e <DIV>

A baliza <SPAN>

A baliza <SPAN> serve para aplicar estilos a partes de um parágrafo.
Utiliza-se igualmente com IDEM e com CLASS.
A sua sintaxe é a seguinte:

<SPAN class=Nom_de_la_classe> Texte </SPAN>

A baliza <DIV>

Em vez de se aplicar a algumas palavras num parágrafo, a baliza DIV aplica-se num bloco, quer dizer, a um ou vários parágrafos.


A sintaxe da baliza DIV é a seguinte:

<DIV class=important> paragraphes </DIV>

Os estilos em cascata

É possível definir vários estilos utilizando os diferentes meios que oferece o CS. Assim, quando várias folhas de estilo externas são chamadas, obtém-se o que chamamos de cascata de estilos, quer dizer uma combinação de estilos para diversos elementos HTML. Se vários estilos dizem respeito ao mesmo elemento, só o último estilo será conservado.

<LINK rel=stylesheet type="text/css" href="style1.css">  
<LINK rel=stylesheet type="text/css" href="style2.css">  
<LINK rel=stylesheet type="text/css" href="style3.css">


Se vários estilos são redundantes entre diferentes folhas de estilo externas, as recomendações CS permitem igualmente oferecer a escolha entre várias folhas de estilos alternativas, graças ao atributo rel da baliza ESTILO, combinado com um atributo TITLE permitindo escolhê-las nominativamente:

<LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1">  
<LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">  
<LINK rel=stylesheet type="text/css" href="stylepardefaut.css">


Por outro lado, quando vários estilos são chamados numa página utilizando os diferentes meios de inclusão possíveis, a tomada em conta dos estilos, quando vários estilos são redundantes, é tal que o estilo o mais próximo possível do conteúdo é mantido. Assim, a ordem de prioridade é a seguinte:
Estilo em linha > Estilo do documento > Estilo importado > Estilo externo

Veja também


Declaring a style sheet (CSS)
Declaring a style sheet (CSS)
Declaración de una hoja de estilo (CSS)
Declaración de una hoja de estilo (CSS)
Deklaration eines Stylesheets (CSS)
Deklaration eines Stylesheets (CSS)
Déclaration d'une feuille de style (CSS)
Déclaration d'une feuille de style (CSS)
Dichiarazione di un foglio di stile (CSS)
Dichiarazione di un foglio di stile (CSS)
Este documento, intitulado 'Declaração de uma folha de estilo (CSS)', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.