Seletores CSS

Sintaxe

Todos os estilos CSS são compostas de 3 partes: um seletor, uma propriedade e um valor. Para manter em conformidade com a regras de formatação XHTML CSS todo o código deve ser escrito em letras minúsculas.

Sintaxe CSS

• Selector: Define as tags HTML que vai receber as regras de CSS. Para alterar o estilo de todos os seus parágrafos, você pode escrever p {property:value} .
• Imóvel: Este é o estilo CSS que você deseja aplicar. Para alterar a cor do texto de todos os pontos que você pode escrever p {color:value} .
• Valor: O valor do imóvel. Para fazer com que todo o texto no vermelho, você pode escrever p {color:red} .

Declarações CSS pode ter mais de uma propriedade: valor par, separando-os com uma vírgula ; .

Várias propriedade: valor pares

Propriedades quero você para fornecer pelo menos um valor, mas às vezes pode aceitar mais. Múltiplos valores podem ser separadas por espaços, o que significa que todos os valores são utilizados para a propriedade. Ou podem ser separados por vírgula o que significa que uma série de valores que está sendo sugerido eo primeiro aplicável é usada.

Espaço de valores separados

Acima de declaração CSS usa todos os 3 valores para processar 5 parágrafos com uma borda larga pixel vermelho.

Valores separados por vírgulas

Acima de declaração CSS sugere 3 fontes a ser utilizada para parágrafos, da esquerda para a direita. No caso de não Verdana está disponível no sistema do usuário que irá tentar usar Arial e se isso falhar, também, que vai recorrer a uma genérica sans-serif.

Seletores Múltiplos

Em vez de escrever a regra CSS mesmo para cada marca HTML deseje, poderá aplicá-lo, você pode agrupar e selectores separados por vírgulas. Isso faz com CSS código extremamente compacto e eficiente.

Mesmo estilo para cada seletor (mau)

Seletores agrupados (bom)

Seletores contextuais

Se você acabou de aplicar estilos a um seletor de ponto, todos os parágrafos serão afetados. E se você deseja apenas mudar os números dentro de itens da lista? Nesse caso, você precisa de seletores contextuais que só se aplica uma regra de CSS se uma marca ocorre em um determinado contexto. Um seletor contextual é criada pelo anúncio das tags aninhadas na ordem em que devem aparecer no seu documento.

Seletores contextuais

No exemplo acima, elementos parágrafo único <p> dentro de itens da lista <li> Obter texto vermelho e só texto enfatizado <em> em <h1> rubricas recebe um fundo cinza.

Comentários

Às vezes pode ser útil para colocar comentários CSS ao lado de algumas declarações para explicar o que está fazendo. Esses comentários são ignorados pelos navegadores web, mas ainda acrescentar-se ao tamanho do arquivo final (ao contrário de linguagens de programação como PHP, onde os comentários não são parte do resultado final).

CSS comentário

Compatibilidade com navegadores

Todos os atuais principais navegadores suportam ambos os tipos de seletores que você possa usá-los com segurança. Há alguns seletores mais avançados do CSS que não são suportados por navegadores como o Internet Explorer (ver um padrão aqui?). Eles serão abordados no CSS avançado tutorial.