desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web开发Web -的X HTML， C SS的， W eb标准，可用性，无障碍，网页设计，徐，博客和技术开发的W eb

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.尤其是当在早期的研究开发网络，有共同的混乱，阶级之间和IDS ，并用来作为需要在XHTML中， CSS和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 ea diferença entre ID e Classe ainda não é “desvendada”.结果是：疑虑，坚持和之间的差额ID和工人阶级是尚未“ desvendada ” 。 Com este artigo este “mistério” chega ao fim!在这篇文章这个“谜”即将结束！ ;-)

IDs e classes são “anzóis” ID和班“钩”

Precisamos de formas de descrever conteúdos em documentos HTML / XHTML.我们需要的方式，以文件描述的内容在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 .基本要素作为<h1>快来， <p> <ul> ，而且往往做的工作，但一套基本的标签不abragen的一切可能性的元素或页面布局的选择。 Para isso, precisamos de IDs e Classes .为此，我们需要的ID和班级。

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. <ul id="nav">举例来说，它赋予一个机会，针对这个清单，然后有一种方法操纵这份名单只是就其他非下令名单的网页。 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”>.或我们可能有一段在该网页上有没有相关signifcar 标记，举例来说，一个脚注，我们在那里可以做一些像<div id="footer"> 。 Ou talvez tenhamos boxes na barra lateral para manter o conteúdo separado de alguma forma: <div class=”sidebar-box”>.或也许我们有饭盒的工具栏，以保持独立的内容，以某种方式： <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.这些ID及班级是“钩”我们需要做的标记把他们的手，对他们的影响。 CSS obviamente precisa disso para que possa fazer seletores e montar folhas de estilos, mas outras linguagens web , como javascript , também dependem deles. CSS的显然需要它，这样您可以做出选择和张山的风格，但其他语言的网站，作为JavaScript的，也依赖于他们。 Mas quais as diferenças entre IDs e classes?但之间有什么区别的ID和班？

IDs são únicos入侵检测系统是独一无二的

• Cada elemento pode ter apenas um ID;每个元素只能有一个身份证;
• Cada página pode ter apenas um elemento com aquele ID.每一页可以只有一个元素与编号。

Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes.当您学习，这是共同的听到一应只使用一次入侵检测系统，但您可以使用一类几倍。 Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante.基本上，我们进入了一个耳朵和其他离开，因为它听起来更像一个“ regrinha ”一些真正重要的。 Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente.如果你只处理的HTML / CSS的，这可以发生在你身上，也是如此，因为他们真的似乎并没有做任何的不同。

Aqui vai uma: seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento .在这里奥钢联1 ： 您的代码奥钢联不通过校验如果您使用相同的ID在一个以上的元素。 Validação deve ser importante para todos nós, de modo que, por si só, é algo muito importante.验证应重要的是，所有我们，所以这本身就是一件很重要的。 Adiante, mais razões pelas quais um ID deve ser único.未来，更多的原因，一个ID必须是独一无二的。

Classes não são únicas班并非独一无二

• Você pode usar a mesma classe para vários elementos;您可以使用相同的类的几个要素;
• Você pode usar várias classes para um mesmo elemento .您可以使用几类为同一元素。

Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe .任何资料的作风，必须适用于多种元素在一个网页上应做的一类。 Tomemos como uma exemplo uma página com vários “ widgets “:采取作为一个例子，一个网页，几个“工具” ：

 < div class = "widget" >< / div > < div class = "widget" >< / div > < div class = "widget" >< / div > <div 级 = "widget"> < / 学> <div 级 = "widget"> < / 学> <div 级 = "widget"> < / 学> 

