Classe vs ID | Explicado

Os elementos são adicionados ao arquivo html para criar uma página da web. No entanto, para manipulação ou estilo dos elementos necessários, é essencial acessá -los primeiro. Para o objetivo correspondente, um ID ou classe pode ser adicionado ao definir o HTML. Este ID ou classe pode ser mais tarde usado para as operações mencionadas.

Os resultados de aprendizado deste post são:

• O que é atributo de classe?
• Como adicionar atributos de classe aos elementos HTML?
• Como estilo de atributo de classe com CSS?
• Como usar o atributo de classe com vários nomes?
• Qual é o atributo de identificação?
• Como atributo de identificação de estilo?
• Diferença entre atributos de classe e identificação

O que é atributo de classe?

Em HTML, o “aula”O atributo é especificado com os elementos. O atributo de classe pode identificar um ou mais nomes de classe para um elemento HTML. Além disso, o mesmo nome de classe pode ser atribuído a diferentes elementos HTML. Como resultado, esses nomes de classe são acessados ​​pelo código CSS e JavaScript para aplicar diferentes funções.

Como adicionar atributo de classe aos elementos HTML?

Primeiro, adicione/crie um elemento div com o nome da classe “principal”No arquivo html. Adicionar

e

tags para incluir algum conteúdo dentro deste elemento. Além disso, ambas as tags têm o mesmo atributo de classe “texto”:

Bem -vindo ao Linuxhint!

Melhor site do tutorial

O código mencionado acima fará duas divisões na página da web. Para distingui -los, vamos aplicar algumas propriedades do CSS.

Como estilo de atributo de classe com CSS?

A seção abaixo demonstra as propriedades de estilo aplicadas às classes acima.

Especifique seletor de classe

O ".”Símbolo no CSS antes de cada nome de classe ser conhecido como“seletor de classe”. O nome da classe seguido por este símbolo é usado para acessar a classe.

Estilo div

.principal
Largura: 500px;
Altura: 300px;
fronteira: 7px Solid #379237;
margem: 15px automático;
Background-Color: #A0E66B;

O elemento div com o nome da classe “principal”É estilizado com propriedades descritas abaixo:

• ““largura”Propriedade define a largura do elemento.
• ““altura”Propriedade define a altura do elemento.
• ““fronteira”Propriedade é usada para definir a borda com o valor que especifica a largura da borda, o tipo de borda e a cor.
• ““margem”Propriedade define/ajusta os espaços ao redor da div.
• ““cor de fundo”A propriedade é utilizada para definir a cor de fundo do elemento.

Pode -se ver que a div com o nome da classe “principal”Está com sucesso estilizado. O "aula”O texto ainda não está estilizado:

Classe de texto de estilo

.texto
Alinhamento de texto: centro;
Size da fonte: 40px;
cor roxa;

O texto da classe do

e

As tags são estilizadas fornecendo o código acima. A descrição do código acima está listada abaixo:

• ““alinhamento de texto”Propriedade define o alinhamento do texto do elemento.
• ““tamanho da fonte”Propriedade define o tamanho da fonte do elemento.
• ““cor”A propriedade é utilizada para aplicar a cor ao texto do elemento.

Agora, elementos relacionados às duas classes foram estilizados com sucesso:

Como usar o atributo de classe com vários nomes?

Suponha que queremos adicionar dois parágrafos. Um com a cor laranja e o outro com preto simples. Ambos devem ter as mesmas propriedades de estilo, exceto a cor.

Para fazer isso, no arquivo html, primeiro, crie um elemento div com o nome da classe “principal”. Então, dentro desta div, adicione dois

Tags com atributos de classe. O primeiro

A tag está associada a ambas as classes. O outro

A tag é atribuída com a classe “texto" apenas:

"O sucesso é melhor quando é compartilhado"

Citações de sucesso

Texto da classe de estilo

.texto
Alinhamento de texto: centro;
Size da fonte: 40px;
intensidade da fonte: Negrito;
Top-top: 20px;

O "texto”A classe é estilizada com as propriedades descritas abaixo:

• ““alinhamento de texto”Propriedade com o valor“Centro”Define o alinhamento do texto no centro.
• ““tamanho da fonte”A propriedade é utilizada para especificar o tamanho da fonte do elemento.
• ““espessura da fonte"Com o valor"audacioso”Vai tornar o texto ousado.
• ““Top-top”A propriedade é utilizada para especificar o espaço no topo do conteúdo do elemento.

Classe de estilo para

.para
Cor: #dc5f00;

O nome da segunda classe para é dado apenas uma cor de propriedade de estilo com valor #dc5f00.

Vamos ver qual é o resultado do código HTML acima:

Pode -se observar que as propriedades especificadas na classe de texto são aplicadas a ambos os elementos. Mas, como também atribuímos a classe para o primeiro elemento P, a propriedade de cor da primeira vez mudou.

O que é atributo de identificação?

O "eu ia”O atributo deve ser exclusivo para cada elemento em um elemento HTML inteiro. Este atributo é utilizado pelo CSS e JavaScript para executar diferentes ações. Não podemos usar vários nomes de identificação para um elemento.

Html

No arquivo html, adicione dois

Tags com algum texto. O primeiro

A tag é nomeada id como "pára”:

Bem -vindo ao Linuxhint!

Melhor site do tutorial

Como atributo de identificação de estilo?

A seção abaixo demonstra as propriedades de estilo aplicadas ao atributo de identificação acima.

seletor de identificação

Em HTML, o “#”O sinal também é conhecido como“seletor de identificação”. O nome do ID seguido por este símbolo é usado para acessar o elemento com este ID.

Estilo para id

#para
Alinhamento de texto: centro;
Size da fonte: 40px;
cor roxa;

O elemento com o nome “pára”Está estilizado com as propriedades descritas abaixo:

• ““alinhamento de texto”Propriedade torna o centro de texto alinhado.
• ““tamanho da fonte”A propriedade ajusta o tamanho do texto.
• ““cor”Propriedade transforma a cor do texto roxo.

Saída

Classe vs ID

Aqui está a lista das principais diferenças entre os atributos de classe e identificação:

atributo de identificação	atributo de classe
O atributo de identificação deve ser único para cada elemento em html.	Uma classe pode ser aplicada a mais de um elemento HTML.
Um atributo de identificação pode ser anexado a um elemento.	Podemos vincular vários seletores de classe a um elemento.
No CSS, para aplicar estilos ao ID, o “#”Símbolo seguido pelo nome de identificação é usado.	No CSS, para estilizar uma aula que usamos “.”Seguido pelo nome da classe para acessar a classe específica.
Sintaxe: #eu ia // declarações CSS	Sintaxe: .aula // declarações CSS

Comparamos as diferenças entre os atributos de classe e id.

Conclusão

No HTML, o atributo de classe pode conter vários nomes de classe. O atributo de identificação não pode conter vários nomes. Deve ser único em um documento HTML inteiro. No entanto, ambos os atributos são utilizados para acessar os elementos HTML relevantes (s). Este blog explicou a diferença entre o ID e os atributos de classe com exemplos.