CSS für ganze Webs @ PS-Trainer

CSS ist die Realisierung der Idee, Formatierung aus der Web-Programmiersprache HTML herauszulösen und ihr als eigenes durchdachtes System in verbesserter Form wieder zur Verfügung zu stellen.

Auf dieser Seite finden sie Angaben, wie CSS-styles auf ganze Webs angewendet werden. Diese Technik ist die effizienteste der CSS-Technik. Man kann sie sowohl durch zusätzliche style-Objekte auf einzelnen Webseiten, als auch durch individuelle Formatierung einzelner Objekte ergänzen.

Herstellung eines Style-Sheets:

Ein Stylesheet ist eine eigene Text-Datei zur Definition von CSS-Elementen

Das Stylesheet enthält CSS-Elemente nach der beschriebenen Syntax, jedoch ohne die eingrenzenden <style> und </style>-tags.

Stylesheets werden mit <link>-tags in eine Webseite eingebunden.

Ein Stylesheet kann von beliebig vielen Webseiten verwendet werden, jede Webseite kann beliebig viele verschiedene Stylesheets einbinden

Muster für den Inhalt einer Stylesheet-Datei my.css

body {background-color:#E8E8E8; font-size:10pt;}
table {background-color:#CCFFFF;}
.mystyle {color:blue; font-weight:bold;}

Einbindung eines Stylesheets in eine Webseite :
Mit dem <link>-tag wird ein CSS-Stylesheet in eine Webseite eingebunden. Es befindet sich ebenso wie <style>-Objekte im <head> einer Webseite, und zwar noch vor denselben. Das <link>-tag steht "allein" und verwendet kein Abschluss-tag </link>. Die Attribute rel="stylesheet" und type="text/css" sind immer in dieser Form enthalten. Das Attribut href="..." gibt die externe CSS-Datei an. .

Beispiel:
<link rel=stylesheet type="text/css" href="my.css">
Mit diesem tag binden sie die Datei my.css in eine Webseite ein. Damit sind alle im Stylesheet definierten Styles für die gesamte Webseite wirksam bzw. verfügbar.

Praxis gängiger Web-Editoren:
Mit allen gängigen HTML-Editoren können sie Stylesheets erstellen und in Webseiten einbinden.

Konsultieren sie die eingebaute "Hilfe"-Funktionen um herauszubekommen, an welcher Stelle sie die jeweiligen Befehle finden. Stichworte: CSS, Styles

Tip:

Überlegen sie, welche Styles sie voraussichtlich für ihr gesamtes Web benötigen. Überschriften für Kapitel, Unterkapitel und Absätze, Bild-Unterschriften, Tabellen, Zitate, Links, ... Die einzelnen Styles sollen harmonisch zueinander passen - Stimmen sie Schrift, Größe, Farbe, Hintergrund, etc. aufeinander ab. Wenn sie noch wenig Erfahrung haben, dann können sie aus guten Webs, Zeitschriften etc. viele wertvolle Hinweise ableiten.

Ideal ist es, möglichst viele der Styles in ein externes Stylesheet zu integrieren. Das spart am meisten Arbeit und ist bei Bedarf besonders einfach und rasch zu ändern.

Als nächste Stufe folgen <style>-Objekte auf einzelnen Webseiten: Dort definieren sie alle jene Styles, die nur für diese eine Seite Bedeutung haben, die sie also zusätzlich zu den Styles des externen Stylesheets verwenden.

Wenn dann noch einzelne Objekte zur Formatierung übrig bleiben, dann formatieren sie diese individuell mit style-Attributen.

Aktuelle Daten dieser Seite	Letzte Änderung: