Utilizando CSS - Diferenças entre IDs e Classes

Principalmente quando no início dos estudos sobre desenvolvimento para web, é comum haver confusões entre IDs e Classes, tão utilizados e necessários em XHTML, CSS e Javascript. Vários tutoriais na internet explicam alguns pontos básicos e dão certas orientações, mas nada muito aprofundado e esclarecedor. O resultado: as dúvidas persistem e a diferença entre ID e Classe ainda não é “desvendada”. Com este artigo este “mistério” chega ao fim!

IDs e classes são “anzóis”

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML. Os elementos básicos como <h1>, <p> e <ul> frequentemente fazer o trabalho, mas o conjunto básico de tags não abragen todas as possibilidades de elementos de página ou escolhas de layout. Para isso, precisamos de IDs e Classes.

Por exemplo <ul id=”nav”>, isso dá a oportunidade de visar especificamente esta lista, então há uma maneira de manipular esta lista exclusivamente em relação a outras listas não-ordenadas da página. Ou talvez tivéssemos uma seção na página que não possui uma tag relevante para signifcar, por exemplo, um rodapé, onde poderíamos fazer algo como <div id=”footer”>. Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>.

Esses IDs e classes são os “anzóis” que precisamos fazer na marcação para colocarmos as mãos neles. CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web, como javascript, também dependem deles. Mas quais as diferenças entre IDs e classes?

Tutorial - Implementando o efeito Lightbox JS em fotos

Este tutorial tem base no próprio site do criador do Lightbox JS é praticamente uma tradução do seu conteúdo para ajudar quem não se dá muito bem com inglês.

Benefícios

Sobrepõe imagens á página corrente e não dentro da página. Isto faz com que as imagens não sejam limitadas por um layout. Exemplo é uma imagem que sai fora do layout por ter uma largura maior.

Mantem os viistantes na mesma página em vez de os levar para outra para terem de ver a imagem em ponto maior. Clicam para visualizar a imagem e clicam de novo para a fechar em vez de terem de voltar à página ou carregar no botão return.