Überprüfen der Prioritätsstufe des CSS-Stils

Das Cascading Style Sheet (CSS) Ich denke, es ist die einfachste Sprache im Vergleich zu anderen Web-bezogenen Sprachen. Daher ist es nicht verwunderlich, dass viele Leute, die gerade erst anfangen zu lernen, wie man eine Website erstellt, diese Sprache und HTML zuerst lernen.

In diesem Beitrag kehren wir zu den CSS-Grundlagen zurück. Wir werden prüfen, wie die CSS-Stile anfänglich angewendet werden, welche Stile angewendet werden und wie Deklarationen von Stilen einander überschreiben, andere jedoch nicht.

Daher ist dieser Beitrag speziell für Anfänger gedacht, die gerade erst anfangen, die Herausforderungen zu meistern, und dabei wahrscheinlich noch Fehler und Fehler beim Erstellen ihres ersten Stylesheets machen. Also fangen wir einfach an.

Standard-Browser-Stile

Firefox, Chrome, Safari, Opera und Internet Explorer sind derzeit die fünf wichtigsten Desktop-Browser auf dem Markt. Diese Browser und alle anderen Browser folgen einer Standardregel, die integrierte Standardstile zum Rendern der HTML-Elemente enthält.

Wenn Sie also zufällige HTML-Elemente ohne hinzugefügte Stile einfügen, werden Sie feststellen, dass sie immer noch ordnungsgemäß im Browser gerendert werden.

Wenn wir dieses Element jedoch sorgfältig prüfen, hat jeder Browser (etwas) unterschiedliche Werte für sein Element “Standard” Deklaration, die zu Inkonsistenzen zwischen den Browsern führt, insbesondere bei den alten Browsern IE6, 7 und Firefox 3.0.

Wie Sie beispielsweise auf dem obigen Screenshot sehen können, hat der neueste Firefox den gerendert Blockquote standardmäßig mit Rand: 16px 40px 16px 40px, während auf der anderen Seite der Internet Explorer 7 wird rendern Blockquote mit Marge: 0px 40px.

Um die oben gezeigten Inkonsistenzen zu überwinden, ziehen es viele Webdesigner und Entwickler vor, alle diese Stile mit zu überschreiben CSS Reset. Diese CSS-Datei enthält im Allgemeinen fast alles HTML Art Selektoren, definieren sie mit gleichen Regeln.

Es gibt viele CSS-Reset-Funktionen, aber hier sind meine drei Favoriten:

• Normalize.css
• CSS Reset
• HTML5-Stylesheet zurücksetzen

Selektoren

Sie werden diesen Begriff in den von Ihnen besuchten Blogs für Webdesign / -entwicklung häufig lesen. Selektoren.

Die Auswahl in CSS ist die Syntax, mit der alle Teile des HTML-Dokuments für die Stile bestimmt werden, auf die angewendet werden soll. Es gibt drei grundlegende Selektoren, die wir hier diskutieren werden, da es sich wahrscheinlich um die üblichen Selektoren handelt, die auf Ihrer ersten Website verwendet werden. Wir werden andere in zukünftigen Posts behandeln.

Typenauswahl

Wir haben oben bereits erwähnt, dass der Typselektor alle angegebenen HTML-Elemente im Dokument anvisiert. Zum Beispiel:

 p / ** Deklaration ** / 

wird alle entsprechen p oder der Absatz Elemente und deren Verwendung überschreiben schließlich die von den Browsern angegebenen Standardstile.

Klassenauswahl

Wenn Sie einem Element eine Klasse oder sogar viele Klassen hinzugefügt haben, können Sie auch diese Klassen anvisieren. Das Klassenauswahl beginnt mit a Punkt Parameter.

 .Kästchen / ** Deklaration ** / 

Das obige Snippet stimmt mit allen Elementen überein, die über die Box-Klasse verfügen, oder wir können auch spezifischer auswählen.

 p.box / ** Deklaration ** / 

Es wird nur das Ziel sein p Element, das die hat Box Klasse.

Wenn wir das verwenden Klasse Selektor, alle die gleichen Stildeklarationen aus beiden Art Wahlschalter und die Standardbrowser wird überschrieben.

ID-Auswahl

Das ICH WÜRDE ist ein sehr restriktives Attribut, wir können nur ein Attribut haben Ich würde auf einem Element und es muss auch eindeutig sein.

 
Inhalt
 

Falls wir eine haben Ich würde In einem Element können wir das verwenden ID-Wahlschalter dieses Element anvisieren; Der ID-Selektor wird mit einem Hash definiert # Parameter.

 #uniqueID / ** Deklaration ** / 

Seit der ICH WÜRDE ist einzigartig, es hat die stärkste Prioritätsstufe des Selektortyps. Also, wenn wir Stile mit deklarieren ICH WÜRDE Selector überschreibt letztlich alle die gleiche Deklaration aus dem Klasse, Art Selektoren und die Standardbrowser Stile.

Stile einbetten

