Hier sind ein paar kurze Tipps zur Verwendung von class id in Style Sheets. Beachten Sie, dass jetzt die Verwendung von Advanced JavaScript, einschließlich der Verwendung von Ajax-Engine, kann in Konflikt mit den Empfehlungen, die hier! Und am Ende werden wir sehen, warum.
Denn Sie haben, ist das Attribut class="" dass das Attribut id="" Um ein Tag zu einem Stil, es wird oft verwechselt und nicht verstehen, was ist der Unterschied, oder die beste Wahl zwischen den beiden. In Wahrheit von der TAG-Klasse oder über die id für das CSS ändert nichts, oder fast. Der Unterschied ist die Art, wie wir über die Seite und sie richtig id Klassen, ohne Reue und dann die Entscheidungen.
Eine Klarstellung sull'ereditarietà
Vor Beginn möchte ich an dieser Stelle zu betonen, eine wichtige Stile, oder coscading oder Vererbung. In der Praxis wird ein Unter-erbt die Eigenschaften des Vaters, es sei denn, Sie ausdrücklich, dass !important Hier ist ein Beispiel, die Klärung dieser Situation beitragen. Angenommen, Sie haben die folgende Stylesheet:
CSS: :14px } # A_box p (font-size: 14px)
:22px } # B_box p (font-size: 22px)
und den folgenden HTML-Code:
HTML: <p> Prime Text direkt unter a_box
</ p> <p> Nach den Text unten und b_box sein Gesicht unter a_box
</ p> </ Div>
</ Div>
Das Ergebnis im Browser wird eigentlich, was Sie wollen, der erste Absatz wird mit den 14 Pixel Schrift-und der zweite Absatz mit der Schrift auf 22 Pixel! Wir versuchen nun zu nutzen Klasse statt id:
CSS: :14px } # C_box p (font-size: 14px)
:22px } . D_box p (font-size: 22px)
HTML-Code:
HTML: <p> Prime Text direkt unter c_box
</ p> <p> Nach den Text unten und d_box sein Gesicht unter c_box
</ p> </ Div>
</ Div>
Das Ergebnis im Browser (getestet auf Firefox 1.5 + und IE6), dieses Mal wird anders! Was ist passiert? div Klasse d_box geerbt die font-size des ersten div mit der id c_box Eine id dann, dass die Klassen "Töchter", um ihre Eigenschaften erben (obwohl dies gilt nicht für alle Stilrichtungen). Um das Problem sollte ausdrücklich erwähnt, mit der !important die font-size d_box wie unten dargestellt:
CSS: :14px } # C_box p (font-size: 14px)
!important } . D_box p (font-size: 22px! Wichtig)
Auf diese Weise konnten wir auferlegen zu berücksichtigen, den neuen Stil von der Klasse d_box
Mit nur den Klassen:
CSS: :14px } . C_box p (font-size: 14px)
:22px } . D_box p (font-size: 22px)
HTML-Code:
HTML: <p> Prime Text direkt unter c_box
</ p> <p> Nach den Text unten und d_box sein Gesicht unter c_box
</ p> </ Div>
</ Div>
Das Ergebnis wird sein, dass die Original-Browser, beide Ziffern sind korrekt dargestellt. Moral: sehr sorgfältig und dann, wenn Sie Cascading Style ... wenn es stimmt, dass es einen unmittelbaren Unterschied zwischen den Klassen und id ist auch wahr, dass ihr Einsatz ist nicht ganz identisch. Denn sonst gibt zwei Möglichkeiten der Behandlung?
Artikel
Aber es ist ein Weg, zu wissen, wer "gewonnen", wenn Sie einen Stil. Diese Technik ist in der Regel genannt Cascade Regel 3.
Es stellt einen Wert für jeden Wahlschalter oder deklaratorischer Linie CSS. Dieser Wert ist in der Form ABC.
1) Fügen Sie 1 bis A für jede id in der Selektor
2) Fügen Sie 1 bis B für jede class in den Selektor
3) Add 1 bis C für jeden Selektor in der TAG -
Hier ist ein Beispiel:
CSS: - 1 = 1 - [ p { color : red } 0 - 0 - 1 = 1 - [p (Farbe: rot)
- 1 = 11 - [ p .largetext 0 - 1-1 = 11 - [S. largeText
- 1 = 101 - [ p#largetext 1 - 0 - 1 = 101 - [p # largeText
- 2 = 102 - [ body p#largetext 1 - 0 - 2 = 102 - [Stelle largeText P #
- 3 = 113 - [ body p#largetext ul .mylist 1-1 - 3 = 113 - [p # Stelle largeText ul. MyList
- 4 = 114 - [ body p#largetext ul .mylist li 1 - 1-4 = 114 - [p # Stelle largeText ul. MyList li
Der höchste Wert gewinnt. Wenn zwei Regeln haben das gleiche Gewicht, gewann den letzten Satz.
Empfehlungen
Eine Möglichkeit könnte sein: Verwenden Sie die Klasse, wenn das Verhalten eines visuellen TAG können je nach ihrer übergeordneten Container. Verwenden Sie id wenn das Verhalten von Vision ist einzigartig, das heißt, unabhängig von ihren übergeordneten Container.
Eine erhellende Beispiel für diesen Ansatz ist die folgende: das Verhalten eines hypothetischen Titel. In diesem Fall, verwenden Sie die class="title" und nach dem Container über den regelmäßigen Verhalten. Die CSS-Datei könnte wie folgt lauten:
HTML: </ Code> <code> # listProducts. Titel (........ ) # Listusers. Titel (....... ) </ Code> </ div>
In der Realität, in der Tat, sind die Dinge noch besser, denn wir haben die TAG H n um uns zu helfen. In einem echten Fall die Klasse title wäre sinnlos. In der Praxis der Technik ist die Verwendung der id Verhalten (in der Tat, sind häufig als ID-Selektor). Einer realen Situation werden könnte:
HTML: </ Code> <code> # listProducts h1 (........ ) h1 (# Listusers ....... ) </ Code> </ div>
So haben wir drei verschiedene Verhaltensweisen auf der Grundlage der Selektor. Die wichtigste Regel könnte sein: wenn diese visuell TAG wird in einer anderen Art und Weise in Abhängigkeit von der Container zu benutzen class
In diesem Fall, unter anderem, die viele Elemente der visuellen Layout wie ul Diese können in unterschiedlicher Weise abhängig von der Mutter-Container können in der Navigationsleiste, einer anderen vorderen Seite, eine weitere in der Seitenleiste, etc. ... Aber was wir brauchen, in den meisten Fällen ist die einzige Selektor id die bestmögliche Nutzung der TAG-Standards zur Verfügung gestellt von HTML.
Zum Beispiel, eine gute Regel ist die Verwendung der Listen ul oder ol wenn Sie können, unter der H n der acronym code Begrenzung der kurzen div und span sonst unnötig machen die Verwendung von Stilen, die auch unter Wasser mit etwas supeflui . Oft in der Tat, nicht einmal wissen, alle HTML-Tags. Einige Web-Designer zu ignorieren scheinen einige der nützlichsten TAG in Standard-HTML. Sicher einige TAG (wie auch einige Attribute, Veranstaltungen, Stile, und, leider, viele andere Sachen ...) sind nur in der Standard-Browser zu bestimmten, aber es gibt viele TAG uneingeschränkt unterstützt von praktisch allen bestehenden Browsern (einschließlich Safari - apropos Apple hat aber vielleicht vergessen, dass sie ihre eigenen Browser?).
Die Stylesheets, doch leider sind auch einige Missverständnisse hier und da. Web-Designer, ist warten, hoffen auf eine Standard-und weniger variabel. Benutzen Sie die id können nicht absehen, dass auch in einer Nebenwirkung, die aus der Verwendung von Javascript. Durch die Sprache am meisten verwendeten Client-Seite, wenn in Ihrem Browser aktiviert ist, können Sie einen Zeiger auf einen bestimmten Tag oder Seite Element. Dies ist nun gelöst, mit Leichtigkeit (vor einiger Zeit war etwas kompliziert, aufgrund der immer präsent Inkompatibilitäten zwischen Browsern!) Mit der Methode getElementByID() zur Verfügung gestellt werden aus dem document
Wie aus dem gleichen Namen der Methode getElementByID() ruft den Zeiger auf der Grundlage der id des Eintrags. Das Problem hat damit zu tun, die Style-Sheets ist, dass die id in Frage ist die gleiche, die von getElementByID() um den Punkt. Dann schreiben Sie sich vorstellen, zu einer Web-Anwendung zur Verwaltung einer Reihe von Post-it auf dem Bildschirm, wenn überhaupt mit dem position:absolute aktiviert. Dies bedeutet, dass die Post-it auf der Seite konnte ich eine Reihe von N. Der Web-Designer, die gerne schreiben das Stylesheet zu diesem Punkt, nach unserer Wahl würde die Verwendung einer div und gib ihm eine id="postIt" Auf diese Weise folgen wir der Regel, dass, wenn ein Post-it nicht, sich in einem optisch unterscheiden sich je nach den übergeordneten Container. In unserem Spezifikation ist es nur ein Objekt korrekt ist, und dann durch einen id Das Problem kam, als die Programmierer Javascript (die Zeichen dieser MiniStore sind 2 verschiedene, aber die Frage wäre auch peinlich für einen einzelnen Entwickler, ...) versucht, einen Zeiger auf einen bestimmten Post-it! Schon bald wird sich bewusst, dass es nicht verwenden können, die ID als diskriminierend, als ob auf der Seite, gibt es mehrere Elemente mit derselben ID zu getElementByID() kann nicht mehr einen einzigen Zeiger, die Grenze wieder eine Liste (Array), eine Liste der nennen sie alle die gleichen.
Dieser lange und mühsame Debatte bringt es mit einer Note entsprechend. Bei der Entwicklung von HTML / Javascript / CSS und vor allem in den Style Sheets, viel hängt davon ab, mit der Vision. Es ist nicht wirklich eine Regel gilt für jede Lösung. Die Möglichkeit, um zu sehen, das Projekt in seiner Gesamtheit kann helfen, mehr von den Regeln.
Verwandte Post
2 Kommentare » 
