Frage

Wenn divs verwenden, wenn es am besten, eine Klasse vs-ID zu benutzen?

Ist es am besten Klasse zu verwenden, auf etwa Schriftvariante oder Elemente innerhalb der html? Dann ID für die Struktur / Behälter verwenden?

Das ist etwas, was ich ein wenig unsicher auf immer war, würde jede mögliche Hilfe groß sein.

War es hilfreich?

Lösung

Mit id Elemente zu identifizieren, dass es nur eine einzelne Instanz auf einer Seite sein wird. Zum Beispiel, wenn Sie eine einzelne Navigationsleiste, die Sie in einer bestimmten Stelle platzieren, verwenden Sie id="navigation".

Verwenden class zu Gruppenelementen, die alle auf eine bestimmte Weise verhalten. Zum Beispiel, wenn Sie Ihren Firmennamen im Fließtext erscheinen in fett wollen, könnten Sie <span class='company'> verwenden.

Andere Tipps

Die wichtigste Sache zu verstehen ist, dass IDs eindeutig sein: nur ein Element mit einer bestimmten ID sollte innerhalb einer Seite vorhanden ist. Wenn Sie also wollen, sind auf eine bestimmte Seite Element verweisen, das ist oft das Beste, was zu verwenden.

Wenn Sie mehrere Elemente aufweisen, die ähnlich in gewisser Weise sind, sollten Sie die Elemente-Klasse verwenden, um sie zu identifizieren.

Eine sehr nützliche, überraschend wenig bekannte Tatsache ist, dass Sie tatsächlich, indem sie Räume zwischen den Klassennamen mehr Klassen auf ein einzelnes Element anwenden können. Wenn Sie also eine Frage gestellt, die von den aktuell angemeldeten Benutzer geschrieben wurden, könnten identifizieren Sie es mit

.

Denken Sie an der Universität.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Student ID Karten sind verschieden. Keine zwei Studenten auf dem Campus haben die gleichen Schüler ID Karte. viele Studenten können jedoch und wird mindestens ein Klasse miteinander teilen.

Es ist in Ordnung, mehrere Schüler unter einer Klasse Titeln zu setzen, Biologie 101. Aber es ist nie akzeptabel mehrere Schüler unter einem Schüler ID zu setzen.

Bei Angabe Regeln über die Schule Intercom-System, können Sie geben Regeln Klasse :

  

"Würde die Biologie Klasse bitte Red Shirts morgen tragen?"

.BiologyClass {
  shirt-color:red;
}

Sie können auch Regeln geben, um einen bestimmten Schüler, durch seine einzigartige ID Aufruf :

  

"Would Jonathan Sampson bitte ein grünes Hemd morgen tragen?"

#JonathanSampson {
  shirt-color:green;
}

IDs muß eindeutig sein, aber in CSS sie auch Priorität, wenn herauszufinden, welche von zwei widersprüchlichen Anweisungen zu folgen.

<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}

Der Text wäre weiß.

Klassen sind groß, wenn Sie einen ähnlichen Stil zu vielen verschiedenen divs oder Elemente anwenden möchten. ids sind gut, wenn Sie ein bestimmtes Element für die Formatierung oder für die Aktualisierung mit Javascript ansprechen wollen.

Ein weiterer Vorteil einer ID ist die Möglichkeit, es in einem Anker-Tag zum Ziel:

<h2 id="CurrentSale">Product I'm selling</h2>

Erlauben Sie, daß in einem anderen Ort Link direkt zu dieser Stelle auf der Seite:

<a href="#CurrentSale">the Current Sale</a>

Eine häufige Verwendung für diese wäre jede Schlagzeile auf einem Blog eine datestamped ID (sagen id = „date20080408“) zu geben, die Sie speziell diesen Abschnitt der Blog-Seite Ziel erlauben würde.

Es ist auch wichtig zu bedenken, dass es mehr eingeschränkte Namensregeln für ids sind, in erster Linie, dass sie nicht mit einer Zahl beginnen. Ähnliche SO Frage: Was ist ein gültiger Wert für id Attribute in html

Der HTML-Standard selbst beantwortet Ihre Frage:

Keine zwei Objekte die gleiche ID haben, aber eine beliebig Menge von Objekten die gleiche Klasse haben.

Wenn Sie also bestimmte CSS-Stil anwenden möchten nur einen einzigen DIV-Attribute zu, das wäre eine ID sein. Wenn Sie bestimmen wollen Stil auf mehrere DIVs anzuwenden Attribute, das muss eine Klasse sein.

Beachten Sie, dass beide mischen. Sie können zwei DIVs machen zur gleichen Klasse gehören, aber sie unterschiedliche IDs geben. Anschließend können Sie den Stil gemeinsam sowohl für die Klasse gelten, und die Dinge, die spezifisch für entweder einen ihre ID. Der Browser wird zunächst den Klassenstil anwenden und dann dem ID-Stil, so können ID Stile überschreiben, was eine Klasse vor gesetzt hat.

Einige andere Dinge im Auge zu behalten:

  • Wenn ASP.Net verwenden Sie haben nicht die vollständige Kontrolle über die ID der Elemente, so dass Sie haben ziemlich viel Klasse verwenden (beachten Sie, dass dies weniger wahr, als es einmal war).
  • Es ist am besten zu verwenden weder , wenn Sie ihm helfen können. Stattdessen geben Sie die Elementtyp und es ist Eltern Typ . Zum Beispiel kann eine ungeordnete Liste innerhalb div mit der Navarea Klasse enthalten ist, könnte auf diese Weise herausgehoben werden:

    div.NavArea ul { /* styles go here */ }
    

Jetzt können Sie die logische Teilung Stil für einen Großteil Ihrer gesamten Navarea mit einer Klasse-Anwendung.

IDs sollte eindeutig sein. Klassen sollten gemeinsam genutzt werden. Also, wenn Sie einige CSS-Formatierung, die auf mehrere DIV angewendet wird, eine Klasse verwenden. Wenn nur ein (als Voraussetzung, nicht als Zufall), eine ID verwenden.

Ich denke, wir alle wissen, welche Klasse ist, aber wenn man von IDs als Bezeichner denkt eher, als Styling-Tools, Sie werden nicht viel falsch machen. Sie benötigen eine Kennung, wenn etwas zu zielen versuchen, und wenn Sie mehr als ein Element mit der gleichen ID haben, können Sie sie nicht mehr identifizieren ...

Wenn es darum geht, Ihre CSS für IDs und Klassen zu schreiben, ist es von Vorteil minimal CSS-Klassen zu verwenden, so weit wie möglich und versuchen, nicht zu schwer zu bekommen mit den IDs, bis Sie zu haben, sonst wirst du ständig schreiben anstreben stärkere Erklärungen und bald eine CSS-Datei voll haben! wichtig.

Wo eine ID im Vergleich zu einer Klasse verwenden

Der einfache Unterschied zwischen den beiden ist, dass, während eine Klasse wiederholt auf einer Seite verwendet werden kann, muss eine ID nur einmal pro Seite verwendet werden. Daher ist es angebracht, eine ID auf dem div Element zu verwenden, der den wesentlichen Inhalt auf der Seite ist die Kennzeichnung auf, da es nur einen Hauptbereich sein wird. Im Gegensatz dazu müssen Sie eine Klasse verwenden Zeilenfarben auf einem Tisch einzurichten abwechselnd, da sie per Definition geht mehr als einmal verwendet werden.

IDs sind ein unglaublich mächtiges Werkzeug. Ein Element mit einer ID kann das Ziel von einem Stück JavaScript sein, die das Element oder sein Inhalt in irgendeiner Weise manipuliert. Das ID-Attribut kann als Ziel eines internen Link verwendet wird, Anker-Tags mit dem Namen Attribute zu ersetzen. Schließlich, wenn Sie Ihre IDs klar und logisch zu machen, können sie als eine Art „Selbstdokumentation“ innerhalb des Dokuments dienen. Zum Beispiel müssen Sie nicht unbedingt einen Kommentar, bevor ein Block hinzuzufügen, die besagt, dass ein Codeblock wird den Hauptinhalt enthalten, wenn das Starttag des Blocks eine ID hat, sagen wir, „main“, „header“, „Fußzeile “, etc.

Wenn es ein Stil, den Sie an mehreren Stellen auf einer Seite verwenden möchten, verwenden Sie eine Klasse. Wenn Sie eine Menge Anpassung für ein einzelnes Objekt wollen, sagen wir ein Navigationsleiste auf der Seite der Seite, dann eine ID ist am besten, weil Sie wahrscheinlich nicht anderswo, dass die Kombination von Stilen müssen.

id sollte das Element eindeutige Kennung auf der Seite sein, was sie zu manipulieren hilft. Alle extern CSS definiert Stil, die angeblich in mehr als einem Element verwendet werden soll, sollte auf das Klassenattribut gehen

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>

Verwenden Sie eine ID für ein einzigartiges Element auf der Seite, die Sie mit etwas ganz Konkretes tun wollen, und eine Klasse für etwas, das Sie sich auf andere Teile der Seite wiederverwenden können.

Die id Attribut für Elemente verwendet wird eindeutig sie innerhalb des Dokuments zu identifizieren, während der Klasse Attribut kann den gleichen Wert von vielen Elementen im selben Dokument geteilt hat.

Also, wirklich, wenn es nur ein Element pro Dokument, das den Stil zu verwenden, geht (zum Beispiel #title), dann gehen Sie mit id . Wenn mehrere Elemente den Stil verwenden können, gehen Sie mit Klasse .

Ich würde sagen, dass es am besten ist, eine Klasse zu verwenden, wenn Sie ein Stilelement denken wird auf einer Seite wiederholt werden. Produkte wie Header, FooterBar und dergleichen gehen auch eine ID, da Sie nur einmal verwenden werden es und es wird dir helfen zu verhindern, dass versehentlich zu duplizieren, da einige Redakteure Sie warnen, wenn Sie doppelte IDs haben.

Ich kann auch sehen es hilfreich, wenn Sie vorhaben, die div-Elemente dynamisch zu generieren, und wollen ein bestimmtes Element für die Formatierung wählen; Sie können ihm nur die richtige ID zu Generation geben, wie für das Element zu suchen Gegensatz und dann seine Klasse zu aktualisieren.

Mein Geschmack der Wahl ist Klassenidentifikation zu verwenden, wenn CSS-Stile auf mehrere divs in gleicher Weise angewandt werden. Wenn die Struktur oder Behälter wirklich nur einmal angewandt wird, oder kann seinen Stil aus dem Standard erbt, sehe ich keinen Grund Klassenidentifikation zu verwenden.

So würde es davon ab, ob Ihr div ist eine von mehreren; zum Beispiel, was ein div eine Frage zu einer Antwort auf der Stackoverflow-Website. Hier würden Sie den Stil für die „Antwort“ Klasse zu definieren, und dies auf jeden „Antwort“ div.

Wenn Sie .NET Web Controls verwenden, dann ist es manchmal viel einfacher, nur Klassen zu verwenden, wie .Net Web contol div id die während der Laufzeit verändert (wo sie runat = „server“ verwenden).

Klassen ermöglicht es Ihnen, leicht aufzubauen Stile mit getrennten Klassen für Schriften, Abstände, Ränder etc. Ich verwende in der Regel mehr Dateien getrennte Arten von Formatierungsinformationen zu speichern, z.B. basic_styles.css für einfache Website breiter Formatierung, ie6_styles.css für den Browser-spezifische Stile (in diesem Fall IE6) etc und template_1.css für Layoutinformationen.

Welche auch immer wählen Sie versuchen, konsequent zu sein Wartung zu unterstützen.

Wie gut, ein Element, das Sie eine bestimmte ID geben zu können über JavaScript manipuliert werden und DOM-Befehle -. GetElementByID, zum Beispiel

Generell finde ich es sinnvoll, alle Hauptstruktur divs eine ID zu geben - auch wenn zunächst, ich habe keine spezifische CSS-Regeln anzuwenden, ich habe diese Fähigkeit es für die Zukunft. Auf der anderen Seite, ich benutze Klassen für jene Elemente, die mehrfach verwendet werden können - zum Beispiel ein div ein Bild und Beschriftung enthält - ich mehrere Klassen haben könnte, die jeweils mit leicht unterschiedlichem Styling Werten

.

Denken Sie jedoch daran, alle Dinge gleich, Stilregeln in einer id-Spezifikation haben Vorrang vor den in einer Klassenspezifikation zu sein.

Neben IDs und Klassen groß ist für die Einstellung Stil auf ein einzelnes Element Verse einem ähnlichen Satz von Elementen, gibt es auch eine andere Einschränkung zu erinnern. Es hängt auch von der Sprache bis zu einem gewissen Grad. In ASP.Net, können Sie in Div Wurf und ids haben. Aber, wenn Sie anstelle der Div einen Panel verwenden Sie die ID verlieren.

Klassen für Stile werden Sie mehrmals auf einer Seite verwenden können, IDs sind eindeutige Kennungen, die Sonderfälle für Elemente definieren. Die Standards sagen, dass IDs nur einmal in einer Seite verwendet werden. So sollten Sie Klassen für verwenden, wenn Sie einen Stil verwenden möchten, auf mehr als ein Element auf einer Seite, und eine ID, wenn Sie nur wollen, es einmal verwenden.

Eine andere Sache ist, dass für die Klassen können Sie mehrere Werte verwenden (durch Leerzeichen zwischen jeder Klasse setzen, a la „class =‚blagh blah22 blah‘) wheras mit IDs, die Sie nur über ID pro Element verwenden können.

Stile definieren für IDs überschreiben Stile für Klassen definiert, so in, werden die Stileinstellungen von #uniquething den Stil .Whatever wenn die beiden Konflikte außer Kraft setzen.

So werden Sie wahrscheinlich IDs für Dinge wie Header, Ihre ‚sidebar‘ oder was auch immer, und so weiter verwendet werden soll -. Dinge, die nur einmal erscheinen pro Seite

Für mich. Wenn die Verwendung Klassen, wenn ich etwas in CSS tun oder Namen Elemente hinzufügen und in allen Elementen in einer Seite verwenden kann

So IDs ich für einzigartiges Element

Beispiel:

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top