Construir sites na Web de hoje requer um profundo conhecimento de CSS (Cascading Style Sheets). Estas são as instruções que você fornece a um site para determinar como ele será exibido na janela do navegador. Você aplica uma série de "estilos" ao seu documento HTML, que criará a aparência da sua página da Web.
Há muitas maneiras de aplicar esses estilos em um documento, mas muitas vezes você deseja usar um estilo somente alguns dos elementos em um documento, mas nem todas as instâncias desse elemento. Você também pode criar um estilo que possa ser aplicado a vários elementos em um documento, sem precisar repetir a regra de estilo para cada instância individual. Para alcançar esses estilos desejados, você usará os atributos HTML de classe e ID. Esses atributos são atributos globais que podem ser aplicados a quase todas as tags HTML. Isso significa que, independentemente de você estar estilizando divisões, parágrafos, links, listas ou qualquer uma das outras partes do HTML em seu documento, pode recorrer a atributos de classe e ID para ajudá-lo a realizar essa tarefa!
Seletores de Classe
O seletor de classe permite que você defina vários estilos para o mesmo elemento ou tag em um documento. Por exemplo, você pode querer que determinadas seções do seu texto sejam chamadas em uma cor diferente do restante do texto no documento. Essas seções destacadas podem ser um "alerta" que você está definindo na página. Você poderia atribuir seus parágrafos com classes como esta:
p {color: # 0000ff; } p.alert {cor: # ff0000; } Esses estilos definiriam a cor de todos parágrafos para azul (# 0000ff), mas qualquer parágrafo com um atributo de classe de "alerta" seria estilizado em vermelho (# ff0000). Isso ocorre porque o atributo de classe tem uma especificidade maior do que a primeira regra de CSS, que usa apenas um seletor de tags. Ao trabalhar com CSS, uma regra mais específica substituirá uma menos específica. Portanto, neste exemplo, a regra mais geral define a cor de todos os parágrafos, mas a segunda regra, mais específica, do que substitui essa configuração apenas em alguns parágrafos. Aqui está como isso poderia ser usado em alguma marcação HTML: Este parágrafo seria exibido em azul, que é o padrão para a página.
Este parágrafo também estaria em azul.
E esse parágrafo seria exibido em vermelho, já que o atributo de classe substituiria a cor azul padrão do estilo do seletor de elemento.
Nesse exemplo, o estilo "p.alert" só se aplica aos elementos de parágrafo que usam essa classe "alert". Se você quiser usar essa classe em vários elementos HTML, basta remover o elemento HTML do início da chamada de estilo (apenas certifique-se de deixar o período ( .) no lugar), assim: .alert {background-color: # ff0000;} Esta classe está agora disponível para qualquer elemento que precise dela. Qualquer parte do seu HTML que tenha um valor de atributo de classe "alerta" agora terá esse estilo. No HTML abaixo, temos um parágrafo e um nível de título 2 que usam a classe "alerta". Ambos teriam uma cor de fundo vermelha com base no CSS que acabamos de mostrar.
Este parágrafo seria escrito em vermelho.
Nos sites de hoje, os atributos de classe são geralmente usados na maioria dos elementos porque são mais fáceis de trabalhar com uma perspectiva de especificidade que os IDs são. Você encontrará as páginas HTML mais recentes a serem preenchidas com atributos de classe, algumas das quais são repetidas várias vezes em um documento e outras que podem aparecer apenas uma vez. O seletor de ID permite que você dê um nome a um estilo específico sem associá-lo a uma tag ou outro elemento HTML. Digamos que você tenha uma divisão em sua marcação HTML que contenha informações sobre um evento. Você poderia atribuir a esta divisão um atributo de ID de "evento" e, em seguida, se quisesse delinear essa divisão com uma borda preta de 1 pixel de largura, você escreveria um código de ID como este: #event {border: 1px solid # 000; } O desafio com os seletores de ID é que eles não podem ser repetidos em um documento HTML. Eles devem ser exclusivos (você pode usar o mesmo ID em várias páginas do seu site, mas apenas uma vez em cada documento HTML individual). Então, se você tivesse 3 eventos que precisassem dessa borda, você precisaria dar a eles atributos de ID de "evento1", "evento2" e "evento3" e estilizar cada um deles. Seria, portanto, muito mais fácil usar o atributo de classe "evento" mencionado anteriormente e estilizá-los todos de uma vez. Outro desafio com atributos de ID é que eles têm uma especificidade mais alta que os atributos de classe. Isso significa que, se você precisar ter um CSS que substitua um estilo previamente estabelecido, pode ser difícil fazê-lo se você confiar demais nos IDs. É por esse motivo que muitos desenvolvedores da Web abandonaram o uso de IDs em suas marcações, mesmo que pretendam usar esse valor apenas uma vez e, em vez disso, optaram por atributos de classe menos específicos para quase todos os estilos. A única área em que os atributos de ID entram em ação é quando você deseja criar uma página que tenha links de âncora na página. Por exemplo, se você tiver um site de estilo paralaxe que contenha todo o conteúdo em uma única página com links que "saltem" para várias partes da página. Isso é feito usando atributos de ID e links de texto que usam esses links de âncora. Você simplesmente adicionaria o valor desse atributo, precedido pelo símbolo "#", ao atributo "href" do link, assim: Este é o link Quando clicado ou tocado, este link pula para a parte da página que tem esse atributo de ID.Se nenhum elemento na página estiver usando esse valor de ID, o link não fará nada. Lembre-se, se você deseja criar links na página em um site, o uso de atributos de ID será necessário, mas você ainda pode usar classes para fins gerais de CSS. É assim que marcamos as páginas hoje - usamos os seletores de classe o máximo possível e só nos voltamos para IDs quando precisamos que o atributo atue não apenas como um gancho para CSS, mas também como um link in-page.E esse h2 também seria vermelho.
Seletores de ID
Complicações de atributos de identificação
