Eine der besten Möglichkeiten, um zu lernen, wie man Websites codiert, ist das Betrachten der Quellcodes von anderen Websites. Diese Praxis ist, wie viele Web-Profis ihr Handwerk erlernt haben, besonders in den Tagen, bevor es so viele Möglichkeiten für Web-Design Kurse, Bücher und Online-Schulungsseiten.
Wenn Sie diese Vorgehensweise ausprobieren und sich die Cascading Stylesheets einer Site ansehen, sehen Sie in diesem Code möglicherweise eine Zeile mit der Aufschrift !wichtig. Dieser Begriff ändert die Priorität der Verarbeitung innerhalb des Stylesheets.
Die CSS-Kaskade
Cascading Stylesheets tun in der Tat Kaskade, was bedeutet, dass sie in einer bestimmten Reihenfolge angeordnet sind. Im Allgemeinen werden die Stile in der Reihenfolge angewendet, in der sie vom Browser gelesen werden. Der erste Stil wird angewendet, dann der zweite und so weiter.
Wenn ein Stil am oberen Rand eines Stylesheets erscheint und dann weiter unten im Dokument geändert wird, wird die zweite Instanz dieses Stils diejenige, die in den nachfolgenden Instanzen angewendet wird, nicht die erste. Wenn zwei Stile dasselbe sagen (dh sie haben die gleiche Spezifität), wird der zuletzt aufgeführte verwendet.
Stellen wir uns beispielsweise vor, dass die folgenden Stile in einem Stylesheet enthalten sind. Der Absatztext wird schwarz gerendert, obwohl die erste angewendete Stileigenschaft rot ist. Dies liegt daran, dass der Wert "schwarz" an zweiter Stelle aufgeführt wird. 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 die Priorität ändert
Das !wichtig Direktive beeinflusst die Art und Weise, wie Ihr CSS kaskadiert, während Sie die Regeln befolgen, die Sie für am wichtigsten halten und anwenden sollten. Eine Regel mit dieser Direktive wird immer angewendet, egal wo diese Regel im CSS-Dokument erscheint.
Um den Absatztext aus dem vorherigen Beispiel immer rot zu machen, ändern Sie den Stil wie folgt:
p { Farbe: rot !wichtig; }
p {Farbe: schwarz; }
Jetzt wird der gesamte Text in Rot angezeigt, obwohl der "schwarze" Wert an zweiter Stelle aufgeführt ist. Die Direktive !important überschreibt die normalen Regeln der Kaskade und verleiht diesem Stil eine sehr hohe Spezifität.
Wenn die Absätze unbedingt rot angezeigt werden müssen, reicht dieser Stil aus, aber das bedeutet nicht, dass dies eine gute Vorgehensweise ist.
Wann zu verwenden !wichtig
Die Direktive !important ist hilfreich, wenn Sie eine Website testen und debuggen. Wenn Sie sich nicht sicher sind, warum ein Stil nicht angewendet wird, und glauben, dass es sich um einen Spezifitätskonflikt handelt, fügen Sie die !wichtige Deklaration zu Ihrem. hinzu style, um zu sehen, ob das Problem dadurch behoben wird – und wenn dies der Fall ist, ändern Sie die Reihenfolge der Selektoren und entfernen Sie die !wichtigen Anweisungen aus Ihrer Produktion Code.
Wenn Sie sich zu stark auf die !important-Deklaration verlassen, um Ihre gewünschten Stile zu erreichen, haben Sie schließlich ein Stylesheet, das mit !wichtigen Stilen übersät ist. Sie werden die Art und Weise, wie das CSS der Seite verarbeitet wird, grundlegend ändern. Es ist eine faule Praxis, die aus Sicht des langfristigen Managements nicht gut ist.
Verwenden Sie !important zum Testen oder in einigen Fällen, wenn Sie unbedingt einen Inline-Stil überschreiben müssen, der Teil eines Theme- oder Template-Frameworks ist. Verwenden Sie diesen Ansatz auch in diesen Fällen sparsam und schreiben Sie stattdessen saubere Stylesheets, die die Kaskade.
Benutzer-Stylesheets
Diese Richtlinie wurde auch eingeführt, um Webseitenbenutzern zu helfen, mit Stylesheets umzugehen, die die Verwendung oder das Lesen von Seiten für sie erschweren.
Wann jemand definiert ein Stylesheet um Webseiten anzuzeigen, wird dieses Stylesheet vom Stylesheet des Seitenautors überschrieben. Wenn der Benutzer einen Stil als !wichtig markiert, setzt dieser Stil das Stylesheet des Webseitenautors außer Kraft, selbst wenn der Autor eine Regel als !wichtig markiert.
Diese Hierarchie ist hilfreich für Benutzer, die Stile auf eine bestimmte Weise festlegen müssen. Beispielsweise muss ein sehbehinderter Leser möglicherweise die Standardschriftgrößen auf allen von ihm verwendeten Webseiten erhöhen. Indem Sie Ihre !important-Anweisung sparsam auf den von Ihnen erstellten Seiten verwenden, erfüllen Sie die individuellen Bedürfnisse Ihrer Leser.