desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web 発展途上ウェブ-のX HTML、 C SS、 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のよう明らかに必要とマウントを行うことができますセレクタのスタイルシートが、他の言語のWeb 、 Javascriptがないと、またに依存しています。 Mas quais as diferenças entre IDs e classes?しかし、 IDとの違いは何ですクラスですか？

IDs são únicos IDはユニークな

• Cada elemento pode ter apenas um ID;各要素のことしかないの ID ;
• Cada página pode ter apenas um elemento com aquele ID.各ページに1つの要素は、その番号のみです。

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.それを学ぶときは、それは共通のを聞いてIDを一度に1つのみを使用する必要が、数回のクラスを使用することができます。 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つのヴァイ語： あなたのコードを通過する特定ヴァイ語バリデータを使用する場合は同じ番号を1つ以上の要素を作成します。 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.を控えて、他のユニークな理由で身分証明しなければならない。

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?しかし、もし必要なら、他の1つのより大きいが、スタイルを共有し続けるの他の属性ですか？ É possível aplicar mais de uma classe a um elemento:適用することができます1つ以上のクラスを1つの要素：

 <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パターンのIDとクラスには、どのブラウザで

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.これは何かを陰謀whoは初心者です。 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.あなたが従事しているサイトと、そのアプリケーションを発見したクラスの名前を特定の1つの問題を解決することができます。 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には、他のことに関しては確実にユニークな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情報を我々は情報を保管してクラスとは完全に維持される固有の番号です。

IDs têm uma funcionalidade especial nos navegadores IDは、特別な機能をブラウザで

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.クラスはありません特殊な機能をブラウザで、 IDのは、非常に特別なトリックしかし、その袖をアップ： "ハッシュ値"を含めるURLをお持ちの場合はhttp://seudominio.com ＃コメントすると、ブラウザの要素を見つけようとヴァイと番号"コメント"とヴァイページまで自動的にスクロールして、その要素を取得します。

É 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.これは重要な理由はなぜそれが重要な番号には、確実にユニークです。 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とクラスは、 1つの要素を作成します。 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したいを使用して、ページ上のすべてのコメントはありませんが、 1つの値の番号（ 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のでは 、 何もすることができます。行うことができないの番号クラスを操作するのと逆も可能です。 À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.これらのwhoの動きに加えてJavaScriptは、おそらくすでにラインの間の違いの他のクラスとの間のIDを提供します。 のJavaScriptに依存して、ページの要素が存在する固有のIDか、または、よく使われる機能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.この関数が存在しない場合は表示さをIDを提供します。 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.ご覧のように、クラスとIDが非常に重要なと私たちは毎日使用してページをしたり、操作し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”).には何も特別な存在しなければなりません一点のクラスを指定するため、タグを適用することが可能に独自のスタイル（ " " ） 。

Evite este tipo de coisa, também:このタイプのことを避けるために、あまりにも：

 <div id = "coluna-direita" > <div 番号 = "coluna-direita"> 

O ID é corretamente utilizado aqui, já que, provavelmente, a página terá somente uma única coluna da direita, mas o nome é inadequado.適切に、ここのためのidが使用され、おそらく、このページには右の列を1つだけですが、名前は適当ではない。 Descreva o contexto do elemento, não onde está ou como se parece.説明してコンテキストの要素ではなく、どこかこれはどのように思われます。 Um ID “barra-lateral” seria melhor.で身分証明書"サイドバー"方が良いです。

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" href = "fn拡張"http://www.commerce.net/"> commercenet < / > <div クラス = "adr"> <スパン クラス = "タイプ" >仕事< /スパン> ： <div "street-address" クラス => 169大学アベニュー< /部>の<span クラス = "locality">パロアルト< /スパン> 、 < abbrと クラス = "リージョン"タイトル = "カリフォルニア" >カリフォルニア< / abbrと>の<span "postal-code"> クラス = 94301 < /スパン> <div クラス = "country-name">アメリカ合衆国< /部> < /部> <部 のクラス = "電話" >の<span クラス = "type">仕事< /スパン>  1-650-289-4040 < /部> <div クラス = "tel">の<span クラス = "type">ファックス< /スパン>  1- 650-289-4041 < /部>の<div>電子メール： "email">の<span クラス = info@commerce.net < /スパン> < /部> < /部>