A sintaxe do estilo (CSS)

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

Última modificação do dia Quinta 23 de Julho de 2009 às 18:35:13.

Anterior Folhas de estilo

Próximo Implantação CSS

Melhores respostas por « A sintaxe do estilo (CSS) » em :

O Código ASCII Ver A codificação das informações O morse foi a primeira codificação a permitir uma comunicação a longa distância. Foi Samuel F. B. Morse que o afinou em 1844. Este código é composto de pontos e travessões (uma código binário de certa forma…)....

S-Video (Y/C) Ver O standard S-Vídeo O standard S-Vídeo (para “Sony Vídeo”), às vezes chamado Y/C, é um modo de transmissão vídeo de componente separadas que utilizam cabos distintos para transitar as informações de luminância (luminosidade) e de...

Download Dev-C++ Ver

[Forçar uma cópia DVD] Copiar um DVD privado Ver

Como iniciar na programação, qual linguagem? VerComo iniciar, qual linguagem ? Introdução Aquilo que pode-se utilizar Delphi/Pascal Java Python .Net Smalltalk Aquilo que se pode utilizar a rigor C/C++ PHP Ada Lisp/Caml/ Aquilo que se pode deixar de utilizar

Mostrar uma cópia de tela VerÀs vezes, precisamos mostrar uma cópia de tela ou uma imagem no fórum. Veja aqui os passos a seguir : ĺNDICE 1 – Fazer cópias da tela ou da janela ativa 2 - Criar e salvar a imagem no disco rígido 2.1 - Abrir Paint 2.2 – Colar a...

Enviarme o código windows messenger de 2009 Ver

Abrir um arquivo com notepad c++ Ver

Cavalo de tróia: packed.win32.Tdss.c Ver

Download K-Lite Mega Codec Ver

Download DVD Shrink Ver

Download DviX Player Ver

Codificação de Huffman VerA codificação de Huffman David Huffman propôs em 1952 um método estatístico que permite atribuir uma palavra de código binário aos diferentes símbolos a comprimir (pixéis ou caracteres por exemplo). O comprimento de cada palavra de...

Redes sem fios - Wireless Networks VerO que é uma rede sem fios ? Uma rede sem fios (em inglês wireless network) é, como o seu próprio nome indica, uma rede na qual pelo menos dois terminais (computador portátil, PDA, etc.) podem comunicar sem ligação telegráfica. ...

Endereço IP VerO que é um endereço IP Na Internet, os computadores comunicam entre eles graças ao protocolo IP (Internet Protocol), que utiliza endereços numéricos, chamados endereços IP, compostos por 4 números inteiros (4 bytes) entre 0 e 255 e...