Upline: Infos & Dokus Programmierung Webentwicklung

css - Cascading Stylesheet HowTo

Da Stylesheets mittlerweile das Wichtigste überhaupt beim Layout einer Seite sind und man damit so einige Unterschiede in der Seitendarstellung durch die aktuellen Browsern ausgleichen kann, kann sich eigentlich niemand mehr diesem Thema entziehen. Es sei denn, man legt ausschließlich Wert auf den Inhalt, wie es gerade in wissenschaftlichen Abhandlungen zumeist der Fall ist. Auch die kunterbunten Seiten mit Javascript, Java und Flash nutzen oft zusätzlich die Möglichkeiten der Stylesheets. Wer ein professionelles und wirklich gutes Layout erstellen möchte, der sollte sich umsehen und gucken, wie es andere machen. Anschließend ist es ein Leichtes, sich bis auf das dort verwendete Niveau hochzuarbeiten. Dieses css-Howto soll auch nur einen Einstieg vermitteln und keineswegs eine komplette Abhandlung des Themas sein. Beachten sollte man hierbei auch, dass jeder Browser seine Eigenarten hat und nicht immer alles unterstützt wird, was die aktuellen Standards vorschreiben.

Lokale Stylesheet Definitionen

Man kann Stylsheets lokal innerhalb eines jeden html-Tags definieren. Zu Übungszwecken oder in Sonderfällen mag das ok sein, grundlegend ist diese interne Stylesheet-Definitionsart jedoch nicht empfehlenswert. Man verliert hierdurch die Flexibilität, die man mit projektweit definierten Stylesheets und dem dadurch einfacheren Gesamtloyout zur Verfügung hat.
Um einen Stylesheet intern in einem html-Tag zu definieren, verwendet man am Beispiel des div-Tag gezeigt folgende Schreibweise:

<div type="text/css" style="Eigenschaft1:Wert1;Eigenschaft2:Wert2;...>
 die css-Ausgabe
</div>

Wenn man diese Eigenschaften einmal genau betrachtet, wird man einen Zusammenhang mit der heute gängigen objektorientierten Programmierung feststellen können. Auch hier werden Objekteigenschaften genannt und diesen je nach Bedarf Werte zugewiesen.

Ein Beispiel, in dem einige altbekannte html-Befehle den Wünschen entsprechend umdefiniert werden:

<b type="text/css" style="font-size:8pt;color:brown">
 b-Tag in braun als lokaler Stylesheet
</b>
<i type="text/css" style="font-size:12pt;color:red">
 i-Tag in blau als lokaler Stylesheet
</i>
<p type="text/css" style="border:solid;border-width:1;text-align:center;font-size:8pt;color:ff0000">
 p-Tag in rot als lokaler Stylesheet mit Rahmen
</p>

Das Ergebnis

Aus dem Beispiel ist bereits ersichtlich, dass man problemlos Schriftarten, -größe und -farbe ändern kann, ebenso wie die Ausrichtung oder Rahmeneigenschaften. Auch Unterstreichungen, Fettschrift usw. sind mit Stylesheets möglich. Dies ist auch einer der Gründe, weshalb man in den xhtml-Standards Tags wie b, i, u, center und font nicht mehr vorfindet. Die damit möglichen Hervorhebungen im Layout einer Seite können auch komplett per css umgesetzt werden. Die eben erwähnten Tags werden zwar noch von allen Browsern problemlos interpretiert, laut Spezifikation ist dies bei strict-xhtml 1.1 nicht mehr vorgesehen, bei Nutzung von transitionel-html oder xhtml 1.1 ist dies jedoch auch laut css-Spezifikation kein Problem.

Globale Stylesheet-Definitionen

Ebenfalls direkt innherhalb einer html-Datei kann man Stylesheets auch im Kopfbereich eines Dokumentes definieren. Hiermit lassen sich bereits einige sonst wiederholt auftauchende Formatierungen zusammenfassen. Hierbei kann man bereits zwei verschiedene Varianten nutzen - zum einen ist es möglich, Eigenschaften bestimmter html-Tags übergreifend zu ändern, zum anderen kann man aber auch Definitionen nur für bestimmte Tags durchführen. Hierbei stehen Klassendefinitionen und Definitionen für Individualformate zur Verfügung. Auch eine Verschachtelung ist möglich. Die zentral im Kopfbereich festgelegten Styles werden wie folgt eingebunden:

