Construir sites bem estilizados na web de hoje requer um conhecimento profundo de Cascading Style Sheets. Aplique uma série de estilos CSS ao seu documento HTML para informar a aparência de sua página da web.
Atributos de classe e ID
Os designers às vezes devem aplicar um estilo apenas em algum dos elementos em um documento, mas nem todas as instâncias desse elemento. Para obter esses estilos desejados, use o aula e EU IA Atributos HTML. Esses atributos são atributos globais aplicáveis a quase todos Tag HTML- então, quer você estilize divisões, parágrafos, links, listas ou qualquer outra parte do HTML em seu documento, você pode recorrer aos atributos de classe e ID para ajudá-lo a realizar essa tarefa!
Seletores de classe
O seletor de classe define vários estilos para o mesmo elemento ou tag em um documento. Por exemplo, para chamar a atenção de certas seções de seu texto em uma cor diferente como um alerta, atribua seus parágrafos com classes como esta:
p {cor: # 0000ff; }
p.alert {color: # ff0000; }
Esses estilos definiriam a cor detudo parágrafos para azul (# 0000ff), mas qualquer parágrafo com um atributo de classe de alerta em vez disso, seria estilizado em vermelho (# ff0000). Isso ocorre porque o atributo class tem uma especificidade mais alta do que a primeira regra CSS, que usa apenas um seletor de tag. 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, substitui essa configuração apenas em alguns parágrafos.
Veja como isso pode ser usado em algumas marcações HTML:
Este parágrafo seria exibido em azul, que é o padrão para a página.
Este parágrafo também seria em azul.
E este parágrafo seria exibido em vermelho, já que o atributo de classe sobrescreveria a cor azul padrão do estilo do seletor de elemento.
Nesse exemplo, o estilo de p.alert só se aplicaria a elementos de parágrafo que usam esse alerta aula. Para usar essa classe em vários elementos HTML, remova o elemento HTML do início da chamada de estilo, assim:
.alert {background-color: # ff0000;}
Esta classe agora está disponível para qualquer elemento que precise dela. Qualquer parte do seu HTML que tenha um valor de atributo de classe de alerta agora obterá este estilo. No HTML abaixo, temos um parágrafo e um título de nível dois que usam o alerta aula. Ambos exibem uma cor de fundo vermelha:
Este parágrafo seria escrito em vermelho.
Nos sites de hoje, os atributos de classe são frequentemente usados na maioria dos elementos porque são mais fáceis de trabalhar a partir de uma perspectiva de especificidade do que os IDs. Você descobrirá que a maioria das páginas HTML atuais são preenchidas com atributos de classe, alguns dos quais são repetidos com frequência em um documento e outros que podem aparecer apenas uma vez.
Seletores de ID
O ID seletor nomeia um estilo específico sem associá-lo a uma tag ou outro Elemento HTML.
Suponha uma divisão em sua marcação HTML que contém informações sobre um evento. Você poderia dar a esta divisão um Atributo de ID de eventoe contorne essa divisão com uma borda preta de 1 pixel de largura:
#event {border: 1px solid # 000; }
O desafio com 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). Portanto, para três eventos que precisam dessa borda, você deve identificar os atributos de ID de evento1, evento 2, e evento3 e estilize cada um deles. Seria, portanto, muito mais fácil usar o atributo de classe de evento e estilize-os todos de uma vez.
Complicações de atributos de ID
Outro desafio com os atributos de ID é que eles têm uma especificidade mais alta do que os atributos de classe. Para substituir um estilo previamente estabelecido, pode ser difícil fazer isso se você depender demais dos IDs. Muitos desenvolvedores da web se afastaram de usando IDs em sua marcação, mesmo que pretendam usar esse valor apenas uma vez e, em vez disso, tenham se voltado para os atributos de classe menos específicos para quase todos estilos.
A única área em que os atributos de ID entram em jogo é quando você deseja criar uma página que tenha links de âncora in-page. Por exemplo, considere um site de estilo paralaxe que contém todo o conteúdo em uma única página com links que "saltam" para várias partes dessa página. Atributos de ID e links de texto usam esses links de âncora. Adicione o valor desse atributo, precedido pelo # símbolo, para o href atributo do link, como este:
Este é o link
Quando clicado ou tocado, este link salta para a parte da página que possui este atributo de ID. Se nenhum elemento da página estiver usando esse valor de ID, o link não fará nada.
Para criar links in-page em um site, o uso de atributos de ID será necessário, mas você ainda pode recorrer a classes para fins de estilo CSS geral. É assim que os designers marcam as páginas hoje - eles usam seletores de classe tanto quanto possível e só recorrem aos IDs quando precisam que o atributo atue não apenas como um gancho para CSS, mas também como um link in-page.