Agora, é possível usar a mesma classe “widget” como gancho para aplicar o mesmo conjunto de estilos para cada um deles.现在，您可以使用相同的阶层“的小装置”作为一个钩适用同一套作风，为每个。 Mas, e se for preciso ter um deles maior que os outros, mas continuar com um estilo que compartilhe dos outros atributos?但是，如果需要一大于其他，但继续与风格的股票的其他属性？ É possível aplicar mais de uma classe a um elemento:你可以套用一个以上的阶层的一个要素：

 < div class = "widget" >< / div > < div class = "widget big" >< / div > < div class = "widget" >< / div > <div 级 = "widget"> < / 学> <div 级 = "widget big"> < / 学> <div 级 = "widget"> < / 学> 

Não há necessidade de fazer e nomear uma nova classe aqui, apenas colocar o nome da nova classe no atributo class , juntamente com o nome da classe que já está lá.有没有需要做的，并任命一名新的阶层在这里，只是把名称新的阶级属性，在阶级，随着名称的类是已经存在。 As diferentes classes são delimitadas por espaços ea maioria dos navegadores permite quaisquer números delas (na verdade, é mais como milhares , o que é muito mais do que realmente é preciso).不同的班级范围内的空间和多数浏览器允许任何数目的他们（其实，更象是成千上万，这是远不止是实际所需） 。

Não existem padrões de IDs e Classes em nenhum navegador有规律，班级和IDS在任何浏览器

Colocar um nome de classe ou ID em um elemento, por padrão não faz nada a esse elemento.把姓名，或身份证在一类元素，在默认情况下并没有的元素。

Isso é algo que intriga quem é iniciante.这是一件阴谋，谁是初学者。 Você está trabalhando em um site e descobre que a aplicação de uma classe com um nome em particular resolve um problema que você tem.你是工作的一个网站上发现的应用一类与一个名字，特别是解决了一个问题，您有。 Então você mexe em outro site , com o mesmo problema, e tenta corrigí-lo da mesma maneira, usando aquele mesmo nome de classe, pensando que o nome da classe, por si só, tem alguma propriedade mágica, apenas para descobrir que não funciona assim…然后你移动到另一个网站，同样的问题，并试图修复它同样的方式，使用相同的名称，阶级，思想，名称的阶级本身，有一些神奇的财产，只发现不工作以及…

Classes e IDs não têm qualquer estilo por si mesmos.班和IDS有没有为自己的风格。 É preciso CSS para orientar e aplicar estilos.我们需要引导和实施的CSS样式。

Códigos de Barra e Números de Série守则巴拉和数字系列

Talvez códigos de barra e números de série sejam uma boa analogia.也许条形码和序号是一个很好的比喻。 Tome um iPod, numa loja.采取的iPod ，在商店里。 Na embalagem há um código de barras.在新教材有一个条码。 Ele indica à loja que produto é esse; então, quando é escaneado, o código de barras informa exatamente que produto é aquele e quanto custa.他指出，商店，这是产品，因此，当它是扫描，条码信息，这正是产品和成本。 É possível saber até sua cor e em qual lugar do armazém ele era mantido.您可以了解他们的颜色和位置的仓库中，他被保留。 Todos esses iPods têm exatamente o mesmo tipo de código de barras.所有的iPod都不尽相同种条码。

O iPod tem também um número de série que é absolutamente único em relação a qualquer outro iPod (ou outro dispositivo) em todo o mundo.苹果也有序号是绝对独特的关于任何其他的iPod （或其他设备）在世界各地。 O número de série não informa o preço.序号不告知的代价。 Poderia, mas para a loja que o vende esta não seria uma maneira eficaz de armazenar e utilizar essa informação.它可以，但为商店出售这将不是一个有效的方式来储存和使用这方面的资料。 É muito mais fácil usar um código de barras porque se, por exemplo, o preço muda, é preciso apenas alterar o preço para aquele código de barras, e não para cada número serial do sistema.这是非常容易使用的条码，因为举例来说，如果扣除价格变动的，我们只需要改变价格为条码，而不是序号为每个系统。