Wir haben alle wesentlichen Auswahlmöglichkeiten durchlaufen und untersuchen nun, wie diese Stile in ein HTML-Dokument eingebettet werden.

Externe Stile

Externe Stile sind Stile, die in einer separaten Datei hinzugefügt werden, normalerweise in einer .css Datei, die dann mit dem HTML-Dokument verknüpft wird Tag, um diese Stile anzuwenden.

Und alle in den Dateien deklarierten Stile verhalten sich wie in der Selektoren Abschnitt oben, dh es wird hauptsächlich überschrieben der Standardbrowser style und überschreiben Sie diese in einer anderen Style-Deklaration, je nach Prioritätsstufe der Selektoren.

Diese Vorgehensweise ist die empfohlene Methode zum Anhängen der Stile, insbesondere wenn Sie Tausende CSS-Codezeilen mit vielen Seiten zum Anhängen haben.

Auf diese Weise können die Stile auch leicht verwaltet werden. Beispielsweise können Sie die CSS-Dateien je nach ihrer spezifischen Rolle in mehrere Dateien aufteilen, z. B. typography.css, um alle mit Typografie zusammenhängenden Stile usw. zu steuern.

Interne Stile

Die internen Stile sind die Stile, die direkt in ein HTML-Dokument eingebettet werden, im Allgemeinen im Etikett.

Diese Vorgehensweise wird jedoch nicht empfohlen, wenn Sie Hunderte von Stilzeilen haben, da Ihre HTML-Seite zu lang ist und der Stil nur die Position der Stile beeinflusst. Wenn Sie zehn Seiten sagen lassen, müssen Sie diese Stile kopieren und in alle Seiten einbetten. Wenn Sie die Stile ändern müssen, müssen Sie sie auf zehn verschiedene Seiten ändern. Dies ist offensichtlich eine langwierige Aufgabe.

Je nach Prioritätsstufe ist der interne Stil höher, sodass die externen Stile überschrieben werden.

Inline-Styles

Inline-Stile sind die Stile, die direkt in das HTML-Element eingebettet sind.

 
Dies ist ein Absatz
 

Dieses Beispiel oben wird hinzufügen 5px Marge für das Absatzelement, und es werden auch die Ränder überschrieben, die für dieses Element sowohl in internen als auch in externen Stilen deklariert wurden.

Aber vermeiden Sie dies, da Ihr Markup mit all diesen Stildeklarationen überladen wird. Wenn Sie eine Reihe von Stilen eingebettet haben, wird es sogar zum Albtraum, alle HTML-Dateien und Stile zu sehen und zu verwalten.

Lesen Sie weiter: Drei Möglichkeiten zum Einfügen von CSS - W3CSchools.

Die! Wichtige Regel

Es gibt einige Umstände, unter denen wir einen bestimmten Stil für ein Element anwenden müssen, aber derselbe Stil für dieses Element wurde auch an anderer Stelle im Stylesheet oder im Dokument deklariert. Zum Beispiel:

Wir haben das folgende Anker-Tag mit eingebetteten Stilen

 Dies ist ein Link 

Und wir haben auch einen separaten Stil für dieses Anker-Tag im Stylesheet.

 a border: 1px solid # 333; Hintergrundfarbe: # 555;  

In diesem Beispiel können wir das verwenden !wichtig Regel, um den Browser zu zwingen, die Stile im Stylesheet anstelle des Stils im Element zu verwenden.

 a border: 1px solid # 333! wichtig; Hintergrundfarbe: # 555! wichtig;  

Das !wichtig Die Regel zeigt an, dass dieser Stil am meisten ist wichtig und muss auf den anderen Stil angewendet werden, auch wenn er direkt in das Element eingebettet ist (Inline-Styles).

Lesen Sie weiter:! wichtige CSS-Deklarationen: Wie und wann sollten sie verwendet werden - Smashing Magazine.

Fazit

Wir haben den gesamten Gegenstand dieses Artikels durchlaufen. Wir können jetzt sehen, dass jeder Selektor und die Art, wie wir die Stile einbetten, unterschiedliche Prioritätsstufen im Browser-Mechanismus haben. Wie bereits erwähnt, sind diese Themen für Anfänger gedacht und für erfahrene Webdesigner definitiv nicht neu.

Ich denke jedoch, dass jeder Webdesigner im Allgemeinen zustimmen wird, dass es manchmal notwendig ist, zu den Grundlagen zurückzukehren, um unser grundlegendes Wissen über ein Thema zu überprüfen. Tatsächlich vermissen wir oft einige der grundlegenden Dinge, da wir von beeindruckenden (und verrückten) Sachen wie diesem eher beeindruckt sind.

Zum Schluss habe ich eine Demo- und Quelldatei für Sie bereitgestellt, um unsere Diskussion in diesem Artikel weiter zu untersuchen.

• Demo
• Quelle herunterladen

Ich hoffe, Ihnen gefällt dieser Beitrag, und wenn Sie Ungenauigkeiten darin finden oder einige wichtige Punkte übersehen haben, zögern Sie nicht, mich in den Kommentaren unten zu benachrichtigen.