Os atributos HTML id e class servem para nomear qualquer grupo de elementos, ambos tem a mesma função porém existe uma diferença, bom quando atribuimos id o elemento terá um “Identificador único e exclusivo”, ou seja o nome que se da à esse elemento atribuido ao id só poderá ser usado neste grupo, já com o atributo class nós podemos nomear vários grupos de elementos com o mesmo nome.
Esses dois atributos têm várias funções em uma página HTML:
- como seletores de folhas de estilos (CSS).
- como links que são associados a hiperlinks.
- meio de referenciar um determinado elemento a um script.
- como nome declarado de um elemento objetc.
Com aqui é um curso CSS nós veremos com usar os atributos HTML id e class como seletores em uma folha de estilo
Usando o atributo ID
Os elementos que usaremos para nomear o atributo id serão as tags div e span que estudamos na aula passada Curso de CSS – Div e Span ( Aula 2) .
Neste exemplo criei uma div com o nome de “exemplo” e um span com o nome de “exemplo-2″.
<div id="exemplo"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span id="exemplo-2">conteúdo da span</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
Como usar
Para aplicarmos nome a uma div usando o atributo id nós utilizamos = e escrevemos o nome entre aspas como o exemplo <div id=”exemplo”>
A mesma coisa serve para a tag span, nós utilizamos = e escrevemos o nome entre aspas como o exemplo <span id=”exemplo-2″>
Nós usaremos o nome que acabamos de dar ao atributo id na folha de estilo, esse nome em CSS é um seletor então aplicaremos propriedades e valores à essas propriedades para esse seletor que neste caso chama-se exemplo.
Como o atributo id é um Identificador único e exclusivo não foi possível nomear a tag span com o mesmo nome da tag div então nomeei de exemplo-2.
Independente onde você usar o CSS como, in-line, interna ou externa você vai aplicar um seletor id da mesma forma;
Para identificarmos que um seletor vem de um atributo id nós aplicamos o caractere jogo-da-velha “#” à frente do seletor.
#exemplo { propriedade: valor;}
#exemplo-2 { propriedade: valor;}
Usando o atributo class
O exemplo a baixo é aplicado várias divs e spans e nomeamos essas divs e spans com o atributo class, então por sua vez colocamos os mesmos nomes para esses grupos de elementos.
<div class="exemplo"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. <span class="exemplo">conteúdo da span</span> </div> <div class="exemplo"> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> <span class="exemplo">conteúdo da span</span>
Em CSS para nós indentificarmos que um seletor (nome que se da à um elemento) vem de um atributo class nós aplicamos o caractere ponto “.” à frente do seletor.
.exemplo { propriedade: valor;}
Em outras palavras, quaisquer propriedades que eu aplicar ao seletor “exemplo” na folha de estilo, irá afetar todas as divs e spans que estão atribuidas há esses elementos.
Muito legal seu blog
Otimas dicas
Fernando, muito bom o modo como é explicado os comandos CSS,
primeiro é escrito e depois tem o video.Consegui tirar várias dúvidas.Parabéns pelo site.
muito bom ! consegui tirar duvidas que eu tinha .
vai ajudar muito na manutenção e progresso do meu site