Isso é muito parecido com IDs e Classes. Informações que são reusadas devem ser mantidas em uma classe e informações que são totalmente únicas devem ser mantidas em um ID.这是非常相似的ID和班级。 reusadas信息我们要保持在一类和信息是完全独特的要保持在一个ID 。

IDs têm uma funcionalidade especial nos navegadores入侵检测系统是一个特殊的功能，在浏览器

Classes não tem funcionalidades especiais no browser , mas IDs têm um truque muito especial na manga: um “valor de hash ” para URLs. Se você tiver um URL como http://seudominio.com#comments, o navegador vai tentar localizar o elemento com o id “comments” e vai automaticamente rolar a página até chegar nesse elemento.班没有特别功能，在浏览器中，但入侵检测系统有一个非常特殊的把戏，其套筒： “哈希值”的网址如果您有一个网址http://seudominio.com ＃评论，浏览器奥钢联尝试找出元素ID为“评论”和奥钢联，自动卷动网页，直到您得到的元素。

É importante observar que o browser vai rolar a página até onde quer que o elemento esteja; então, se houver algo de especial, como uma DIV com barra de rolagem (propriedade CSS overflow com valor “auto” ou “scroll”), esta barra de rolagem vai ser deslocada - rolar para baixo -, também.这是很重要的地注意到，该浏览器的奥钢联滚动通过页，在这里您想要的元素，所以如果有一些特别的，作为一个学与滚动（ CSS的财产价值溢出与“自我”或“滚动” ） ，这个酒吧奥钢联提出的滚动-向下滚动-太。

Esta é uma razão importante sobre o porquê é importante ter um ID absolutamente único.这是一个重要的原因就为什么这是重要的是要有一个ID绝对独一无二的。 Com isso, o navegador sabe até quando rolar.对此，浏览器知道何时推出。

Elementos podem ter ambos, ID e Classes元素可以有两种， ID和班

Nada para você quando você usa ambos, ID e classes em um único elemento.没有为您当您使用两者， ID和班在一个单一的元素。 Na verdade, fazer isso na maioria das vezes é uma boa idéia.事实上，这样做在大多数情况下是一个好主意。 Tomemos como exemplo o padrão de marcação para item de lista de um comentário no Wordpress:采取，例如，模式标记为一个项目清单来发表评论的WordPress ：

 < li id = "comment-27299" class = "item" > <li 编号 = "comment-27299" 级 = "item"> 

Tem uma classe que foi aplicada que talvez se queira usar para estilizar todos os comentários na página, mas também há um único valor de ID (dinamicamente gerado pelo Wordpress).它有一个阶层，这是应用，也许你要使用的estilizar的所有评论网页，但有一个单一的价值识别码（动态生成的，由WordPress所） 。 Com isso, é facilmente possível fazer um link diretamente a um comentário, em uma página, em especial.这是很容易的可能作出直接链接到评论在一个网页上，特别是。

CSS não se importa CSS的不介意

Quanto ao CSS, não há nada que você possa fazer com um ID que não possa fazer com uma Classe e vice-versa .关于CSS中， 没有什么你可以做的与一的ID不能做的一类，反之亦然。 Às vezes, quando se está iniciando no estudo de CSS e se tem um problema, tenta-se alternar entre usar ID ou usar Classe.有时候，当开始学习CSS和你有一个问题，试图之间切换使用的ID或使用类。 O CSS não se importa. CSS中不介意。

Javascript se importa JavaScript是重要的

Aqueles que mexem com javascript provavelmente já estão mais em sintonia entre as diferenças entre as Classes e IDs. Javascript depende da existência de um elemento de página com ID único, ou então a comumente utilizada função getElementById não seria confiável.这些谁的动作与JavaScript的可能已经更多的在线之间的分歧，班级和IDS 。 JavaScript的取决于是否存在一个网页元素与独特的编号，或常用的功能getelementbyid不会可靠。 Aqueles acostumados com jQuery sabem o quão fácil é adicionar e remover classes de elementos de página.那些习惯于jquery知道有多么容易，添加和删除班级要素的一页。 É uma função nativa no jQuery.这是一个本土的功能在jquery 。 Veja que tal função não existe para IDs.看到这个功能并不存在的IDS 。 Não é responsabilidade do javascript manipular estes valores, porque ele causaria mais problemas que seria útil…这是没有责任的JavaScript操纵这些价值观，因为它会造成更多的问题，这将是有用的…

