Kioskea
Pesquisar

A sintaxe do estilo (CSS)

Março 2015

Definição de um estilo

A definição de um estilo faz-se com a ajuda de regras em texto simples que permitem descrever o aspecto dos elementos da página. Uma regra CS é caracterizada por dois elementos principais:

  • Um selector de balizas, permitindo precisar a que balizas do documento o estilo se aplicam;
  • Uma declaração de estilo, definida entre chavetas, permitindo precisar o estilo a aplicar às balizas seleccionadas. A declaração é ela própria constituída : 
    • de uma ou várias propriedade(s), seguidas do caracter “:” (dois pontos),
    • de um ou vários valores(s) associado(s) a cada propriedade, entre aspas ou separados por vírgulas, se se tratar de várias palavras ,sempre seguidos de ponto e vírgula.


A sintaxe é assim a seguinte:

Syntaxe d



A sintaxe seguinte define por exemplo o estilo a aplicar às ligações hipertexto (baliza <A>), isto é, uma letra tipo Verdana de dimensão 18 pixéis, a negrito e de cor amarela:

A  {  
       font-family: Verdana;  
       font-size: 18px;  
       font-style: bold;  
       color: yellow  
       }

Os selectores de baliza

Chama-se “selector de baliza” (ou “selector de elementos”) às palavras-chave que precedem as chavetas e servindo para indicar as balizas do documento às quais o estilo entre chavetas se aplica.


Para definir o estilo de uma baliza HTML específica, basta pôr o nome da baliza (sem os caracteres < e >. Por exemplo:

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

balise {propriétés}  
  -->  
  </STYLE>  
 </HEAD>  
<BODY>  

<balise> ... </balise>  

...  
</BODY>  
</HTML>

Selector múltiplo

É igualmente possível aplicar o estilo a várias balizas separando o nome destas por uma vírgula (,). A sintaxe de tal selector, chamado selector múltiplo, é a seguinte:

selecteur-de-balise1, selecteur-de-balise2  { /* style */  }

Selector universal

Graças ao selector universal (“*”) é possível definir um estilo que se aplica a todos os elementos HTML. A sintaxe do selector universal é a seguinte:

*  { /* style */  }

Nota
O selector universal está pouco implementado nos navegadores!

Selector de elementos encaixados

É possível seleccionar uma baliza num contexto dado, isto é, em função dos elementos que o rodeiam, graças aos selectores contextuais.

Existem vários tipos de selectores contextuais:

  • O selector de elementos encaixados permite criar uma regra que só se aplica quando um elemento Y está encaixado num elemento X. A sua sintaxe é a seguinte:
    selecteur_X selecteur_Y { /* style; */ }


Tomemos o código HTML seguinte :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p>  
<b> Prière d'en tenir compte </b>


A regra seguinte selecciona apenas a palavra “advertência” (a única rodeada de balizas <B>, elas mesmas encaixadas numa baliza <P>):
P B { font-weight: bold; color: red; } 
  • O selector de elementos consecutivos permite criar uma regra que se aplica unicamente quando Y segue imediatamente um elemento X. A sua sintaxe é a seguinte :
    selecteur_X + selecteur_Y { /* style; */ }


Seja o código HTML seguinte :

<p> <i> Attention </i>, ceci est un <b> avertissement </b> </p>  
<b> Prière d'en tenir compte </b>

A regra seguinte selecciona apenas a palavra “advertência” (o único cercado de balizas <B>, elas mesmas de acordo com uma baliza <I>):
I + B { font-weight: bold; color: red; } 
  • O selector de elementos pai-filho permite criar uma regra que se aplica unicamente quando Y é filho directo de um elemento X. A regra não se aplica se Y está encaixado numa ou várias outras balizas intermédias. A sua sintaxe é a seguinte:
    selecteur_X > selecteur_Y { /* style; */ }


Tomemos o código HTML seguinte :

<p> <b><i> Attention </i></b>, ceci est un <i><b> avertissement </b></i> </p>  
<b> Prière d'en tenir compte </b>

A regra seguinte selecciona apenas o elemento “<i> Attention </i>” (o único cercado de balizas <B>, elas mesmas directamente encaixadas numa baliza <P>):
P > B { font-weight: bold; color: red; } 

As propriedades de estilo


Os comentários

É possível (e aconselhável) documentar as suas folha de estilo incorporando comentário que dão informações adicionais (razão da escolha de tal ou tal estilo, tipo de documento a que se aplica, contexto,…). Os comentários CS são delimitados pelas siglas/* e */:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">  
<HTML>  
 <HEAD>  
  <STYLE type="text/css">  
  <!--  
/* isto é um comentário */ 
baliseA {propriétés}  
baliseB {propriétés}  
baliseC {propriétés}  
  -->  
  </STYLE>  
 </HEAD>  
<BODY>  
...  
</BODY>  
</HTML>

Nota
É possível aplicar um estilo “em linha” a todas as balizas HTML, com excepção das balizas seguintes : BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE
Para uma leitura offline, é possível baixar gratuitamente este artigo no formato PDF:
A-sintaxe-do-estilo-css.pdf

A ver igualmente


Style syntax (CSS)
Style syntax (CSS)
Sintaxis de estilo (CSS)
Sintaxis de estilo (CSS)
Die Syntax der Styles
Die Syntax der Styles
Commentaires CSS et syntaxe
Commentaires CSS et syntaxe
La sintassi degli stili (CSS)
La sintassi degli stili (CSS)
Este documento, intitulado « A sintaxe do estilo (CSS) »a partir de Kioskea (pt.kioskea.net) está disponibilizado sob a licença Creative Commons. Você pode copiar, modificar cópias desta página, nas condições estipuladas pela licença, como esta nota aparece claramente.