Como sabemos a definição de regras de CSS implicam a existência de selectores que identificam os elementos HTML. Dos tipos de selectores mais usados (não é uma lista completa) podemos referir os seguintes:
Estes tipos de selectores podem ser divididos em dois géneros: tipo e autor. O primeiro diz respeito aos selectores que identificam os elementos de HTML, o segundo pode ser criado pelo autor da CSS.
Element selectors: <p> <h1> <em> <span>, etc. referenciam as tags HTML que formatam. Por exemplo: o element selector corresponde à tag <h1>
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #333333;
}
ID selectors: definem-se com o sinal cardinal (#) e deve ser usado uma única vez em cada documento HTML. Pode haver, no entanto, haver mais do que um selector com o mesmo ID, mas não está conforme as especificações da W3C. O documento pode ser correctamente rendido pelo browser, mas não será validado. Quando queremos usar vários selectores com o mesmo nome devemos usar classes em vez de ID.
Os ID são muito usados para definir os elementos estruturais do documento HTML, como é o caso das DIVs.
#caixa {
background-color: #FF9900;
margin: 0px;
padding: 5px;
float: left;
height: 300px;
width: 300px;
}
Class selectores: Com os selectores de classe podemos definir diferentes estilos para o mesmo tipo de elemento num documento HTML.
Por exemplo, podemos ter dois tipos de parágrafos no documento:
p .right {text-align: right}
p .left {text-align: left}
Os atributos de classe podem ser usados localmente (inline) no documento HTML.
Os selectores de classe devem começar com um ponto e podem ter o nome que quisermos. Podemos usar várias vezes a mesma classe no mesmo documento.
.imagem {
height: 300px;
width: 300px;
border: thin solid #333333;
margin: 20px;
}
Também, podemos atribuir classe a elementos HTML com atributos particulares, como por exemplo:
Input [type="text"]{background-color: FF0000}
Group selectors
É possível agrupar selectores e com isso reduzir o código. Os selectores agrupados devem estar separados com vírgulas.
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
Descendent selectors
Podemos usar selectores descendentes. É útil quando queremos formatar um determinado elemento dentro de um contexto específico, ou só dentro de uma dada DIV. Deve existir um espaço entre os descent selectors.
Por exemplo:
#lateral h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.97em;
line-height: 1;
font-weight: 900;
color: #FF6600;
}
Neste caso estaríamos a formatar os h1 existentes só na div lateral . Se quisermos formatar o elemento h1 para todo o documento:
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.97em;
line-height: 1;
font-weight: 900;
color: #FF6600;
}
Pseudo-class selectors
Permitem definir o aspecto das hiper-ligações, sendo, portanto,os selectores relevantes para o aspecto gráfico e manipulação da interface. Diz-se que é uma pseudo-class, dado que o seu estado é variável por depender da interacção do utilizador.
De notar que devem seguir esta ordem:
a: link, a: visited, a:hover, a:active
Geralmente, para uma interacção eficaz os selectores a e :visited, têm a mesma definição e o :active é de pouca utilização. Portanto, são relevantes as definições dos selectores a e :hover.
a, :visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
text-decoration: none;
}
a:hover {
color: #FFF;
background-color: #666;
}
Exemplos: