Was Cascading Stylesheets machen

Aufbau und Aussehen

HTML ist eine Textbeschreibungssprache. Wenn man also ein Stück Text vor sich hat, kann man es mit Hilfe von HTML- Tags strukturieren. Die Textstruktur ist eigentlich nicht mit ihrem Aussehen verbunden. Die HTML Tags sollten einen Text nur nach verschiedenen Textarten gliedern. Um die einzelnen Abschnitte zu gestalten gibt es CSS - Cascading Style Sheets. CSS ist eine Sprache, mit der man das Aussehen einzelner HTML- Elemente bestimmen kann. Auch HTML bietet verschiedene Möglichkeiten, das Aussehen eines Textes zu gestalten. Mit den Tags kann die Schrift (engl. Font) in Größe, Farbe und Art festgelegt werden. Verglichen mit HTML gibt es mit CSS jedoch viel mehr und viel genauere Möglichkeiten!

Internes oder externes Stylesheet

Die Idee von CSS ist, dass das Aussehen eines Textes in einem extra Bereich, dem Stylesheet beschrieben wird. Auf drei verschiedene Arten kann Stylesheet mit HTML verbunden werden: Ist das Stylesheet in einem HTML- Dokument angelegt, spricht man von einem internen oder eingebetteten Stylesheet. Interne Stylesheets können als style-elemente direkt den HTML- Elementen in den Tags zugeordnet werden oder als style-Attribute sich auf die Attribute der Tags beziehen.

Als externes Stylesheet wird das Stylesheet als eigene Datei ausgelagert. Das hört sich umständlich an, hat aber einen sehr großen Vorteil! Die Angaben über das Aussehen des Dokumentes müssen nur einmal, nämlich auf dem externen Stylesheet erstellt werden. Sie gelten jedoch für das gesamte Dokument. Beim internen Stylesheet müsste man die Stylesheet-Angaben auf jeder HTML- Seite anbringen. Besonders praktisch ist das externe Stylesheet, wenn man etwas ändern will. Das erledigt man dann auf dem externen Stylesheet einmal, während man bei internen Stylesheet sich mühsam Seite für Seite voran arbeiten müsste.

Aufbau des Stylesheets

Eine Stylesheet-Angabe setzt sich aus der Eigenschaft (was man gestalten möchte) und dem Wert oder einem Schlüsselwort (z.B. Farbangaben) zusammen – dazwischen steht ein Doppelpunkt.

Eingeleitet wird CSS immer durch den Tag <style type="text/css"> dann folgen die Angaben – beendet wird der Tag mit </style>. Durch CSS kann man für die Website (oder andere Textdokumente) eine Formatvorlage erstellen. Dabei definiert man Eigenschaften für bestimmte Gruppen von HTML- Elementen. Für die Auswahl der Gruppen gibt es die Selektoren. Sie sind die Verbindung zwischen dem CSS beschreibenden Teil eines Dokuments und dem Teil, der formatiert werden soll. Gleich nach dem style-Tag folgt der Selektor mit den jeweiligen Angaben in geschweiften Klammern: Selektor {Stylesheet-Angaben}

Man unterscheidet drei Arten von Selektoren. Durch den Universal-Selektor werden alle HTML- Elemente mit Stylesheet-Angaben verbunden. Er wird durch ein Sternchen * dargestellt.

Der Typ-Selektor verknüpft einen HTML Tag mit einer Formatierung. Im folgenden Beispiel ist das der Tag <h1> für die Überschrift.

Mit dem class-Selektor können verschiedene „Klassen“ von HTML Tags angelegt werden. Soll es in einem Dokument z.B. verschiedene Arten von Überschriften geben, dann kann man sie über den class-Selektor unterscheiden. Den Namen der Klasse kann man sich selbst aussuchen.

Aussehen, n – зовнішній вигляд;

Gliedern – розділяти;

Gestalten – оформлювати, надавати вигляду;

Schrift, f – шрифт;

Verglichen mit – порівняно з ..;

Intern / ingebettet – внутрішній, вбудований;

Extern – зовнішній;

Ausgelagert – виносити за межі;

umständlich – детальний, ґрунтовний;

anhören – здається;

anbringen – встановлювати, приєднувати;

Eigenschaft, f – якість, властивість;

Einleiten – починати;

Formatvorlage, f – зразок формату;

Anlegen – планувати, створювати;