Neste artigo
Construir sites bem estilizados na web de hoje requer um conhecimento profundo das folhas de estilo em cascata. 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 em apenas 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 todas as tags HTML – portanto, independentemente de você estilizar 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 esta 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 {color: # 0000ff; }
p.alert {color: # ff0000; }
Esses estilos definiriam a cor de tudo 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 esse parágrafo seria exibido em vermelho, pois o atributo de classe sobrescreveria a cor azul padrão do estilo do seletor de elemento.
type = “code”> 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;}
type = “code”> 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.
type = “code”> 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 seletor de ID 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; }
type = “code”> O desafio dos 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 deixaram de usar IDs em sua marcação, mesmo que pretendam usar esse valor apenas uma vez, e optaram por atributos de classe menos específicos para quase todos os 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
type = “code”> 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 o máximo 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.