Se você não precisa deles, não os use如果您不需要他们，而不是使用

Como você pode ver, classes e IDs são muito importantes e nós os utilizamos todos os dias para estilizar páginas e manipular aquilo que é preciso.你可以看到，班级和IDS是非常重要的，我们要使用他们每天estilizar的页面和操作所需要的。 Entretanto, você deve usá-los com critério e semanticamente.不过，你应该使用他们的酌情权，和语义。

Isto significa evitar coisas do tipo:这意味着避免的东西，例如：

 < a href = "http://css-tricks.com" class = "link" > CSS-Tricks.com < / a > 的<a href = "http://css-tricks.com" 级 = "link">的CSS - tricks.com < / 一> 

Já sabemos: este elemento é um link , é um elemento âncora.我们已经知道：这个元素是一个链接，是一个锚。 Não há nada de especial aqui a ponto de ser preciso especificar uma classe, já que é possível aplicar o estilo na própria tag (”a”).有没有什么特别的是必须有一个点，指定一类，因为它是有可能的申请标记在自己的风格（ “ 1 ” ） 。

Evite este tipo de coisa, também:避免这种类型的事，太：

 < div id = "coluna-direita" > <div 编号 = "column-right"> 

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado.该ID是运用得当，因为在这里，大概，该网页将只有一个单一的右边一栏，但名称是不恰当的。 Descreva o contexto do elemento, não onde está ou como se parece.描述的背景元素，而不是它或它如何，似乎。 Um ID “barra-lateral” seria melhor.一ID为“酒吧方”会更好。

Microformatos são apenas nomes específicos de classes microformatos只有特定名称的班级

Pensa que microformatos é difícil para você?你认为缩微资料是很难适合你？ Microformato é apenas marcação regular que faz uso de nomes de classes padronizados para a informação que contêm. microformato只是标记，使经常使用规范的名称，类别，为它们包含的信息。 Veja este vCard:看到此的vCard ：

 < div class = "vcard" > < a class = "fn org url" href = "http://www.commerce.net/" > CommerceNet < / a > < div class = "adr" > < span class = "type" > Work < / span > : < div class = "street-address" > 169 University Avenue < / div > < span class = "locality" > Palo Alto < / span > , < abbr class = "region" title = "California" > CA < / abbr > < span class = "postal-code" > 94301 < / span > < div class = "country-name" > USA < / div > < / div > < div class = "tel" > < span class = "type" > Work < / span >  1-650-289-4040 < / div > < div class = "tel" > < span class = "type" > Fax < / span >  1-650-289-4041 < / div > < div > Email: < span class = "email" > info@commerce.net < / span > < / div > < / div > <div 级 = "vcard"> 的<a 级 = "url FN的org" href = "http://www.commerce.net/"> CommerceNet的< / 一> <div 级 = "adr"> <大跨度 级 = “键入“ >工作< / 跨度> ： <div 级 =" street-address "> 169大学路< / 学>的<span 级 ="地方"> Palo Alto的< / 跨度> ， < abbr 级 = ”地区“称号 = “钙” >钙< / abbr >的<span 级 = "postal-code"> 94301 < / 跨度> <div 级 = "country-name">美国< / 学> < / 学> <学 级 = “电话” > 的<span 级 = "type">工作< / 跨度>  1-650-289-4040 < / 学> <div 级 = "tel"> 的<span 级 = "type">传真< / 跨度>  1- 650-289-4041 < / 学> <div>电子邮件： 一流 的<span = "email"> info@commerce.net < / 跨度> < / 学> < / 学>