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:
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 */ }
 |
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>
 |
Você pode aplicar um estilo online a todas as tags HTML, com exceção destas: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE |
- Em que consiste uma declaração na sintaxe do css
- Questão: em que consiste uma declaração na sintaxe do css? - Melhores respostas
- A sintaxe do nome do arquivo do nome do diretório ou do rótulo do volume está incorreta - Melhores respostas
- Declaração css - Dicas - CSS
- Como posicionar uma imagem em css - Dicas - CSS
- Remover sublinhado link css - Dicas -HTML
- Mudar cursor do mouse css - Dicas -CSS
- A sintaxe do nome do arquivo do nome do diretório ou do rótulo do volume está incorreta - Fórum Windows
Assine nossa newsletter!
