Hier sind ein paar kurze Tipps zur Verwendung von class id in Style Sheets. Denken Sie daran, dass nun die Verwendung von Javascript fortgeschrittene Techniken, wie z. B. die Verwendung von Ajax-Engine, können sie in Konflikt mit den Empfehlungen, die hier! Und am Ende werden wir sehen, warum.
Da Sie haben, ist das Attribut class="" dass das Attribut id="" für das Befestigen ein Tag, um einen Stil, bleibt oft verwechselt und nicht verstehen, was ist der Unterschied, oder die beste Wahl zwischen den beiden. In Wahrheit berichtet von der TAG-Klasse oder über die id CSS ändert nichts, oder fast. Welche Veränderungen ist die Art, wie wir denken über die Seite und benutzen sie ordnungsgemäß id und dann finden wir uns ohne Klassen, Buße zu den Entscheidungen.
Eine Klarstellung auf erbliche
Vor Beginn möchte ich an dieser Stelle zu betonen, eine wichtige Stile, oder coscading oder Vererbung. In der Praxis, eine Untergruppe erbt die Eigenschaften des Vaters, es sei denn, Sie explizit festlegen, dass !important Hier ist ein Beispiel dafür, dass Mai Klärung dieser Situation. Stellen 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> Text direkt in erster a_box
</ p> <p> Nach dem Text unten b_box und sein Gesicht unter a_box
</ p> </ Div>
</ Div>
Das Ergebnis auf den Browser wird tatsächlich das sein, was Sie wollen, den ersten Absatz wird mit 14 Pixel Schrift und der zweite Absatz mit der Schrift auf 22 Pixel! Wir versuchen jetzt zu nutzen Klasse statt id:
CSS: :14px } # C_box p (font-size: 14px)
:22px } . D_box p (font-size: 22px)
HTML:
HTML: <p> Prime Text direkt unter c_box
</ p> <p> Nach dem Text unten d_box und 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? Die div mit Klasse d_box geerbt font-size der ersten div mit id c_box id dass die Klassen "Töchter" zu erben ihre Attribute (obwohl dies ist nicht gut für alle Stile). Um das Problem zu beseitigen müssen ausdrücklich Staat, mit dem !important die font-size Klasse d_box
CSS: :14px } # C_box p (font-size: 14px)
!important } . D_box p (font-size: 22px! Wichtig)
In dieser Art, wie wir auferlegen zu prüfen, den neuen Stil definiert durch die Klasse d_box
Mit nur Klassen:
CSS: :14px } . C_box p (font-size: 14px)
:22px } . D_box p (font-size: 22px)
HTML:
HTML: <p> Prime Text direkt unter c_box
</ p> <p> Nach dem Text unten d_box und sein Gesicht unter c_box
</ p> </ Div>
</ Div>
Das Ergebnis wird sein, dass die ursprüngliche Browser, die beide Ziffern werden korrekt gerendert. Moral: sehr sorgfältig und dann bei der Verwendung der Cascading Style ... wenn es stimmt, dass es keinen unmittelbaren Unterschied zwischen Klasse und id ist auch wahr, dass ihre Verwendung 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 genannte Cascade Regel 3.
Er enthält einen Wert für jeden Selektor, oder Linie deklaratorischen CSS. Dieser Wert wird in Form ABC.
1) hinzufügen 1 bis A für jede id in Selektor
2) fügen Sie 1 bis B für class Klasse in den Selektoren
3) hinzufügen 1 bis C für jeden Tag in Selektor
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 bis 2 = 102 - [p # Stelle largetext
- 3 = 113 - [ body p#largetext ul .mylist 1-1 - 3 = 113 - [p # Körper ul largetext. MyList
- 4 = 114 - [ body p#largetext ul .mylist li 1-1 - 4 = 114 - [p # Körper ul largetext. MyList sie
Der höchste Wert gewinnt. Wenn zwei Regeln haben das gleiche Gewicht, gewann den letzten definiert.
Empfehlungen
Eine Möglichkeit könnte sein: Verwenden Sie die Klasse, wenn das Verhalten eines visuellen TAG kann je nach seiner übergeordneten Container. Verwenden Sie id wenn der visuelle Verhalten ist einzigartig, das heißt, unabhängig von ihren übergeordneten Container.
Ein klares Beispiel für diesen Ansatz könnte das folgende: das Verhalten eines hypothetischen Titel. In diesem Fall werden wir die class="title" und unterliegen einer regelmäßigen Container, der die verschiedenen Verhaltensweisen. Die CSS-Datei könnte:
HTML: </ Code> <code> # listProducts. Titel (........ ) # Listusers. Titel (....... ) </ Code> </ div>
In der Realität, in der Tat, die Dinge sind noch besser, denn wir haben die TAG H n In einem echten Fall die Klasse title wäre nutzlos. In der Praxis der Technik ist die Verwendung der id als Selektoren Verhalten (in der Tat werden oft als id-Selektor). Einer realen Situation werden könnte:
HTML: </ Code> <code> # listProducts h1 (........ ) h1 (# Listusers ....... ) </ Code> </ div>
Wir haben drei verschiedene Effekte in Abhängigkeit von der Selektor. Die wichtigste Regel werden könnte: wenn diese visuell TAG verhalten wird auf verschiedene Arten in Abhängigkeit von der verwendeten class
In diesem Fall, unter anderem auch viele Elemente der visuellen Layout wie zum Beispiel Listen ul Diese führen kann auf verschiedene Arten in Abhängigkeit von der Container-Mutter kann dann schauen Sie in der Navigationsleiste, einem anderen auf der ersten Seite, noch eine weitere in der Seitenleiste, etc. ... Aber was wir brauchen, in den meisten Fällen, ist der einzige id mit der besten TAG Standard-HTML-Methoden zur Verfügung.
Zum Beispiel gute Regel ist die Verwendung von Listen ul oder ol wenn Sie können, im Rahmen des TAG H n die TAG code Code, Begrenzung der kurzen div und span sonst machen die unnötige Verwendung von Stilen, Überflutungen auch das Netzwerk mit Bit supeflui . Oft, in der Tat, wissen nicht einmal, alle HTML-Tags. Einige Web-Designer scheinen zu ignorieren einige der nützlichsten TAG in Standard-HTML. Sicherlich einige TAG (sowie bestimmte Eigenschaften, Ereignisse, Stile und, leider, andere verschiedene Sachen ...) sind nur in wenigen spezifischen Standard-Browser, aber es gibt viele TAG voll und ganz unterstützt von praktisch allen bestehenden Browsern (einschließlich Safari - apropos aber Apple hat vielleicht vergessen, dass es entwickelt hat seinen eigenen Browser?).
Die Style-Sheets, aber leider sind auch bis zu einem gewissen Missverständnis verstreut hier und da. Für Web-Designer nicht nur warten müssen, bis der Hoffnung für eine Zukunft Standard-und weniger variabel. Verwenden Sie die id als Selektoren können nicht von der Steuer befreit sich nicht zu, die in eine Nebenwirkung im Zusammenhang mit der Verwendung von Javascript. Durch die Sprache am häufigsten Client-Seite, falls aktiviert in Ihrem Browser, können Sie einen Zeiger auf eine bestimmte Seite oder TAG-Element. Dies ist nun gelöst mit Leichtigkeit (vor einiger Zeit war etwas komplexer, aufgrund der immer präsent Inkompatibilitäten zwischen den Browsern!) Durch die Methode getElementByID() zur Verfügung gestellt werden document dem document
Wie aus dem selben Namen der Methode, getElementByID() ruft den Zeiger auf der Grundlage der id des Elements. Das Problem hat zu tun mit CSS ist, dass die id in Frage ist die gleiche, die von getElementByID() das Element. Dann vorstellen, die zur Erstellung eines Web-Anwendung verwaltet, dass eine Reihe von Post-it auf dem Bildschirm, wenn überhaupt mit dem position:absolute aktiviert. Dies bedeutet, dass post-it auf der Seite, es könnte sich eine unbekannte Zahl von n. Der Web-Designer, die gerne schreiben das Stylesheet zu dieser, nach unserer früheren Regel wählen Sie würde für die Verwendung eines div und gib ihm eine id="postIt" In diesem Weg folgen wir der Regel, dass, wenn ein Post-it nicht mit sich selbst in ein visuell unterscheiden sich je nach den übergeordneten Container. In unserem Spezifikation ist es nur ein Objekt korrekt ist, und dann einen id Das Problem kam, wenn der Programmierer Javascript (die Zeichen dieser Ministore gibt 2 verschiedene, aber das Problem wäre peinlich auch für eine einzelne Entwickler ...) Versuche, um einen Zeiger auf einen bestimmten Post-it! Es wird bald realisieren, dass sie nicht verwenden können, die ID als diskriminierend, als ob die Seite enthält mehrere Artikel mit der gleichen ID dann getElementByID() nicht wieder einem einzigen Zeiger, die Grenze Mai Rückkehr eine Liste (Array), eine Liste von Elemente, die bekannt sind alle gleich.
Dieser lange und mühsame Debatte mit sich bringt eine Notiz werden. Bei der Entwicklung von HTML / JavaScript / CSS und vor allem in Form von Blättern von Stilen, viel hängt davon ab, mit der Vision. Es ist nicht wirklich eine Regel gilt für jede Lösung. Die Fähigkeit, um zu sehen, das Projekt in seiner Gesamtheit kann helfen mehr von den Regeln.
Verwandte Post
2 Kommentare " 
