Undolog.com

nei fogli di stile. Hier sind einige kurze Tipps, wie Sie mit class und id in Stylesheets. Denken Sie daran, dass, sobald der Einsatz moderner JavaScript-Techniken wie die Verwendung von Ajax-Motoren können in Konflikt mit den hier gegebenen Ratschläge kommen! Und am Ende werden wir sehen, warum.

per legare un TAG ad uno stile, spesso si rimane confusi e non si capisce quale sia la differenza o, comunque, la scelta migliore tra i due. Mit der Verfügbarkeit von sowohl das Attribut class="" , dass das Attribut id="" zu einem TAG-Stil zu binden, ist oft verwirrt und verstehe nicht, was der Unterschied oder zumindest, die beste Wahl zwischen den beiden. Wahrlich, ein Tag mit der Klasse oder mit dem 'markiert id für die CSS ändert nichts, oder fast. Was ändert sich die Art, wie wir denken über die Seite und machen korrekte Verwendung von id und dann finden wir uns ohne Klassen, um die getroffenen Entscheidungen zu bereuen.

Ein Hinweis auf die Vererbung

Bevor ich möchte diese Gelegenheit nutzen, um ein wichtiges Verhalten, Stile oder coscading oder Erbschaft zu betonen. In der Praxis erbt ein Sub-Element die Eigenschaften der Eltern, sofern Sie nicht explizit angeben, dass es !important . Mal sehen, ein Beispiel, das dies verdeutlichen situative kann. Stellen Sie sich vor, dass Sie die folgende Stylesheet erstellt:

und den folgenden HTML-Code:

Als Ergebnis wird der Browser tatsächlich die gewünschte ist, wird der erste Absatz in der Schriftart 14 Pixel und der zweite Absatz mit der Schriftart bis 22 Pixel gemacht werden! Lassen Sie uns nun versuchen, Klasse statt ID verwenden:

HTML-Code:

Das Ergebnis im Browser (getestet auf IE6 und Firefox 1.5 +), wird dieses Mal anders sein! Was ist passiert? ha ereditato il font-size del primo div con id c_box . Das div mit class d_box geerbt font-size des ersten div mit id c_box . A id erfordert daher die Klassen "Töchter", um deren Attribute erben (obwohl dies nicht für alle Stile anwenden). nella classe d_box , come mostrato qui sotto: Zur Beseitigung des Problems muss deutlich gemacht werden, mit der Mechanik !important , der font-size -Klasse d_box , wie unten dargestellt:

Auf diese Weise aufzwingen zu berücksichtigen, den neuen Stil mit der Klasse definiert d_box .

Mit nur die Klassen:

HTML-Code:

Das Ergebnis wird sein, den Browser zu starten, werden beide Ziffern korrekt gerendert werden. Moral: so vorsichtig, wenn Sie Cascading Style ... wenn es wahr ist, dass es keinen unmittelbaren Unterschied zwischen Klassen und id 's auch wahr, dass sich ihr Einsatz nicht völlig identisch. Ansonsten, warum gibt es zwei Möglichkeiten der Adressierung?

Regel

Allerdings gibt es eine Möglichkeit zu wissen, wer "gewinnt", wenn Sie einen Stil festzulegen. Diese Technik wird normalerweise als Cascade Regel 3.
Es stellt einen Wert für jeden Wähler, oder Linie CSS-Deklarationen. Dieser Wert wird in der Form ABC.

1) add 1 bis A für jede id in der Auswahl
2) add 1 bis B für jede class in der Auswahl
3) add 1 bis C für jeden Tag in der Auswahl

Hier ein Beispiel:

Der höchste Wert gewinnt. Wenn zwei Regeln haben das gleiche Gewicht auf den letzten Satz zu gewinnen.

Beratung

Der Weg kann sein: die Klasse, wenn das visuelle Verhalten von einem TAG kann variieren in Abhängigkeit von seiner übergeordneten Container. Verwenden Sie id , wenn das visuelle Verhalten ist einzigartig, die unabhängig von der übergeordneten Container.

Das Verhalten eines hypothetischen Titel: Ein anschauliches Beispiel für diesen Ansatz könnten die folgenden sein. In diesem Fall werden wir die class="title" auf dem oberen Behälter auf und stellen Sie das Verhalten. Die CSS-Datei könnte sein:

In der Tat, auch sind die Dinge noch besser, weil wir die TAG haben H<em>n</em> , um uns zu helfen. In einem realen Fall die Klasse title nutzlos wäre. In der Praxis ist die Technik, um die Verwendung id als Selektoren von Verhalten (in der Tat, werden oft als id-Selektor genannt). Eine reale Situation könnte daher sein:

Wir haben drei unterschiedliche Verhaltensweisen je nach Schalterstellung. Die wichtigste Regel könnte lauten: Wenn dieser Tag wird unterschiedlich verhalten, je visuell mit dem Container class !

