Eine der besten Methoden zum Erlernen des Codierens von Websites ist das Betrachten der Quellcodes anderer Websites. Diese Praxis ist, wie viele Web-Profis ihr Handwerk gelernt haben, besonders in den Tagen, bevor es so viele Optionen für Webdesign-Kurse, Bücher und Online-Schulungsseiten gab.
Wenn Sie diese Praxis ausprobieren und sich die Cascading Style Sheets (CSS) einer Site ansehen, wird in diesem Code möglicherweise eine Zeile mit der Aufschrift! Wichtig angezeigt. Was bedeutet das und wie wichtig ist es, wie Sie diese Deklaration in Ihren Stylesheets korrekt verwenden?
Die Kaskade von CSS
Zunächst ist es wichtig zu verstehen, dass kaskadierende Stylesheets tatsächlich funktionieren Kaskade Das heißt, sie werden in eine bestimmte Reihenfolge gebracht. Im Allgemeinen bedeutet dies, dass die Stile in der Reihenfolge angewendet werden, in der sie vom Browser gelesen werden. Der erste Stil wird angewendet und dann der zweite und so weiter.
Wenn ein Stil oben in einem Stylesheet angezeigt wird und dann im Dokument nach unten geändert wird, ist die zweite Instanz dieses Stils diejenige, die in nachfolgenden Instanzen angewendet wird, nicht die erste. Wenn zwei Stile dasselbe sagen (was bedeutet, dass sie den gleichen Spezifitätsgrad haben), wird grundsätzlich der zuletzt genannte verwendet.
Nehmen wir zum Beispiel an, dass die folgenden Stile in einem Stylesheet enthalten waren. Der Absatztext wird in Schwarz dargestellt, obwohl die erste angewendete Stileigenschaft rot ist. Dies liegt daran, dass der "schwarze" Wert an zweiter Stelle steht. Da CSS von oben nach unten gelesen wird, ist der endgültige Stil "schwarz" und daher gewinnt dieser.
p {Farbe: rot; }p {Farbe: schwarz; }
Wie! Wichtig ändert die Priorität
Nachdem Sie nun verstanden haben, wie diese fast identischen Regeln von CSS verarbeitet werden, können wir uns ansehen, wie die! Important-Direktive etwas ändert.
Die! Wichtige Direktive beeinflusst die Art und Weise, in der Ihr CSS kaskadiert, während Sie die Regeln befolgen, die Sie für am wichtigsten halten und die angewendet werden sollten. Eine Regel mit der wichtigen Direktive wird immer angewendet, unabhängig davon, wo diese Regel im CSS-Dokument angezeigt wird.
Um den Absatztext immer rot zu machen, verwenden Sie aus dem obigen Beispiel:
p {Farbe: rot! wichtig; }p {Farbe: schwarz; }
Der gesamte Text wird jetzt rot angezeigt, obwohl der Wert "Schwarz" an zweiter Stelle steht. Die wichtige Direktive überschreibt die normalen Regeln der Kaskade und verleiht diesem Stil eine sehr hohe Spezifität.
Wenn Sie unbedingt benötigen, dass die Absätze rot erscheinen, würde dies dieser Stil tun. Dies bedeutet jedoch nicht, dass dies eine gute Praxis ist. Lassen Sie uns als nächstes betrachten, wann Sie! Wichtig einsetzen können und wann es nicht angebracht ist.
Wann verwenden! Wichtig!
Die! Important-Direktive ist sehr hilfreich, wenn Sie eine Website testen und debuggen. Wenn Sie nicht sicher sind, warum ein Stil nicht angewendet wird, und der Meinung ist, dass dies ein Problem der Spezifität sein kann, können Sie Ihrem Stil die wichtige Deklaration!
Wenn durch das Hinzufügen von! Das Stilproblem tatsächlich behoben wird, haben Sie gerade festgestellt, dass es sich um ein Spezifitätsproblem handelt. Den wichtigen Code möchten Sie jedoch nicht belassen, er wurde nur zu Testzwecken dort abgelegt.
Da der Test abgeschlossen ist, sollten Sie jetzt diese Direktive entfernen und Ihren Selektor so anpassen, dass er die Spezifität erreicht, die Sie benötigen, um Ihren Stil zum Laufen zu bringen. ! Important sollte nicht in Ihre Produktionsstätten gelangen, auch weil es die normale Kaskade verändert.
Wenn Sie sich zu sehr auf die! Wichtige Deklaration stützen, um die gewünschten Stile zu erreichen, haben Sie schließlich ein Stylesheet, das mit! Wichtigen Stilen übersät ist. Sie ändern grundlegend die Art und Weise, in der die CSS der Seite verarbeitet wird. Es ist eine faule Praxis, die aus langfristiger Sicht des Managements nicht gut ist.
Verwenden Sie! Wichtig für Tests oder in manchen Fällen, wenn Sie einen Inline-Stil, der Teil eines Designs oder Vorlagen-Frameworks ist, unbedingt überschreiben müssen. Verwenden Sie diesen Ansatz auch in diesen Fällen so sparsam wie möglich und versuchen Sie, reine Stylesheets zu schreiben, die die Kaskade verstehen.
Benutzer-Style-Sheets
Es gibt noch eine letzte Anmerkung zu der! Wichtigen Richtlinie, die für das Verständnis unerlässlich ist. Diese Direktive wurde auch eingeführt, um Webseitenbenutzern zu helfen, mit Stylesheets fertig zu werden, die das Verwenden oder Lesen von Seiten erschweren.
Wenn ein Benutzer ein Stylesheet zum Anzeigen von Webseiten definiert, wird dieses Stylesheet normalerweise durch das Stylesheet des Webseitenautors überschrieben. Wenn der Benutzer einen Stil als wichtig markiert, überschreibt dieser Stil das Stylesheet des Webseitenautors, auch wenn der Autor eine Regel als wichtig markiert hat.
Dies ist hilfreich für Benutzer, die Stile auf eine bestimmte Art einstellen müssen. Beispielsweise muss jemand die Standardschriftgröße auf allen von ihm verwendeten Webseiten erhöhen. Durch die sparsame Verwendung Ihrer! Wichtigen Direktive auf den von Ihnen erstellten Seiten können Sie auf die besonderen Bedürfnisse Ihrer Benutzer eingehen.
