Dentro de muitas tags são atributos que descrevem as propriedades da tag. Dois atributos comuns são o identificador de tag (id) e classificação CSS (classe). No entanto, CSS3 torna possível selecionar objetos por qualquer atributo desejado. A lista a seguir fala sobre seletores de atributo que você normalmente usar ao criar estilos.

• .Nome da classe: Seleciona todos os objetos que têm um valor de atributo de classe com o nome fornecido. Por exemplo, .StdPara iria selecionar cada objeto que tem um atributo class = "StdPara" sem levar em conta o tipo de objeto.

• #Identidade: Seleciona todos os objetos que têm um valor de atributo id com o nome dado. Por exemplo, #ThirdHeader iria selecionar cada objeto que tem um id = "ThirdHeader" atributo sem levar em conta o tipo de objeto.

• : Lang (Identificador idioma): Seleciona qualquer objeto com o valor do idioma especificado. Por exemplo,: lang (en) iria selecionar qualquer objeto que usa Inglês como sua língua. Você pode encontrar uma lista de identificadores de idioma comum a w3schools.com.

• [Atributo]: Seleciona todos os objetos que usam um atributo específico, independentemente do valor do atributo. Por exemplo, [lang] iria selecionar todos os objetos que usam o atributo lang.

• [Atributo=Valor]: Seleciona todos os objetos que possuem um atributo com um valor particular. O valor deve corresponder precisamente. Por exemplo, [lang = "en-us"] deve selecionar cada objeto que tem um atributo de linguagem com um valor de Inglês.

• [Atributo~ =Valor]: Seleciona todos os objetos que possuem um atributo que contém um valor específico. O valor de pesquisa só precisa aparecer em algum lugar dentro do valor como um todo. Por exemplo, [título ~ = "secundário"] seleciona todos os objetos com atributos de título que contêm a palavra secundário como uma palavra discreta. Este seletor funciona com palavras inteiras.

  É possível restringir ainda mais muitos desses seletores de atributos combinando-as com seletores de tag. Por exemplo, p [título ~ = "secundário"] seleciona apenas o

  tag objetos com atributos de título que contêm a palavra secundário como uma palavra discreta. Muitas vezes é possível combinar seletores de forma única para criar precisamente o efeito desejado.

• [Atributo| =Valor]: Seleciona todos os objetos que possuem um atributo que começa com um valor particular. O valor de busca deve aparecer no início do valor como um todo, mas não precisa de ser todo o valor. Por exemplo, [title | = "Sub"] seleciona todos os objetos com atributos de título que começam com a palavra Sub. Este seletor trabalha com termos com hífen.

• [Atributo= ^Valor]: Seleciona todos os objetos que possuem um atributo que começa com um valor particular. Por exemplo, [title | = "Sub"] seleciona todos os objetos com atributos de título que começam com a palavra Sub. Esta forma de o seletor difere do [Atributo | = Valor] atributo em que é menos restritiva. Usando este formulário irá selecionar title = "subheader", title = "Sub Cabeçalho", ou title = "Sub-cabeçalho" com igual confiabilidade.

• [Atributo$ =Valor]: Seleciona todos os objetos que possuem um atributo que termina com um valor particular. Por exemplo, [title $ = "secundário"] seleciona todos os objetos com atributos de título que terminam com a palavra Secundário. Esta forma de o atributo é nonrestrictive - não requer nenhuma formatação especial.

• [Atributo* =Valor]: Seleciona todos os objetos que possuem um atributo que contém um valor específico. Por exemplo, [title $ = "secundário"] seleciona todos os objetos com atributos de título que contêm a palavra Secundário. Esta forma de o seletor é menos restritiva do que a [Atributo ~ = Valor] atributo. Usando este formulário irá selecionar title = "SecondaryParagraph", title = "Parágrafo secundário", ou title = "Secundário-Parágrafo" com igual confiabilidade.

Agora que você tem alguma idéia de como seletores de atributos trabalhar, é hora de vê-los em ação. O procedimento a seguir ajuda a entender o que seletores de atributo faz e como você pode usá-los a escolher objetos específicos dentro de um documento para formatação.

1. Criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.

2. Abrir ExternalCSS.HTML.

3. Digite o seguinte código após o existente

   marca no arquivo e salvar as alterações no disco.

   outro ponto
   mais texto
   Outro ponto Ainda
   Ainda mais Texto
   Ainda mais Texto

   Este código simplesmente adiciona marcas em modalidades específicas para que você possa testar os vários seletores. Se você abrir o arquivo resultante agora, verá que cada um dos

   e

   Tag foi automaticamente formatado como o original

   e

   Tag-o resultado é semelhante a este:

   

4. Abrir ExternalCSS.CSS.

5. Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   .Subhead {border: double-border-width: thick-border-color: Green-}

6. Atualizar a página de teste.

   Você vê o efeito de fazer a mudança de estilo. Cada objeto que tem um valor de classe de subtítulo agora tem uma borda dupla grossa de cor verde.

   

   Há muitas maneiras de definir as cores que deseja usar. Muitos desenvolvedores usam o formato hexadecimal mostrado até agora porque é preciso e flexível. No entanto, # 008000 é um pouco difícil de ler. Usando o nome de cor, verde, é muito mais fácil. Claro, isso significa que você precisa saber o nome da cor. Felizmente, você pode encontrar uma lista de nomes que os navegadores entender no w3schools.com.

7. Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   #ThirdHeader {Text-decoration: line-Ao longo de toda}

8. Atualizar a página de teste.

   Você vê o efeito de fazer a mudança de estilo. Cada objeto que tem um valor de ID de ThirdHeader agora tem um valor text-decoration da linha-through, em vez de sublinhado. Observe que o novo valor substitui o valor antigo. Se você quiser preservar o valor original, você deve especificá-lo novamente.

   

9. Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   [Title | = "Sub"] {text-align: right; background-color: rgb (128, 255, 128) -}

10. Atualizar a página de teste.

    Você vê o efeito de fazer a mudança de estilo. Cada objeto que tem a palavra Sub algum lugar no seu atributo título é alterado. Observe que esta alteração em particular afeta tanto

    e

    etiquetas. Este exemplo também mostra uma outra maneira de definir selecções de cor. Cada cor: vermelho, verde, azul (RGB) é representada por um valor entre 0 e 255.

    Você pode ler mais sobre a abordagem rgb () para criar cores em w3schools.com.