Wie und wann kann man wichtige Regel in CSS verwenden
Wenn Sie versuchen, sich die Cascading Style Sheets (CSS) einer Website anzusehen, werden Sie im Code eine Zeile mit der Angabe !important bemerken. Ein solcher Begriff betrifft die Verarbeitungsprioritäten innerhalb des Stylesheets.
Cascading Style Sheets sind tatsächlich kaskadierend, d. h. sie befinden sich in einer bestimmten Reihenfolge. Die Stile werden in der Regel in der Reihenfolge angewendet, in der der Browser sie liest. Wende den ersten Stil an, dann den zweiten Stil usw.
Wenn also ein Stil oben in einem Stylesheet vorkommt und dann unten in der Datei liegt, dann ist das zweite Szenario dieses Stils dasjenige, das in nachfolgenden Instanzen angewendet wird, nicht das erste. Praktisch wird die zuletzt aufgeführte verwendet, wenn zwei Stile die gleiche Sache definieren (d. h. sie haben den gleichen Grad an Spezifität).
Stellen wir uns zum Beispiel vor, dass ein Style Sheet die folgenden Styles enthält.
p { color: green; }
p { color: black; }Obwohl die grüne Farbe auf den ersten Absatz angewendet wird, wird der Absatztext schwarz dargestellt. Der Grund dafür ist, dass der Wert "black" als zweiter angewendet wird. Da CSS von oben nach unten gelesen wird, ist das Fazit "black", so dass es gewinnt.
Nachfolgend wird es diskutiert, wie die Regel !important die Priorität ändert.
Wie kann man die Regel !important in CSS anwenden?
Die CSS-Regel !important fügt mehr Autorität (Wichtigkeit) hinzu als jede andere Eigenschaft. In CSS bedeutet !important , dass "es wichtig ist" und alle nachfolgenden Regel ignoriert werden müssen und die Regel !important verwendet wird. Diese Regel muss am Ende der Zeile, direkt vor dem Semikolon, stehen.
p {
color: green !important;
}Zum Ausgleich hat jedoch eine Deklaration !important (das Trennzeichen "!" und das Schlüsselwort "important" folgen der Deklaration) Vorrang vor einer normalen Deklaration. Sowohl Autoren- als auch Benutzer-Stylesheets können Deklarationen !important enthalten, und Benutzer-Regel !important überschreiben den Autor !important Rolle. Diese CSS-Funktion verbessert die Zugänglichkeit von Dokumenten, da Benutzer mit besonderen Anforderungen (große Schriften, Farbkombinationen usw.) die Kontrolle über die Präsentation haben.
Die Deklaration einer Shorthand-Eigenschaft (z. B. Farbe) !important ist gleichbedeutend mit der Deklaration aller ihrer Unter-Eigenschaften !important. Daher wird es verwendet, um die Stile zu überschreiben, die zuvor in anderen Stilen vertreten waren, um ein bestimmtes Design zu erstellen.
Lassen Sie uns ein Beispiel für mehr Klarheit sehen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-color: #1c87c9 !important;
background-color: #ffcc00;
}
h2 {
color: #8ebf42 ;
}
h2 {
color: #eeeeee !important;
}
</style>
</head>
<body>
<h2>W3docs</h2>
<p>W3docs bietet kostenloses Lernmaterial für Programmiersprachen wie HTML, CSS, Java Script, PHP usw an.</p>
</body>
</html>Im angegebenen Beispiel ist die Hintergrundfarbe des Körpers blau statt gelb und die Überschrift ist grau statt grün. Das hängt davon ab, dass die Regel !important angewendet wird.
Wann muss die Regel !important verwendet werden
Beim Testen und Debuggen einer Website ist die Deklaration !important sehr wichtig. Wenn Sie sich nicht sicher sind, warum ein Style nicht angewendet wird und Sie denken, dass es ein Spezifitätskonflikt sein könnte, fügen Sie die Deklaration !important zu Ihrem Style hinzu, um zu sehen, ob er dadurch behoben wird, und wenn ja, ändern Sie die Reihenfolge der Selektoren und entfernen Sie die Anweisungen !important aus Ihrem Produktionscode.
Sie werden schließlich ein Style Sheet haben, das mit Styles !important übersät ist, wenn Sie sich zu sehr auf die Anweisung !important stützen, um Ihre gewünschten Styles zu erreichen. Sie werden die Verarbeitung der CSS-Seite drastisch verändern. Das ist eine faule Praxis aus einer langfristigen Management-Sicht, die nicht nützlich ist.
Verwenden Sie !important zum Auschecken oder in einigen Fällen für Überschreiben von Inline-Stilen. Selbst in diesen Fällen muss man diese Technik sparsam einsetzen und als Ersatz saubere Style Sheets, die die Kaskade ehren, schreiben.
Wo ist es der richtige Ort, um die Regel !important anzuwenden?
In einigenn Fällen ist es in Ordnung, die Regel !important zu verwenden. Das sind die folgenden Fälle:
- Überschreiben von Styles in einem Benutzer-Stylesheet
Hier ist, wofür !important im ersten Punkt erstellt wurde: dem Benutzer die Möglichkeit zu geben, die Styles der Website zu überschreiben. Es wird viel von Convenience-Tools wie Screenreadern, Werbeblockern und mehr verwendet.
- Überschreiben von Drittanbieter-Code und Inline-Stilen
Man muss als Entwickler danach streben, so viel Kontrolle über Ihren Code wie möglich zu haben, aber es gibt Fälle, in denen Ihnen die Hände gebunden sind und Sie nur mit allem arbeiten müssen, was vorhanden ist. Verwenden Sie !important sparsam.
- Utility Cases
Möglicherweise ist ein guter Fall Utility Classes. Betrachten wir den Button. Wenn man einen Klassennamen wie .button auf deiner Website hat und auf einem Element es auch immer platziert, strebt man, dass dieses Element wie ein Button erscheint: genaue Schriftart, abgerundete Ecken, spezieller Hintergrund und Rahmen, alles, damit man den druckt:
Example
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 1px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<a href="#" class="button">BUTTON</a>
</body>
</html>Die Spezifität dafür ist 0,0,1,1,0. Sobald dieses Element einen anderen Selektor hat, der es beeinflusst, der eine höhere Spezifität hat, können Sie solche Stylingprobleme haben:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9;
color: white;
font-weight: bold;
padding: 5px;
border-radius: 4px;
border: 3px solid #666;
text-decoration: none;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a
<a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>Dann können wir sehen, dass die Tasten, die ein bestimmtes Design haben, einen gestrichelten grünen unteren Rand haben, was nicht das ist, was wir erwartet haben. Es ist einfach und oft perfekt gültig, einen CSS-Selektor einzustellen, der einen höheren Spezifitätswert als 0,0,1,0 hat und einen Button zufällig verschraubt.
Ich möchte Ihre Button-Klasse höher machen und nicht einfach mit ändern, stellen Sie die Regel !important auf die Werte, die vorteilhaft sein sollen. Hier ist ein Beispiel, wo der Button mit dem Regel !important erstellt wurde.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#mybutton a {
border-bottom: 3px dashed #8ebf42;
}
.button {
background: #1c87c9 !important;
color: white !important;
font-weight: bold !important;
padding: 5px !important;
border-radius: 4px !important;
border: 3px solid #666 !important;
text-decoration: none !important;
}
</style>
</head>
<body>
<section id="mybutton">
<p>This is a <a href="#" class="button">BUTTON</a>
</p>
</section>
</body>
</html>Benutzer-Stylesheets
Diese Direktive wurde zusätzlich eingeführt, um Webseitenbenutzern zu helfen, mit Style Sheets umzugehen, die es ihnen schwer machen, Seiten zu verwenden oder zu lesen.
Wenn jemand ein Style Sheet zum Anzeigen von Webseiten definiert, wird das Style Sheet vom Style Sheet des Seitenautors überschrieben. Wenn der Benutzer einen Style als !important markiert, überschreibt dieser Style das Style Sheet des Webseitenautors, auch wenn der Autor eine Regel wie !important wählt.
Diese Struktur ist für Benutzer nützlich, die irgendwie Stile einstellen müssen. So kann es beispielsweise sein, dass ein sehbehinderter Leser auf allen von ihm genutzten Webseiten die Standardschriftgrößen erhöhen muss. Beim Verwenden der Direktive !important innerhalb der von Ihnen erstellten Seiten, stellen Sie die individuellen Anforderungen Ihrer Benutzer sicher.