A sintaxe do estilo (CSS)

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

Nosso conteúdo é produzido em colaboração com especialistas em tecnologia da informação sob o comando de Jean-François Pillou, fundador do CCM.net. CCM é um site sobre tecnologia líder em nível internacional e está disponível em 11 idiomas.
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.

Assine nossa newsletter!

Assine nossa newsletter!