Impressão

Resumo

A sintaxe do estilo (CSS)

Junho 2013

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:

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 */  }

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 , elas mesmas encaixadas numa baliza ):

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 , elas mesmas de acordo com uma baliza ):

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 “ Attention ” (o único cercado de balizas , elas mesmas directamente encaixadas numa baliza ):

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>

É 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

A ver igualmente

Comunidade de assistência e de conselho.

Die Syntax der Styles

Style syntax (CSS)

Sintaxis de estilo (CSS)

Commentaires CSS et syntaxe

La sintassi degli stili (CSS)

Folhas de estilo

Implantação CSS