A sintaxe do estilo (CSS)

Setembro 2017

O que é 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.

Sintaxe do estilo

Uma regra CS é caracterizada por dois elementos principais:


Um seletor de balizas, que permite 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 selecionadas. A declaração é constituída de uma ou várias propriedade(s), seguidas do caractere : (dois pontos) e 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.

Exemplo de uma sintaxe

A sintaxe é assim:

Syntaxe d

A seguinte sintaxe define, por exemplo, o estilo a aplicar às ligações hipertexto (baliza <A>), isto é, uma letra tipo verdana de 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 baliza

Chama-se seletor de baliza (ou seletor de elementos) as palavras-chave que precedem as chavetas 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">
<!--

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

<baliza> ... </baliza>

...
</BODY>
</HTML>

Seletor múltiplo

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



seletor-de-baliza1, seletor-de-baliza2  { /* 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 está pouco implementado nos navegadores

Seletor de elementos encaixados

É possível selecionar uma baliza num contexto dado, isto é, em função dos elementos que o 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 código HTML seguinte:


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

A regra seguinte seleciona 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 seletor de elementos consecutivos permite criar uma regra que se aplica unicamente quando Y segue imediatamente um elemento X. A sua sintaxe é a seguinte:


seletor_X + seletor_Y { /* style; */ }

Seja o código HTML seguinte:


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

A regra seguinte seleciona 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 seletor de elementos pai-filho permite criar uma regra que se aplica unicamente quando Y é filho direto 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:


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

Tomemos o código HTML seguinte:


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


A regra seguinte seleciona apenas o elemento <i> Atenção </i>” (o único cercado de balizas <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 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 */
balizaA {propriedades}
balizaB {propriedades}
balizaC {propriedades}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

Nota
É possível aplicar um estilo 'em linha' a todas as balizas HTML, com exceção das balizas seguintes: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE

Veja também


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)
Última modificação: 11 de maio de 2017 às 08:08 por ninha25.
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.