Diferença entre id e classe em CSS e quando usá-lo [duplicado]
- Qual é a diferença entre uma identificação e uma aula? 14 respostas
<style>
#main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div id="main">
Welcome
</div>
aqui dei um id ao elemento div e está a aplicar o CSS relevante para ele.
OU
<style>
.main{
background: #000;
border: 1px solid #AAAAAA;
padding: 10px;
color: #fff;
width: 100px;
}
</style>
<div class="main">
Welcome
</div>
class Ao div e também está a fazer o mesmo trabalho para mim.
Então qual é a diferença exacta entre id e class e quando devo usar id e quando devo usar class. Eu sou um novato em CSS e Web design e um pouco confuso ao lidar com isso.
15 answers
Para mais informações sobre este Clique aqui.
Exemplo
<div id="header_id" class="header_class">Text</div>
#header_id {font-color:#fff}
.header_class {font-color:#000}
(Note que o CSS usa o prefixo # para identificações e . para as aulas.)
No entanto color was an HTML 4.01 <font> tag attribute depreciated in HTML 5.
No CSS não existe "font-color", o estilo é color por isso o acima deve ler-se:
Exemplo
<div id="header_id" class="header_class">Text</div>
#header_id {color:#fff}
.header_class {color:#000}
O texto seria branco.
-
Use uma classe quando quiser estilo consistente vários elementos em toda a página / site. Classes são úteis quando você tem, ou possivelmente terá no futuro, mais de um elemento que compartilha o mesmo estilo. Um exemplo pode ser um div de "comentários" ou um certo estilo de lista para usar para links relacionados.
Além disso, um dado elemento pode ter mais de uma classe associada a ele, enquanto um elemento pode ter apenas um id. Por exemplo, você pode dê a um div duas classes cujos estilos farão ambos efeito.
Além disso, note que as classes são frequentemente usadas para definir estilos comportamentais além dos visuais. Por exemplo, o plugin de validação do formulário jQuery usa fortemente classes para definir o comportamento de validação dos elementos (por exemplo, obrigatório ou não, ou definir o tipo de formato de entrada)Exemplos de nomes de classes são: tag, comment, toolbar-button, warning-message, or email.
-
Utilize o ID quando tenha UM único elemento na página que irá tomar o estilo. Lembrem-se que as identificações devem ser únicas. No seu caso esta pode ser a opção correta, como presumivelmente haverá apenas um div "principal" na página.
Exemplos de ids são: main-content, header, footer, or left-sidebar.
Uma boa maneira de lembrar que esta é uma classe é um tipo de item e o id é o nome único de um item na página.
ids são únicos
- Cada elemento pode ter apenas um.
- cada página pode ter apenas um elemento com esse {[[0]}
id
classes não são únicos
- pode usar o mesmo
classem vários elementos. - pode usar múltiplos
classno mesmo elemento.
O Javascript preocupa-se
As pessoas do JavaScript já estão provavelmente mais sintonizadas com as diferenças entreclass es e id S. JavaScript depende de haver apenas um elemento de página com algum {[[0]} em particular, ou então a função getElementById normalmente usada não poderia ser dependente.
Os IDs devem ser únicos -- você não pode ter mais do que um elemento com o mesmo ID num documento html. As Classes podem ser usadas para vários elementos. Neste caso, você gostaria de usar um ID para " main "porque é (presumivelmente) único-é o div" main " que serve como um contêiner para o seu outro conteúdo e haverá apenas um.
Se você tiver um monte de botões de menu ou algum outro elemento para o qual você quer o estilo repetido, você iria atribuir todos eles para a mesma classe e, em seguida, estilo essa classe.
Como quase toda a gente disse, use o ID para elementos pontuais e classe para vários elementos de uso.
Aqui está um exemplo rápido e simplificado, tome as marcas HTML e HEAD como lidas
<body>
<div id="leftCol">
You will only have one left column
</div>
<div id="mainContent">
Only one main content container, but.....
<p class="prettyPara">You might want more than one pretty paragraph</p>
<p>This one is boring and unstyled</p>
<p class="prettyPara">See I told you, you might need another!</p>
</div>
<div class="footer">
Not very HTML5 but you'll likely only have one of these too.
</div>
</body>
Também, como mencionado em outras respostas ID são bem expostos ao javascript, classes menos assim. No entanto, frameworks javascript modernos como Jquery classe de alavancagem para javascript demasiado
O atributo class pode ser usado com vários elementos/tags HTML e todos farão efeito. Em que o id se destina a um único elemento/etiqueta e é considerado único.
Mais do que o id tem um valor de especificidade superior ao class.
Os IDs têm a funcionalidade de funcionar como ligações a secções específicas dentro de uma página web. uma palavra-chave após # tag irá levá-lo para uma seção particular da página web. e. g " http://exampleurl.com#chapter5 " na barra de endereços levá-lo-á lá quando tiver um id "section5" enrolado em torno da secção do Capítulo 5 da página.
Podes atribuir um class a muitos elementos. Você também pode atribuir mais de um class a um elemento, por exemplo.
<button class="btn span4" ..>
In Bootstrap. Você pode atribuir o id apenas a um.
Então, se você quiser fazer muitos elementos parecerem os mesmos, por exemplo. listar os itens, você escolhe class. Se quiser activar certas acções num elemento que utilize JavaScript, provavelmente irá usar id.
Uma classe pode ser usada várias vezes, enquanto um ID só pode ser usado uma vez, então você deve usar classes para itens que você sabe que vai usar muito. Um exemplo seria se você quisesse dar todos os parágrafos em sua página web o mesmo estilo, você usaria classes.
As normas especificam que qualquer nome de ID só pode ser referenciado uma vez numa página ou documento. Use IDs quando há apenas uma ocorrência por página. Usar as classes quando existirem uma ou mais ocorrências por pagina.
Id:
Vai identificar o elemento único de toda a sua página. Nenhum outro elemento deve ser declarado com o mesmo id. O selector de id é usado para especificar um estilo para um único elemento único. O selector de id usa o atributo id do elemento HTML, e é definido com um "#".Classe:
O selector de classes é usado para indicar um estilo para um grupo de elementos. Ao contrário do selector de id, o selector de classes é mais frequentemente usado em várias elemento.
Isto permite-lhe definir um estilo particular para muitos elementos HTML com a mesma classe.
O selector de classes usa o atributo de classe HTML, e é definido com "."
O Id é usado quando temos de aplicar a propriedade CSS apenas a um atributo.
A classe é usada quando temos de usar a propriedade CSS em muitos locais dentro da mesma página ou diferentes.
- Para uma estrutura única, como o fitar div e a disposição dos botões, usamos o id .Para o mesmo CSS em toda a página ou projecto usamos a classe
A identificação é leve e a classe é pouco pesada
Uma maneira simples de olhar para ele é que um id é único para apenas um elemento.
Uma classe não é única e aplicada a vários elementos.
Por exemplo:
<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>
O conteúdo é uma classe, uma vez que provavelmente irá aplicar-se a algumas outras tags, bem como onde "muito importante" só está a ser usado uma vez e nunca mais.
Se há algo a acrescentar às boas respostas anteriores, é para explicar por que {[[0]} s deve ser único por página. Isto é importante de entender para um iniciante porque aplicar o mesmo id a vários elementos dentro da mesma página não irá desencadear qualquer erro e tem os mesmos efeitos que um class.
De uma perspectiva HTML/CSS, a unicidade de {[[0]} por página não faz um sens. mas da perspectiva JavaScript, é importante ter um id por elemento por página porque getElementById() identifica, como o seu nome sugere, elementos pelos seus id s.
Assim, mesmo se você é um desenvolvedor HTML/CSS puro, você deve respeitar o aspecto de unicidade de {[[0]} s por página por duas boas razões:
- clareza: sempre que vir um id, tem a certeza de que não existe noutro lado da mesma página
- escalabilidade : mesmo que esteja a desenvolver-se apenas em HTML/CSS, tem de ter em consideração o dia em que você ou outro o desenvolvedor irá continuar a manter e adicionar funcionalidade ao seu site em JavaScript.
Ao contrário do selector id, o selector class é mais frequentemente usado em vários elementos.
Isso permite que você defina um estilo particular para muitos elementos HTML com a mesma classe.
O selector class usa o atributo de classe HTML, e é definido com "."
Uma maneira simples de olhar para ele é que um id é único para apenas um elemento. class é melhor usar, pois vai ajudá-lo a executar o que quiser.
O selector de Id pode ser usado para mais elementos. aqui está o exemplo:
Css:
#t_color{
color: red;
}
#f_style{
font-family: arial;
font-size: 20px;
}
Html:
<p id="t_color"> test only </p>
<div id="t_color">the box text</div>
O "único" só significa que um elemento não pode ter mais do que um atributo id como selector de classe. Nem
<p id="t_color f_style">...</p>
Nem
<p id="t_color" id="f_style">...</p>