Menu
  1. Accueil
  2. Glossário
  3. Webmaster
  4. CSS

A sintaxe do estilo (CSS)

Última modificação: terça 12 dezembro 2017 à 13:08 por pintuda.

O que é um estilo

A definição de um estilo é dada com a ajuda de regras em textos simples que permitem descrever o aspecto dos elementos da página.

Sintaxe do estilo

Uma regra CS é caracterizada por dois elementos principais:

Um seletor de tags, que permite precisar a que tags do documento o estilo se aplica;

Uma declaração de estilo, definida entre chavetas, permite especificar o estilo a ser aplicado às tags selecionadas. A declaração é constituída de uma ou várias propriedades, seguidas de : (dois pontos) e de um ou vários valores associados a cada propriedade, entre aspas ou separados por vírgulas, caso se tratem de várias palavras, sempre seguidos de ponto e vírgula.

Exemplo de uma sintaxe

A sintaxe é assim:

Syntaxe d

A seguinte sintaxe define, por exemplo, o estilo a ser aplicado aos links de hipertexto (tag A), ou seja, uma fonte do tipo verdana, com a dimensão de 18 pixels, negrito e de cor amarela: 

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

O que são e para que servem os seletores da tag

Chama-se seletor de tag (ou seletor de elementos) as palavras-chave que precedem as chavetas para indicar as tags do documento, às quais o estilo entre chavetas se aplica.

Para definir o estilo de uma tag HTML específica, basta colocar o nome da tag, sem os caracteres < e >. Por exemplo: 

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

tag {propriedades}  
  -->  
</STYLE>  
</HEAD>  
<BODY>  

<tag> ... </tag>  

...  
</BODY>  
</HTML>

Seletor múltiplo

Também é possível aplicar o estilo a várias tags separando o nome delas por uma vírgula (,). A sintaxe de tal seletor, chamado seletor múltiplo, é a seguinte: 

seletor-de-tag1, seletor-de-tag2  { /* style */  }

Seletor universal

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

*  { /* style */  }

Nota
 O seletor universal não é muito implementado nos navegadores.

Seletor de elementos encaixados

Você pode selecionar uma tag em um determinado contexto, ou seja, dependendo dos elementos que a rodeiam, graças aos seletores contextuais. Existem vários tipos de seletores contextuais: o seletor 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: 

seletor_X seletor_Y { /* style; */ }

Tomemos o seguinte código HTML: 

<p> <i> Atenção </i>, este é um <b>alerta</b> </p>  
<b> Considere-o </b>

A regra seguinte seleciona apenas a palavra aviso (a única rodeada por tags <B>, elas mesmas encaixadas numa tag <P>): 
I B { font-weight: bold; color: red; }


O seletor de elementos consecutivos permite criar uma regra que se aplica unicamente quando um elemento Y segue imediatamente um elemento X. A sua sintaxe é a seguinte: 

seletor_X + seletor_Y { /* style; */ }

Seja o seguinte HTML: 

<p> <i> Atenção </i>, este é um <b> alerta </b> </p>  
<b> Considere-o </b>

A regra seguinte seleciona apenas a palavra aviso (o único cercado de tags <B>, elas mesmas de acordo com uma tag <I>): 

I + B { font-weight: bold; color: red; }

O seletor de elementos pai-filho permite criar uma regra que se aplica unicamente quando um elemento Y é produto direto de um elemento X. A regra não se aplica se Y estiver encaixado numa ou várias outras tags intermédias. A sua sintaxe é a seguinte: 

selector_X > seletor_Y { /* style; */ }
.

Tomemos o seguinte código HTML: 

<p> <i> Atenção </i>, isto é um <b> aviso </b> </p>
<b> Considere-o </b>

A regra seguinte seleciona apenas o elemento <i> Atenção </i>” (o único cercado de tags <B>, elas mesmas diretamente encaixadas numa baliza <P>): 

P > B { font-weight: bold; color: red; }

As propriedades de estilo


O que é um comentário

É possível (e aconselhável) documentar as suas folhas de estilo incorporando comentários que dão informações adicionais (razão da escolha de tal ou tal estilo, tipo de documento a que se aplica, contexto, etc.). 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 */ 
tagA {propriedades}  
tagB {propriedades}  
tagC {propriedades}  
  -->  
  </STYLE>  
 </HEAD>  
<BODY>  
...  
</BODY>  
</HTML>

Nota
 Você pode aplicar um estilo online a todas as tags HTML, com exceção destas: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Veja também

Este documento, intitulado 'A sintaxe do 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.
Style syntax (CSS) Style syntax (CSS) Sintaxis de estilo (CSS) Sintaxis de estilo (CSS) Commentaires CSS et syntaxe Commentaires CSS et syntaxe La sintassi degli stili (CSS) La sintassi degli stili (CSS)