In dieser Serie unter anderem, enthält viele Elemente der visuellen Layout wie Listen ul . Diese können auf unterschiedliche Weise in Abhängigkeit von der Container-Mutter Ergebnis kann in der Navigationsleiste, ein weiteres auf der Hauptseite, und ein anderer in der Seitenleiste, etc. aussehen ... Aber was wir brauchen, in den meisten Fällen ist die nur Schalter id , mit der besten verfügbaren Standard-HTML-Tag.

quando si può, i TAG titolo H<em>n</em> , i TAG strong , acronym , code , insomma limitare div e span altrimenti rendiamo inutile l'uso degli stili, inondando inoltre la rete con bit supeflui. Zum Beispiel ist es ratsam, Listen verwenden, ul oder ol , wenn Sie können, den Titel-Tag H<em>n</em> , die TAG strong , acronym , code , begrenzen kurze div und span sonst unnötig machen die Verwendung von Stilen, auch eine Überlastung des Netzwerks mit Bit supeflui. Oft brauchen Sie nicht einmal wissen, alle HTML-Tags. Einige Web-Designer scheinen einige der nützlichsten Tag in der aktuellen HTML-Standard zu ignorieren. Sicherlich einige der TAG (sowie einige Attribute, Ereignisse, Stile und, ach, verschiedene andere Kleinigkeiten ...) sind der Standard von einigen bestimmten Browser beschränkt, aber es gibt viele TAG voll von praktisch allen bestehenden Browsern (einschließlich Safari unterstützt - apropos, aber Apple hat er vergessen, dass es einen eigenen Browser entwickelt?).

Style Sheets, noch, ach, unterliegen auch einige Missverständnisse hier und da verstreut. Web-Designer zu tun ist, warten und hoffen für die Zukunft weitere Standard-und weniger variabel. Verwenden Sie die id als Selektoren, kann daher nicht von allzu in ein Nebeneffekt bei der Verwendung von Javascript assoziiert zu unterlassen. Durch die Sprache am weitesten verbreitete Client-Seite, wenn es in Ihrem Browser aktiviert ist, können Sie einen Zeiger auf eine bestimmte Seite oder Tag erhalten. . Dies ist nun mit Leichtigkeit (vor einiger Zeit war etwas komplizierter, aufgrund der allgegenwärtigen Inkompatibilität zwischen Browsern!) Über die gelöst getElementByID() zur Verfügung gestellt durch das Objekt document .

dell'elemento. Als nach der gleichen Methode den Namen ersichtlich ist, getElementByID() ruft den Zeiger auf der Grundlage von " id des Elements. per rintracciare l'elemento. Das Problem hat mit Style Sheets zu tun ist, dass die " id in Frage genau das gleiche durch Verwendung getElementByID() , um das Element zu verfolgen. So vorstellen, dass eine Webanwendung, die eine Reihe von Post-it auf dem Bildschirm, wenn etwas mit der Verwaltung zu schreiben position:absolute auf. Dies bedeutet, dass post-it auf der Seite Noten könnte es eine unbestimmte Zahl von n. haben . Der Web-Designer, um das Stylesheet für dieses Objekt zu schreiben, nach unserer vorherigen Regel will wählen würde, um eine Verwendung div -Container und geben Sie ihr id="postIt" . Auf diese Weise würden wir folgen der Regel, wenn ein Post-it verhält sich nicht selbst in eine optisch unterscheiden sich je nach den übergeordneten Container. In unserer Spezifikation ist es eine Aufgabe ist einzigartig und daher richtig assoziieren eine " id . Das Problem kommt, wenn der JavaScript-Programmierer (die Zeichen in diesem MiniStore gibt 2 verschiedene, aber die Frage würde noch peinlich ... selbst für einen einzelnen Entwickler) versucht, einen Zeiger auf eine bestimmte obtain post-it! Es wird schnell klar, dass er nicht die ID als Diskriminator in dass, wenn es mehr Elemente auf der Seite mit der gleichen ID werden dann getElementByID() kann nicht einen einzelnen Zeiger kann der Grenzwert gibt eine Liste (Array), eine Liste der alle Elemente, die die gleiche Weise aufgerufen werden.

Diese lange und mühsame Diskussion mit sich bringt, eine Notiz entsprechend. Bei der Entwicklung von HTML / JavaScript / CSS und Style Sheets in allem hängt viel von der Gesamtsicht. Es gibt tatsächlich eine Regel, dass jede Lösung gilt. Die Möglichkeit, das Projekt in seiner Gesamtheit sehen können helfen, mehr von den Regeln festgelegt.

Dieser Artikel wurde nützlich für Sie?:

Loading ...

• 

• Tweet