eine Ausarbeitung von
Matthias Knossalla
1. Was ist das? und wozu ist es nützlich?
2. Wie kann man CSS verwenden?
2.1 Allgemeines zur Zuweisung von Eigenschaften
4. Wie geht es mit CSS weiter?
CSS stellt eine Erweiterung zu HTML dar, die Autor einer Webseite zahlreiche Möglichkeiten der Formatierung einräumt.
Als HTML entwickelt wurde, war das WorldWideWeb fast ausschließlich textbasiert.
HTML wurde somit mit Elementen zur Strukturierung eines Dokuments ausgestattet, wie beispielsweise Überschriften, Listen, Tabellen u.s.w.
Statt HTML mit immer mehr verschieden Tags auszustatten,
verfolgte das W3C die Auffassung,
dass es besser sei eine eigenständige Sprache zur graphischen Darstellung und
Formatierung zu entwickeln.
Eine grundlegende Neuerung war dabei die Möglichkeit die graphische Gestaltung (Layout) von Struktur und Text zu trennen.
In der ersten Version (Level 1) gibt es CSS bereits seit
1996. Schon 1998 wurde eine erweiterte Version (Level 2),
die eine Erweiterung von CSS1 ist, vorgestellt.
Es gibt drei Möglichkeiten CSS zu verwenden.
Erstens kann man die Elemente in HTML wie folgt mit Style-Anweisungen ergänzen:
STYLE={...;...;...};
Dies ist die einfachste Art (am Ort).
Zweitens kann man im Kopf des HTML-Dokuments (lokal) Formate für Elementtypen, Typenklassen oder auch allgemeine Klassen angeben.
<STYLE
TYPE=text/css>
...
...
</STYLE>
Drittens kann man die Anweisung in einer zusätzlichen Datei ablegen, die dann in die gewünschten Dokumente eingebunden werden kann.
Im Dokument erscheint dann im Kopf folgendes:
<LINK
REL=StyleSheet HREF=style.css TYPE=text/css>
An der Stelle style.css muss der Name der Style-Datei angegeben werden.
Die Priorität konkurrierender Anweisungen ist standardmäßig
die hier angegebene Reihenfolge.
Zuerst (am Ort) dann (lokal) und zum Schluss in der Style-Datei.
Im Folgenden wird hier die Variante drei (Style-Datei) verwendet.
Die allgemeine Syntax sieht wie folgt aus:
<HTML-Element> {<Eigenschaft>:<Wert>;...}
Wie zu Beginn kurz erwähnt kann man den HTML-Elementen selbst Eigenschaften zuweisen.
Zum Beispiel der Überschrift1 die Farbe rot.
H1 {color :
red}
Man kann auch mehreren Elementen die gleichen Eigenschaften
zuweisen indem man sie
alle durch Komma getrennt an der Stelle <HTML-Element> aufführt.
In {} eingeschlossenen Eigenschaftszuweisungen werden durch Semikolon getrennt.
Des weiteren können Zuweisungen für Klassen angeben werden.
Zum Bespiel für die Überschrift1 der Klasse dok.
H1.dok
{color : red}
Wird dies verwendet werden nur H1-Elemente mit der Angabe class=dok entsprechend formatiert.
Es ist damit also eine differenzierte Art und Weise der Formatierung möglich!
Das Beste ist allerdings, dass es sogenannte globale Klassen
gibt.
Das sind untypisierte Klassen. Solche Klassen lassen sich jedem Element des
HTML-Dokuments zuweisen.
Diese Klassen verwendet man wie folgt:
Zum Beipiel die Klasse blau_auf_weiss.
.blau_auf_weiss
{color : blue; background : white}
Nun sei noch erwähnt, dass man mit Hilfe von IDs zusätzlich differenzieren kann.
#0815 {color : red}
Diese Zuweisung wird bei allen Elementen die den Tag ID=0815 enthalten wirksam.
Zu Maßangaben sei folgendes gesagt, es gibt absolute und relative Maßangaben.
Zum Beispiel sind mm, cm aber auch px (Pixel) absolute
Maßangaben.
Wobei px-Angaben bei unterschiedlicher Auflösung/Pixeldichte unterschiedlich
dargestellt werden.
Eine Liste aller Maßangaben und ihrer Beschreibung erhalten Sie bei SELFHTML
Farben können durch die Verwendung reservierter Worte
(red,blue,green,yellow,...) gesetzt werden. Farben könne allerdings
auch mit Hilfe von #XXXXXX als RGB im HEX-Format oder mit rgb(xxx,xxx,xxx)
Dezimal angeben werden.
Des weiteren gibt es ab CSS2 eine Liste mit Farbvariablen aus der Benutzeroberfläche
auf gelistet bei SELFHTML
Mit Hilfe der Eigenschaft font-family können eine oder
alternativ mehrere Schriftarten zur Darstellung festgelegt werden.
Wobei die Schriftarten der Reihe nach Verwendung finden.
.text_2{ font-family: Arial, Avantgarde, Helvettica}
Unter Verwendung der Eigenschaften font-style und font-weight kann der Text fett oder kursiv dargestellt werden.
text-decoration bietet die Möglichkeit Text unterstrichen, überstrichen, durchgestrichen oder blinkend darzustellen.
Textfarben werden mit color wie in Abschnitt 2.3 beschrieben festgelegt.
Eine komplette Liste gibt wie immer bei SELFHTML
text-align legt die horizontale Ausrichtung fest z.B. linksbündig, zentriert, rechtsbündig
vertical-align legt die vertikale Ausrichtung fest z.B. oben bündig, unten bündig, u.s.w.
Es gibt 2 Arten von Abständen den äußeren Abstand und den inneren Abstand.
Der äußere legt fest in welchen Abstand andere Elemente und
das Element herum angeordnet werden.
Er wird mit der margin-Anweisung festgelegt.
Der innere Abstand legt fest welcher Abstand zwischen
inneren Elementen und dem Rand des Elements bleiben soll.
Er wird mit der padding-Anweisung festgelegt.
Es gibt auch für Tabellen, CSS Anweisungen diese werden aber
von vielen Browsern nicht unterstützt.
Weshalb es besser ist die Tabellen in ihrer Struktur herkömmlich mit HTML-Tags
zu formatieren.
Dies nur für die Tabellenstruktur nicht für deren Inhalt!
Oft werden Hintergrundbilder verwendet.
Auch diese lassen sich mit Hilfe von CSS formatieren.
Zum Beispiel so, dass sie nur einmale Eingezeigt werden, oder sie im Browser
scroll-fest sind.
Eine komplette Liste aller Optionen gibts bei SELFHTML
Mit Hilfe dieser kann die Formatierung eines Elements mit seinen Eigenschaft verknüpft werden.
Zum Beispiel ein Link kann
wenn die Maus darauf zeigt (hover) anders dargestellt werden, als beispielsweise eine angeklickter Link.
:link = für Verweise
zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:hover = für Verweise, während der Anwender mit der Maus darüber fährt
:active = für gerade angeklickte Verweise
:focus = für Verweise, die den Fokus erhalten, z.B. durch
"Durchsteppen" mit der Tab-Taste
Verwendet werden diese wie folgt:
<[HTML-Element][.Klasse][:Pseudoformat]>{<Style Anweisung>}
Eine Auflistung aller Pseudoformate bei SELFHTML
CSS wird von unterschiedlichen Browsern unterschiedlich gut
unterstützt. Wie nicht anders zu erwarten.
Positive zu erwähnen ist dabei das zumindest CSS1 von fast allen üblichen
Browsern unterstützt wird.
Bei CSS2 sieht es da schon nicht so gut aus (siehe Tabellenformatierung). Es
wird derzeit nur teilweise unterstützt.
Teilweise gibt es auch browserspezifische Formate z.B. in Microsofts Internet Explorer 6.
Wenn man also eine Webseite schreibt, sollte man sich
vergewissern
ob die gängigen Browser die verwendeten Formatierungen unterstützen.
Wenn möglich sollte man versuchen einen gemeinsamen Nenner zu finden.
An CSS3 wird im Moment gearbeitet, allerdings nicht als eine
große Erweiterung,
sondern eher als modulare Ergänzung.
Da im Moment die bisher gemachten Vorgaben noch nicht
umgesetzt sind,
wird es wohl den Webautor noch eine Weile dauern bis CSS3 verwenden kann.
Quellen: