Esta página explica como você pode aplicar estilos seletivamente, e como diferentes tipos de seletor têm propriedades diferentes.
Você adiciona alguns atributos às tags do seu documento de amostra, e usa estes atributos em sua folha de estilo de amostra.
Informação: Seletores
CSS tem sua própria terminologia para descrever a linguagem CSS. Anteriormente neste tutorial, você criou uma linha em sua folha de estilo com esta:
strong {color: red;}
Na terminologia das CSS, esta linha inteira é uma regra. Esta regra começa com STRONG, que é um seletor. Isto seleciona que elementos no DOM a regra se aplicará.
| A parte interior das chaves é a declaração.
A palavra-chave O ponto-e-vírgula depois do par propriedade-valor separa isto de outros pares propriedade-valor na mesma descrição. Este tutorial refere-se a um seletor |
Esta página do tutorial explica mais sobre os seletores que você pode usar nas regras das CSS.
Em adição aos nomes de tags, você pode usar valores de atributo nos seletores. Isto permite a você que as regras tornem-se mais específicas.
Dois atributos tem estado especial para as CSS. Eles são class e id.
Use o atributo class em uma tag para nomear a tag com um nome de classe. Isto é, o nome que você escolher para a classe.
Na sua folha de estilo, digite um registro completo (período) antes do nome de classe quando você usá-lo em um seletor.
Use o atributo id em uma tag para nomear a tag com um nome de id. Isto é, o nome que você escolher para o id. O nome do id deve ser único no documento.
Na sua folha de estilo, digite um sinal de número (#) antes do id quando você usá-lo em um seletor.
Este tag HTML tem ambos os atributos class e id.
<P class="key" id="principal"> O id, Em uma folha de estilo CSS, esta regra faz todos os elementos da classe
.key {color: green;}
Esta regra faz um elemento com o id
#principal {font-weight: bolder;}
|
Se mais de uma regra se aplicar a um elemento e especificar a mesma propriedade, então CSS dará prioridade para a regra que tiver o seletor mais específico. Um seletor id é mais específíco que um seletor classe, que por sua vez é mais específico que um seletor tag.
| Você pode combinar seletores para fazer um seletor mais específico.
Por exemplo, o seletor Você não está restrito aos dois atributos especiais, Uma página posterior deste tutorial (Tabelas) tem informações sobre seletores complexos baseados em parentescos. Para um informação completa sobre seletores, veja Selectors na CSS Specification. |
Se sua folha de estilo tiver regras conflitantes e elas estiverem igualmente especificadas, então CSS dará prioridade para a regra que foi especificada por último na folha de estilo.
Quando você tiver um problema com regras conflitantes, tente resolvê-lo fazendo uma das regras mais especificada, então ela terá prioridade. Se você não puder fazer isto, tente mover uma das regras para mais perto do fim da folha de estilo, então esta terá prioridade.
Ação: Usando seletores de classe e id
Edite seu arquivo HTML, e duplique o paragrafo copiando e colando-o. Então adicione os atributos de id e classe na primeira cópia, e um id na segunda cópia como mostrado abaixo. Um alternativa é copiar e colar o arquivo inteiro novamente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Documento de amostra</TITLE>
<LINK rel="stylesheet" type="text/css" href="style1.css">
</HEAD>
<BODY>
<P id="first">
<STRONG class="carrot">C</STRONG>ascading
<STRONG class="spinach">S</STRONG>tyle
<STRONG class="spinach">S</STRONG>heets
</P>
<P id="second">
<STRONG>C</STRONG>ascading
<STRONG>S</STRONG>tyle
<STRONG>S</STRONG>heets
</P>
</BODY>
</HTML>
Agora edite seu arquivo CSS. Substitua os componentes inteiros com:
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
Atualize seu navegador para ver o resultado:
| Cascading Style Sheets |
| Cascading Style Sheets |
Você pode tentar re-dispor as linhas no seu arquivo CSS para mostrar que a ordem não muda o efeito.
Os seletores de classe .carrot e .spinach tem prioridade sobre o seletor de tag STRONG.
O seletor id #first tem prioridade sobre a classe o os seletores de tag.
Sem mudar seu arquivo HTML, adicione uma única regra para seu arquivo CSS deixando todas as letras iniciais da mesma cor que estão agora, mas fazendo todo o segundo parágrafo aparecer em azul:
Agora mude a regra que você acabou de adicionar (sem mudar mais nenhuma coisa), para fazer o primeiro parágrafo em azul também:
|
O que vem depois?
Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.
Sua folha de estilo de amostra está começando a parecer densa e complicada. A próxima página descreve caminhos para fazer o CSS mais fácil de ler: CSS legível