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

JDownloader: Corrigir erro Skipped FFMpeg ao baixar do Youtube

Há tempos eu vinha tendo problemas ao baixar vídeos do Youtube.com. Quando instalei a versão 2 do JD, apareceu-me uma janela que eu não tinha visto antes:



Veja o erro que acontecia ao tentar baixar um vídeo do Youtube, na imagem abaixo:

Sem tanta necessidade do download, eu sempre deixei para depois, mas em um momento eu precisei, e muito, então resolvi pesquisar e vi em alguns fóruns, em inglês, que poderia ser algum problema na linha de comando na configuração do JDownloader para o uso do FFMpeg. Mas ao checar o painel de configurações, os comandos estavam certos, mas o caminho do arquivo binário do FFMpeg não estava lá, tinha apenas "null", ou seja, nulo.

Então, para corrigir, se este for o seu problema, encontre o caminho do FFMpeg no seu sistema, seja ele Windows ou Linux. No caso do Windows, o arquivo binário ffmpeg.exe pode estar diretamente no disco C(ou outra unidade onde o S. O. estiver instalado) ou em Arquivos de Programas, se não encontrar, tente fazer uma pesqu…

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…

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…