CSS: Regeln, Selektoren und Stylesheets

Worum es geht

Skript 01b, Folien 23 bis 25: Cascading Style Sheets, Selektorregeln und das Einbinden externer Stylesheets.

Eine Seite soll ein einheitliches Aussehen bekommen, ohne dass man jedes Element einzeln gestaltet. Die Fragen dieses Abschnitts: Wie schreibt man eine Regel für das Aussehen? Wie sagt man, für welche Elemente sie gilt? Und wie bindet man die Regeln in viele Seiten ein?

So gehen wir vor:

Die zwei Regeln von Folie 23 lesen.
Die acht Selektorregeln von Folie 24 an einer Beispielseite ausprobieren.
Eine CSS-Datei einbinden, je Medium eine.
Eine Klausurfrage zum Üben.

Aufbau einer Regel

Skript · Aufbau

1selektor {2  eigenschaft: wert;3  eigenschaft: wert; }

CSS heißt Cascading Style Sheets: Stilregeln, die sich übereinander legen. Ein Stylesheet ist eine Sammlung von Formatierungsregeln. Jede Regel hat zwei Teile.

Vor der geschweiften Klammer steht der Selektor: Er wählt aus, für welche Elemente die Regel gilt. Hier ist es h1, also jede Überschrift erster Ebene. In den Klammern stehen Deklarationen der Form Eigenschaft: Wert;.

font-size: 24px macht die Schrift 24 Pixel hoch. color: #0000FF ist eine Farbe in Hex-Schreibweise: je zwei Ziffern für Rot, Grün und Blau. 00, 00, FF heißt: nur Blau, und zwar voll. text-align: center stellt den Text in die Mitte.

Eine Regel für eine Klasse

6p.student {7  width: 80%;8  border: 1px solid black;9  color: black;10  font-weight: bold;11  background-color: #eeeeee; }

p.student gilt nur für Absätze <p>, die im HTML class="student" tragen. Eine Klasse ist ein Name, den man beliebig vielen Elementen geben kann. Beide Absätze haben sie, also sehen beide gleich aus.

Die Regel macht sie 80 % so breit wie das umgebende Element, hier die Seite, gibt ihnen einen dünnen schwarzen Rahmen, fette schwarze Schrift und einen hellgrauen Hintergrund (#eeeeee). Ein Absatz ohne diese Klasse bliebe unverändert.

Merke: Das Aussehen steht an einer Stelle im CSS. Im HTML steht nur, was ein Teil ist, hier ein Student.

Schritt 0Worum es geht

Schritt 1Aufbau einer Regel

Schritt 2Eine Regel für eine Klasse

Abbildung 1Eine CSS-Regel

Worum es geht

Aufbau einer Regel

Eine Regel für eine Klasse