Pular para o conteúdo principal

CSS: ID e Class, o que são e quando usar


Como muita coisa no temido CSS, muitas pessoas tem dúvidas em relação ao ID e Class, o que é normal. Então vamos ver de forma simples o que é cada um deles e quando usar.

ID é um identificador ou seletor para um elemento no HTML, e este deve ser único em todo o corpo do documento, e assim o CSS será aplicado para este elemento em específico. É algo que funciona como o número do documento de identidade, ou seja, é como devemos identificar os elementos como imagens, divs, parágrafos em nossa página. É também a forma mais correta para este fim, mas muitos usam classes – e funciona – mas não é indicado, e podem ter alguns problemas ao usar Javascript por exemplo, pois classe pode ser usada em vários elementos HTML da página, e o ID dever ser usado em apenas um. No CSS ele é identificado pelo sinal # (sharp) e no HTML o nome do ID fica no parâmetro id=”” sem o sinal #.

Exemplo:
CSS
#meuelemento{
color: #000;
}

#meuOutroElemento{
color: #333;
margin: auto;
}

HTML

<div id=”meuelemento”>
Aqui é uma div com um ID único
</div>

<div id=”meuOutroElemento”>
Aqui é outra div com uma ID diferente, pois o ID não pode ser repetido
</div>


Class é um identificador ou seletor para uma classe de elementos no HTML, e pode ser usada para identificar vários elementos. Este tipo de identificador aplica as mesma características para todos os elementos que a usam. É algo como a cor dos cabelos, quando temos uma classe Loiro, todos dessa classe terão os cabelos amarelos. Ele pode ser usado em quase todos os elementos do HTML, incluindo imagens, divs, parágrafos e muitos outros. Ele é reconhecido no CSS por um ponto (.) e no HTML pelo parâmetro class=””, sem o sinal do ponto.

Exemplo:
CSS
.meuselementos{
color: #333;
background-color:#f1f1f1;
}

HTML
<div class=”meuselementos”>

Aqui é uma div com seu conteúdo

</div>

<div class=”meuselementos”>

Aqui é outra div diferente, mas com a mesa classe da div anterior, logo elas terão as mesmas características definidas na Class “meuselementos”

</div>

Conclusão
Podemos observar nos exemplos que o ID deve ser único em uma página HTML e assim as característica desse ID serão únicas para aquele elemento. E a Class pode ser usada para aplicar as mesmas características em vários elementos que a tenham declarado.

Espero que tenha entendido. Qualquer dúvida é só postar um comentário. Fique na Paz!

Postagens mais visitadas deste blog

Corrigindo erro ao instalar o Netbeans no Linux: UncaughtExceptionHandler in thread "main"

Ao tentar instalar o Netbeans 8.0.2 no Mageia 5, me deparei com um erro, onde ele não abria a tela de instalação, então rodei ele pelo terminal e tive a seguinte saída: 

$ ./netbeans-8.0.2-php-linux.sh
Configurando o instalador ...
Procurando por um JVM no sistema...
Extraindo dados para instalação...
Executando o assistente do instalador...

Exception: java.awt.HeadlessException thrown from the UncaughtExceptionHandler in thread "main"

Então após umas pesquisadas na Internet, cheguei à conclusão que era um problema no caminho do Java JDK que não está configurado corretamente, então basta executar o Netbeans informando o local do JDK:


./netbeans-8.0.2-linux.sh --javahome /usr/java/jdk1.8.0_25/
 No meu caso a localização do JDK foi "/usr/java/jdk1.8.0_25/', verifique o caminho da sua versão do JDK e também para sua versão do Linux. Acredito que esse erro possa acontecer no Windows em alguns casos, mas aí já é coisa pra um futuro tutorial.

Espero ter ajudado. Se te ajudou, com…

Instalando placa de vídeo AMD Radeon no Kubuntu 14.04 e 14.10

Como sempre, é recomendado usarmos drivers livres em nossas distribuições, não pelo falo de serem livres, mas principalmente por terem sido melhores testados pela comunidade. Se sua placa de vídeo foi reconhecida pelo Kubuntu(ou qualquer outra distro) e usa o driver livre, recomendo que deixe-o assim, mas pode seguir este tutorial. Como todo fabricante, a AMD disponibiliza um drive para seu produto, e para controlar a placa de vídeo, existe o AMD Catalyst, que é quem faz o controle do sistema híbrido, uma interface na verdade, mas já vem tudo junto num pacote só!

Sistema Híbrido Intel/AMD Radeon
Há alguns anos vi um professor com um sistema híbrido em um notebook, é algo interessante, mas que pode trazer um pouco de dor de cabeça para usuários Linux, quando se trata de placas da AMD. Não vejo muitas reclamações de placas Nvidia em sistemas híbridos, o uso do Bumblebee parece ser simples e sem muito mistério. Não que instalar o AMD Catalyst seja coisa de outro mundo, mas acontece de oc…