INT

Internet-Technik

CSS

Specificity

Für die erfolgreiche Arbeit mit CSS genügen normalerweise einige wenige Grundregeln.

Userangaben überschreiben Browser-Defaults.

Spezifischere Regeln über­schreiben allgemeinere.

In Wahrheit aber gibt es ein komplexes Regelwerk, das festlegt, wann welche Angaben umgesetzt werden.

Zunächst einmal gilt für jede Seite das user-agent-stylesheet, der Browser-Default.

Jede von euch definierte CSS-Regel überschreibt diesen Default.

Gilt für ein Element keine eigene Regel, greift die des nächsten Parent-Elements, zB. die von <ul> für <li>

Spätere Regeln in der CSS-Datei haben eine höhere Priorität, zB.

				
					.betont { color: red; }
					.betont { color: blue; }

Spezifischere Angaben überschreiben allgemeine, zB.

				
					p { color: black; }
					.header p { color: blue; }

CSS betrifft alle Medien­typen, ausser anders angegeben.

Media Type

		
			<link rel="stylesheet" href="stil.css" />

			<link rel="stylesheet" href="stil.css" media="screen" />

			<link rel="stylesheet" href="stil.css" media="print" />

Direkt als HTML-Attribut angegebene Regeln haben ebenfalls Vorrang.

Inline Styles

		
			<p>Bla bla.</p>

			<p style="color: blue;">Bla bla.</p>

*Record Scratch*
*Freeze Frame*

Halt! Selektor-Specificity?

Was bedeutet das? Wie spezifisch sind meine Selektoren überhaupt?

				
					img { … }
					div.nav li a img { … }
					#content p img { … }

1000

Für Angaben im style-Attribut

<p style="color: red;">Bla bla.</p>

100

Für jede ID im Selektor

#content

10

Für jede Class, Pseudo-Class
oder Attribute-Selektor

.heading :hover input[type="text"]

1

Für Elemente

p div li

Die Summe ergibt die Spezifischkeit (?) des Selektors.

Zum Beispiel
ul#nav li.active a { … }


0113

Zum Beispiel
body.ie7 .col_3 h2 + p { … }


0023

Zum Beispiel
#header #nav a { … }


0201

Teste dein Wissen im CSS Diner!

Referenz