Vamos agora entrar em mais detalhes no local, na tag ou propriedade, em que queremos estilizar, através de um estudo mais aprofundado sobre o seletor em CSS.
O que é um seletor em CSS
No tutorial em que ensinamos como usar CSS em uma página, mostramos que a estrutura básica, ou seja, a sintaxe da aplicação de estilo é:
seletor { propriedade: valor;}
Iremos criar dezenas de tutoriais sobre as propriedades existentes, os valores, maneiras de estilizar fontes, links, imagens e tudo mais.
Porém, neste tutorial iremos focar bem nesse 'seletor', que nada mais é que a definição do local onde aquele estilo CSS vai ser usado. Nos exemplos que demos, usamos o seletor como sendo uma tag.
Ou seja, estávamos aplicando o estilo em todas aquelas tags.
A ideia de seletor é aparentemente simples, e pode até surpreender o fato de estarmos dedicando um tutorial de CSS somente para explicar isso (praticamente todos os outros de nosso curso serão destinados as regras do CSS).
Por que estudar selectors em CSS ?
Temos que pensar grande.
Estamos no início de nosso curso de CSS, por isso nossos códigos são simples, pequenos e fáceis de entender, mas quando você se tornar um webmaster e for trabalhar para grandes sites e agências (ou criar os seus), verá como facilmente as coisas começam a ficar complexas.
Você pode, por exemplo, definir a cor, fonte e tamanho da letra em um titulo que aparecerá na Home de seu site. Mas quando o leitor clicar no título e for para a página do artigo, provavelmente você vai querer que este mesmo título apareça de maneira diferente, com outra cor e tamanho.
Portais de notícias, como a Globo.com, utilizam até mesmo texto diferente.
Ou seja, um resumo na Home e um título maior, e melhor explicado, dentro do artigo.
Assim, temos que selecionar esse título duas vezes e aplicar dois estilos diferentes para cada caso.
E em sites com várias seções? Em sites com diversos autores, colunas e blogs?
O trabalho de selecionar uma tag, em um tipo específico de página/contexto, começa a ficar mais complexo, daí a importância de dedicar algumas lições para o estudo de seletores.
Seletor para um só elemento
Este é o exemplo mais simples de como usar o seletor, pois ele vai focar em apenas um tipo de tag.
Foram os exemplos que demos em tutoriais passados de nossa apostila de CSS.
Por exemplo, para fazer com que as tags de cabeçalho H1 sejam sempre vermelhas, fazemos:
h1 { color: Red; }
Para fazer com que as tags de cabeçalho H2 sejam azuis e de tamanho 12:
h2 { color: blue; font-size: 12pt;}
Seletor para vários elementos
Podemos selecionar várias tags de HTML ao mesmo tempo, e aplicar o mesmo estilo CSS para elas.
Para fazer isso, basta separar as tags no seletor com vírgulas.
Por exemplo, para fazer com que as tags H2 , H3 e H4 tenham cor amarela, fazemos:
h2, h3, h4 { color: yellow;}
Podemos fazer isso para tags de diferentes escopos.
Para colocar tamanho de fonte 14 em tags de parágrafo e de título, fazemos:
p, title { font-size: 14pt;}
Outro uso bem comum do CSS é mesclar os dois tipos de seletores (para uma tag só, em seguida para várias, incluindo a tag única, citada anteriormente).
Por exemplo, se quisermos que a tag H1 seja azul, e a tag H2 seja vermelha, e ambas de tamanho 18pt, fazemos a seguinta folha de estilos CSS:
h1 { color: blue;} h2 { color: red;} h1, h2 { font-size: 18pt;}
Seletor de atributo
Durante todo nosso curso de HTML, vimos que alguns atributos são usados em várias tags.
O atributo color, por exemplo, pode ser usado em fontes, tabelas, parágrafos etc.
Para selecionar os elementos que tenham o atributo width em imagens, fazemos:
img[width]{ regras de CSS;}
Podemos selecionar somente as imagens que tenham um determinado valor do atributo:
imt[heigh="100px"] { regras de CSS para esse elemento;}
Suponha que você tenha um mega portal, com milhões de páginas e fez parceria com uma empresa, e vai querer dar destaque aos links que você já postou para o site desta empresa.
Em vez de sair procurando por cada link nas suas milhares de páginas, faça com que o CSS dê um estilo especial aos links que contém o atributo href que apontam para o site do cliente:
a[href="www.htmlprogressivo.net"] { Cor chamativa ; Tamanho maior; etc;}
Seletor universal em CSS: *
Quem já teve algum contato com programação ou com informática mais avançada sabe que o asterisco é um caractere 'coringa', pois ele representa qualquer texto, qualquer caractere até mesmo nada.
Por exemplo, se for na busca do Windows e digitar *.txt, o sistema operacional vai listar todos os arquivos que terminem com a extensão .txt, pois o * vai apresentar tudo, qualquer coisa.
É o mesmo em CSS.
Se usarmos * como seletor, ele vai selecionar absolutamente todos os elementos de seu documento.
Por exemplo, a seguinte regra deixa tudo com cor de fundo preta:
* { background-color: #000;}
Tudo mesmo.
Porém, o uso do seletor universal de maneira isolada não é muito comum em CSS.
Quando estudarmos os seletores de classe e ID, veremos usos mais apropriados para o *
Um comentário:
Eu adoro usar o seletor universal pra setar os atributos padding e margin = 0, praticamente uso sempre.
Postar um comentário