<html><head><title>Titel der Datei</title>
 <style type="text/css">
  p{font-size:12px;color:#a000e0;}
 </style>
</head>
<body>
 <p>dder geänderte Absatzstil</p>
</body>
</html>

An den folgenden kurzen Beispielen werden die unterschiedlichen Möglichkeiten der Verwendung von Klassen usw. vorgestellt:

html-Tags allgemein umdefinieren: p{color:#a000e0;}
Verschachtelung von html-Elementen umdefinieren: p i{color:#a000e0;} - Hat man einen Absatz mit p, in dem ein kursiver Bereich mit i gebildet wird, so wird innerhalb dieses kursiven Bereiches die geänderte Schriftfarbe verwendet.
Klassendefinition: .hellrot{color:#ffb0b0;} - Diese CSS-Definition ermöglicht es, innerhalb eines beliebigen html-Befehls mit class="hellrot" die geänderte Farbe zu verwenden.
Klassendefinition für bestimmte html-Elemente: p.hellrot{color:#ffb0b0;} - Durch diese Definition steht nur innerhalb eines p-Tags die Klasse hellrot zur Verfügung.
Individualdefinition: #hellrot{color:#ffb0b0;} - So definierte Formatierungen lassen sich mit Hilfe des Universalattributs id analog zur Einbindung von Klassen über das Universalattribut class verwenden.
Individualdefinition für bestimmte html-Elemente: p#hellrot{color:#ffb0b0;} - Wird nach einer solchen Stylesheet-Festlegung ein Absatz mit <p id="hellrot"> eingeleitet, so wird die enthaltene Schrift in hellrot dargestellt.

Ob man sich für die Nutzung von class oder id entscheidet oder ob man beides parallel verwendet, ist eigentlich jedem selbst überlassen. Nahezu alle heute verwendeten Browser unterstützen all diese Möglichkeiten problemlos. Jedoch hat jeder Browser seine spezifischen Voreinstellungen für die html-Elemente, die sich durchaus stark unterschieden können und nicht jede Anpassung funktioniert auf Anhieb in jedem der aktuellen Browser so wie erwartet. Grundsätzlich empfiehlt es sich daher, die vorgenommenen Änderungen in den beiden momentan am stärksten verbreiten Browsern parallel zu betrachten. Mit Stand Mitte 2006 decken der Internet Explorer 6.0 und der Firefox 1.5 über 80% des deutschen Browsermarktes ab.
An dieser Stelle wird auf direkte Beispiele zu den globalen Stylesheets verzichtet, da mit Hilfe der externen Stylesheetdateien auf ähnliche Weise css-Formatierungen ermöglicht werden und aus den entsprechenden Beispielen die Vorgehensweise und die Ergebnisse ebenfalls entnommen werden können.

Externe Stylesheet Datei

Für eine Seite, die auf all ihren Unterseiten ein einheitliches Layout bieten soll, wird man schnell einsehen, daß eine externe Stylesheet-Datei das einzig sinnvolle ist. Hiermit läßt sich das Aussehen beliebiger Objekte über nur eine Datei anpassen. Das Einbinden einer solchen Datei (hier "main.css") ist kinderleicht und mit nur einer Zeile html-Code getan:

<link rel="stylesheet" type="text/css" href="main.css" />

Was noch fehlt, ist der eigentliche Inhalt dieser Datei. Die einfachste Möglichkeit, ein paar Anpassungen vorzunehmen, ist es, die bestehenden html-Tags ein wenig umzudefinieren. Dazu reicht es, den html-Tag hinzuschreiben und dahinter in geschweiften Klammern die Stylesheetdefinitionen. Die Syntax hierfür ist folgende:

Tag {Eigenschaft_1 : Wert_1; Eigenschaft_2 : Wert_2; ...}

Zur besseren Übersicht sollte man Zeilenumbrüche nach den Semikola einfügen und auch von Leerzeichen Gebrauch machen - das ist aber Geschmackssache ;) Im folgenden sieht man ein Beispiel, wie es aus der css-Datei zu dieser Domain stammt. Es sollte eigentlich selbsterklärend sein und wer nicht weiß, was man genau mit welcher Zeile bewirkt, der probiert's halt einfach aus ;) Noch ein Hinweis: die Scrollbar-Definitionen sind eine Microsoft-Erfindung und funktionieren daher nur im IE.

body {
 background: #f8f0ff;
 font-family: times;
 font-size: 12pt;
 scrollbar-arrow-color:#e8e0f4;
 scrollbar-track-color:#e8e0f4;
 scrollbar-face-color:#d0d0ff;
 scrollbar-highlight-color:#fff0f8;
 scrollbar-3dlight-color:#f8f0ff;
 scrollbar-darkshadow-color:#88808f;
 scrollbar-shadow-color:#88808f;
}
pre {background: #e8e0f4;font-weight: normal;font-size: 10pt}
printpre {font-family: lucida console}
h1 {font-family: helvetica; font-size: 20pt;text-align:left;
    margin-left:50px;margin-top:10px;margin-bottom:0px}
h2 {font-family: helvetica; font-size: 17pt}
h3 {font-family: helvetica; font-size: 14pt}
h4 {font-family: helvetica; font-size: 11pt}

So weit, so gut - wie man die anderen schönen Sache nutzen kann, das schreibe ich ein ander mal.

Stylesheet Beispiele

Listenformatierung - eine ungeordnete Liste mit ul und li mit eigenem Stichpunkt-Symbol, Abstandsanpassungen und gegenüber der Umgebung kleinerer Schrift.
Listenformatierung im WordPress-Stil - eine ungeordnete Liste mit ul und li ohne Standardsymbole mit vorgesetzten Sonderzeichen in einem vom normalen Inhalt umflossenen Menü.