Os seletores determinam a forma como os estilos CSS são atribuídos aos elementos HTML. Ao fazer uma definição correspondente, primeiro especifica-se o nome do elemento ao qual o seletor deve aceder. A declaração real é feita dentro de chaves. Dentro de uma declaração, uma ou mais propriedades podem ser especificadas. Portanto, a sintaxe geral é a seguinte:
Seletor {
Propriedade1: Valor;
Propriedade2: Valor;
Propriedade3: Valor;
}Já se depararam com uma definição semelhante no tutorial anterior.
h1 {
font-family:"Courier New", Courier, monoespaço;
font-size: 200%;
}
É importante terminar cada declaração com um ponto e vírgula.
Uma visão geral dos seletores disponíveis
Na verdade, o CSS oferece uma grande variedade de seletores, dos quais apresentarei os mais importantes. Pois uma coisa é clara: apenas se dominarmos o trabalho com os seletores, podemos definir propriedades CSS de forma sensata.
A maneira mais simples de atribuir estilos dentro de um documento HTML é através do seletor de elemento.
A seguinte sintaxe atribui a cor preta a todos os elementos p.
p {
color: #009966;
}
Se quiserem atribuir o mesmo estilo a vários elementos, também é possível.
Neste caso, basta listar os elementos relevantes um após o outro, separados por vírgulas.
p, h1, li {
color: #000;
}
Também é possível atribuir vários estilos a elementos. Os estilos são separados por ponto e vírgula.
p {
color: #000;
background-color: red;
}
Também é possível combinar as variantes mencionadas.
p, h1, li {
color: #009966;
background-color: red;
}
O resultado pode ser o seguinte:
Áreas com múltiplos elementos
Muitas vezes surge a necessidade de formatar uma área composta por vários elementos HTML. Para esses casos, no HTML existem dois elementos especiais, o span e o div. Estes elementos serão encontrados - aliás, também nesta série - várias vezes.
Um exemplo:
<div class="artigo"> <h1>Explosão de Cores</h1> <p class="tema">Um tutorial para criar uma explosão de cores por <span class="autor">MarkusMelzer</span>.</p> </div>
A única diferença entre div e span é que o elemento div força uma nova linha no fluxo de texto. span, por outro lado, não cria uma nova linha. No exemplo mostrado, é definida uma área div contendo um título e um parágrafo. Dentro do parágrafo, há uma área span.
Seletores de ID e classe
Até agora foram usados seletores de elementos. Com o exemplo a seguir, todas as manchetes h1 são formatadas pelo seletor de elemento.
h1 {
color: #000;
background-color: red;
}
No entanto, esta abordagem nem sempre é desejada. O que acontece se quiserem atribuir determinadas propriedades a uma ou algumas, mas não a todas as manchetes h1? Para esses casos, o CSS oferece duas opções, ou seja, os seletores de classe e de ID.
Com os seletores de classe, elementos HTML com atributos de classe podem ser selecionados de forma precisa. O elemento HTML em questão deve ter o atributo class especificado. As definições de classe começam com um ponto.
Um exemplo:
.vermelho {
color: red;
}
Neste exemplo, a classe vermelho foi definida. Para adicionar as propriedades atribuídas a vermelho a um elemento HTML, insere-se class seguido do nome da classe.
<p class="vermelho">PSD-Tutorials.de</p>
O seletor de ID pode ser utilizado de forma semelhante. O seletor de ID é reconhecido por um símbolo de almofada.
#topnavi {
color: azul;
};Neste exemplo, é definido o ID topnavi. Mas atenção: um ID só pode ser atribuído uma vez dentro de um documento. O acesso a uma propriedade ID definida seria a seguinte:
<div id="topnavi">Aqui está a navegação</div>
O atributo id atribui o nome do ID. Certifique-se de que aqui o jogo da velha não seja notado.
As informações mostradas também podem ser combinadas entre si. Assim, é possível atribuir várias classes a um elemento HTML, por exemplo.
<p class="rot gross">PSD-Tutorials.de</p>
Neste exemplo, as duas classes rot e gross são atribuídas ao parágrafo de texto. Caso queiram indicar uma classe e um ID, será da seguinte forma:
<p class="rot" id="navi">PSD-Tutorials.de</p>
Também é possível combinar elementos e IDs. Aqui está um exemplo:
div.navi {
color: blue;
}
Essa sintaxe se aplicaria exclusivamente aos elementos div com a classe navi. Parágrafos que também possuem a classe navi não seriam afetados por isso.
No CSS, há outro tipo de combinação de seletores. Para isso, dê uma olhada na seguinte sintaxe:
h1 {
color: red;
}
em {
color: blue;
}
Aqui, todos os títulos de primeira ordem são atribuídos a cor vermelha. Elementos em por sua vez, recebem a cor azul.
A combinação das duas instruções permite que somente os elementos em sejam coloridos de azul se estiverem dentro dos elementos h1.
h1 em {
color: blue;
};
Os nomes dos elementos são anotados separadamente sem vírgulas.
Isso é, aliás, uma armadilha comum em que até mesmo iniciantes em CSS caem. Aqui está a mesma sintaxe, mas com uma vírgula:
h1, em {
color: blue;
}
O que significa esta sintaxe? Todos os elementos h1 e todos os elementos em são selecionados. Portanto, isto é completamente diferente da sintaxe sem vírgula!
Outro seletor importante é o seletor universal. Isso permite a seleção de qualquer elemento. Este seletor é definido por um asterisco.
* {
color: red;
}
Com esta sintaxe, todos os elementos seriam coloridos de vermelho. Novamente, existem algumas particularidades a serem consideradas com este seletor.
#mainnavi * {
color: red;
}
Neste exemplo, a cor da frente de todos os elementos dentro do elemento com o ID mainnavi é definida como vermelha. No entanto, isso não se aplica ao elemento em si.
Se o seletor universal estivesse no início de uma declaração, não seria necessário anotá-lo. Seria redundante fazer algo similar a isto:
* p {
color: red;
}
Esta sintaxe é equivalente a:
p {
color: red;
}
No próximo tutorial, você aprenderá mais sobre seletores.
