Como usar o seletor de ID em CSS

Abril 29, 2024

Nos últimos tutoriais, discutimos dois dos três tipos de regras CSS. O primeiro tipo é o seletor HTML que é baseado e controla o estilo da tag HTML correspondente. O segundo tipo é o seletor de classe que funciona como um estilo genérico que pode ser aplicado a qualquer elemento da página da web.

Agora é hora de discutir o terceiro tipo de regra CSS, que é chamado de seletor de ID. Assim como o seletor de classe, o seletor de ID pode ser aplicado a qualquer elemento da página da web. No entanto, ele deve ser usado apenas uma vez em uma página. Isso torna o seletor de ID muito útil para HTML dinâmico e JavaScript. Teoricamente, se você usar o seletor de ID mais de uma vez em uma página, os subseqüentes deverão ser ignorados pelo navegador da web. No entanto, esse nem sempre é o caso. É muito difícil confiar na previsibilidade dos navegadores da web. Portanto, quando você optar por usar o seletor de ID, tenha cuidado para usá-lo apenas uma vez. Vamos dar uma olhada em um exemplo.

Código básico

. . .

Exemplo

. . .

Seletor de ID

Dentro das tags, você notará que o seletor de ID começa com o símbolo de hash (#) e é seguido pelo nome que você atribui ao seletor de ID. Assim como no seletor de classe, você pode usar qualquer nome que desejar, mas é melhor que o nome indique para que o seletor de ID será usado. No exemplo, estamos usando-o para identificar uma seção especial do texto.

{valor da propriedade;}

Também dentro das tags, o seletor de ID é seguido por um ou mais pares de valor de propriedade que são colocados entre colchetes. Esses pares de propriedade e valor definem as características do estilo. No exemplo, o parágrafo com o seletor de ID de texto especial terá texto em vermelho.

. . .

Ao usar o seletor de ID no corpo da página da Web, você usará o atributo id na tag HTML de abertura. O valor para o atributo id é o nome exclusivo dado ao seletor de ID, neste caso "texto_específico". (id = "value") É assim que o seletor “conecta” o estilo àquela tag HTML à qual você deseja aplicar o estilo. No exemplo acima, o seletor de ID será colocado dentro de apenas um

tag na página da web. Quaisquer outras tags HTML na página da web não devem conter o seletor de ID dentro da tag de abertura.

Instruções De Vídeo: Curso CSS ( Aula 02 ) -- Os Seletores ID e CLASS [Entendendo o ID e a CLASS] (Abril 2024).

Como usar o seletor de ID em CSS, HTML, tipos de regras CSS, como usar o seletor de ID, o seletor de CSS ID

Artigo Anterior

Próximo Artigo

Bem-vindo a 2014 - um novo começo

Abril 2024

Mudanças para o ano novo É hora de dar seu boletim de notícias ou e-zine um elevador de cara? Que tal um novo conteúdo para seu tópico ou nicho? Você está pronto para uma mudança? O Ano Novo vem...

computadores

Casamento temático náutico da caixa papelaria personalizada

Abril 2024

Como parte da Creative Crew, um dos primeiros projetos que eu projetei para a Canvas Corp Brands foi um convite de casamento com tema náutico e um cartão RSVP correspondente. A equipe de design do...