Dentro de muitas marcas são atributos que descrevem propriedades de 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 dado. Por exemplo, .StdPara deve 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 deve 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 no 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.

  Video: CSS3 - Aula 02 - Seletores CSS

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

• [Atributo~ =Valor]: Seleciona todos os objetos que têm um atributo que contém um valor particular. O valor de pesquisa só precisa aparecer em algum lugar dentro do valor como um todo. Por exemplo, [título ~ =”secundário”] selecciona todos os objectos com atributos de título que contêm a palavra secundário como uma palavra discreta. Este seletor trabalha 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”] selecciona 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 têm um atributo que começa com um valor particular. O valor de pesquisa precisa aparecer no início do valor como um todo, mas não precisa ser todo o valor. Por exemplo, [título | =”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 têm um atributo que começa com um valor particular. Por exemplo, [título | =”Sub”] seleciona todos os objetos com atributos de título que começam com a palavra Sub. Esta forma do seletor difere do [Atributo | = Valor] atribuem em que é menos restritiva. Usando este formulário irá selecionar title =”subheader”, title =”Sub Header”, ou title =”subheader” com igual confiabilidade.

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

• [Atributo* =Valor]: Seleciona todos os objetos que têm um atributo que contém um valor particular. Por exemplo, [título $ =”secundário”] seleciona todos os objetos com atributos de título que contenham a palavra Secundário. Esta forma do seletor é menos restritiva do que a [Atributo ~ = Valor] atributo. Usando este formulário irá selecionar title =”SecondaryParagraph”, title =”Parágrafo secundário”, ou title =”SecondaryParagraph” 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 já existente

   Video: Curso de CSS3 - Aula 03 - Seletor universal, Seletor tipo, Seletor atributo

   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 arranjos específicos para que você possa testar os vários seletores. Se você abrir o arquivo resultante agora, você vê 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.

   .Subtítulo {fronteira: dupla fronteira de largura: de espessura-fronteira-cor: Green-}

6. Atualizar a página de teste.

   Você vê o efeito de fazer a mudança de estilo. Cada objecto que tem um valor de classe SUBHEAD agora tem uma borda dupla espessa 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 da 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: linha-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.

   

   Video: Curso de CSS3

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

   Video: Seletores de atributos no CSS [input parte 03]. HTML5 CSS3 aula 36

   [Título | ="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

    Tag. 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.