Informatik :: CSS :: Arbeiten mit Style Sheets
Wie bereits gesagt sind CSS eine direkte Erweiterung von HTML. Um mit ihnen zu arbeiten, ist also keine zusätzliche Implementation oder Definition notwendig. Sie können in der gewohnten HTML-Syntax weiterarbeiten, aber jetzt mit einer Reihe von zusätzlichen Befehlen. Die neuen Befehle können Sie an den entsprechenden Stellen nahtlos in die HTML-Syntax integrieren. Inzwischen unterstützen auch zahllose HTML-Editoren die Erweiterungen.
Um Formate an zentraler Stelle, meistens im Kopf
einer HTML-Datei zu definieren,
muss ein entsprechender CSS-Bereich geschaffen werden.
Er beginnt mit dem eröffnenden Tag <style>
und muss mit dem Tag </style> auch wieder beendet werden.
Zusammen mit dem Tag <style> ist die Angabe des Attributs type
notwendig. Hiermit erfährt der Browser, um welchen Dialekt von CSS-Sprache
es sich handelt. In unserem Fall ist die Angabe von type="text/css"
erforderlich.
Zwischen <style type="text/css"> und </style> erfolgt die Definition
der gewünschten CSS-Angaben.
Somit ergibt sich für die HTML-Datei folgende Grundstruktur:
<html> <head> <title> gewünschter Fenstertitel </title> <style type="text/css"> -------- zentraler CSS Bereich ----------- </style> </head> <body> ... </body> </html>
Zum Erstellen eines Style Sheets gehen Sie folgendermaßen vor:
Beispiel:
Dabei sollten Sie die genannten Tags sinnvoll formatieren. Es ist z.B. ohne weiteres möglich, eine Überschrift der 3. Ordnung so weit zu vergrößern, dass diese eher einer Überschrift der 1. Ordnung entspricht, aber letztendlich ergibt das keinen Sinn.
Der Vorteil von CSS ist nun, dass bei jedem Aufruf eines zentral formatierten Tags das entsprechenden Format angewandt wird.
Aufgabe:
Öffnen Sie die Datei CSS02Uebg1.txt
mit dem Texteditor!
Erstellen Sie für die genannten Tags die entsprechenden zentralen
Style Sheets!
Neben dem Anlegen zentraler Formate besteht auch die Möglichkeit, Formatierungen direkt, also an Ort und Stelle vorzunehmen. Das ist besonders dann notwendig, wenn ein zentral formatierter Tag ausnahmsweise mit einem anderen Format angewendet werden soll. Theoretisch entsteht damit erst einmal ein Konflikt zwischen dem bestehenden, zentral angelegten Format und dem momentan gewünschten Format. In diesem Fall hat immer das direkt angewendete Format Vorrang.
Beispiel:
Dabei ist folgendes zu beachten:
Aufgabe:
Öffnen Sie zur Übung die Datei CSS02Uebg2.txt
mit dem Texteditor!
Erstellen Sie für die genannten Tags die entsprechenden direkten
Style Sheets!
Alternativ zu den beiden genannten Möglichkeiten können Sie CSS-Definitionen auch in einer externen Datei ablegen. Dies hat den Vorteil, dass innerhalb eines größeren Projektes bestehend aus vielen HTML-Dateien die Änderung der Formateinstellungen nur in einer Datei vorgenommen werden braucht.
Die externe Datei kann mit einem Texteditor erstellt werden. Sie enthält
analog zu zentral formatierten Tags nur die CSS-Angaben, die ansonsten
zwischen <style> und </style> im Kopfteil der HTML-Datei stehen.
Einzige Bedingung ist die Dateiendung .css (z.B. ../../format.css)
Der Zugriff auf diese CSS-Datei erfolgt durch <link href="dateiname.css" rel="stylesheet"> im Kopfteil der HTML-Datei.
Aufgabe:
Beim Erstellen eines zentralen Formats für einen Tag ist dieser rein theoretisch fest mit einem bestimmten Format belegt. Praktisch ist das aber falsch. Sie können für einen Tag mehrere Formate definieren, indem Sie mehrere Klassen für diesen Tag anlegen. Dann können Sie unter Angabe der Klassennamen in beliebiger Reihenfolge verschiedene Formate für ein und denselben Tag aufrufen.
Zum Definieren von Klassen müssen Sie kein Profi für objektorientierte Entwicklungsumgebungen sein. Sie werden sehen, wie leicht dies zu bewerkstelligen ist.
Beispiel:
i.klein {font-size:7pt; color:red}
i.gross {font-size:15pt; color:blue}
Beispiel:
<i class="klein"> Kleine rote Kursivschrift </i> <i class="gross"> Große blaue Kursivschrift</i>
Beispiel:
.standard {font-size:12pt; color:green}
Aufgabe:
Die Angabe von Farben für CSS kann auf drei verschiedenen Wegen erfolgen:
Die ersten beiden sind Ihnen bereits von HTML bekannt, also
- entweder als hexadezimaler Zahlenwert mit einer vorangestellter Raute z.B. body {color:#FF0000}
- oder über die Angabe des Farbnamens z.B. body {color:red}
Die Zuordnung der Farbnamen zum entsprechenden Hexadezimalcode finden Sie in der Farbtabelle.
Mit CSS ist eine dritte Möglichkeit hinzugekommen:
Jetzt können Sie die Funktion rgb() verwenden, der Sie die drei RGB-Farbwerte entweder relativ in Prozent oder absolut (dezimal) übergeben.
Beispiel:
div {background-color:rgb(100%,100%,20%)
div {background-color:rgb(255,255,51)
Die Reihenfolge der einzelnen Werte entspricht dabei den Farbanteilen von Rot, Grün und Blau.
Mit dem Farbwähler können Sie Ihre Farben erstellen.
Ein weiteres Merkmal bei CSS sind die in HTML bisher nicht möglichen Angaben von Größen in verschiedenen Maßeinheiten.
Mit der Verwendung von Maßeinheiten ist endlich eine exakte Positionierung der Elemente einer Webseite möglich.
Außerdem sind Sie nicht mehr an eine kleine Auswahl vorgegebener Standardgrößen gebunden, sondern können auch auf beliebige Größenverhältnisse zugreifen. Diese neu gewonnenen Freiheiten erfordern natürlich ihren Preis und der ist die notwendige Auseinandersetzung mit den möglichen Maßeinheiten und deren Anwendung.
Hier müssen Sie jetzt zwischen relativen und absoluten Angaben unterscheiden.
Relative Angaben ermöglichen eine Größenänderung im Verhältnis zur typischen Größe es Elements bzw. relativ zur vorhandenen Bildschirmgröße.
So passt sich z.B. mit der Verwendung der Maßeinheit px (Pixel) die Darstellung der Größenverhältnisse
der Elemente an den zur Verfügung stehenden Bildschirm an.
Absolute Angaben dagegen erzwingen stets eine gleich große und vom Ausgabegerät unabhängige Darstellung der Elemente.
| Alle Maßeinheiten im Überblick: | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
|||||||||||||||||||||||
Bei Bedarf können Sie mit dem Maßeinheitenumrechner von einer absoluten Einheit in alle anderen umrechnen.
Nun sind Sie aber nicht unbedingt an die starre Welt der Zahlen gebunden, sondern können statt dessen auch Ausdrücke für Größenverhältnisse verwenden. Mit Ausdrücken erzielen Sie eine Größenänderung relativ zu einer Standardgröße oder Standardposition. Die Verwendung von Ausdrücken setzt etwas Gefühl für deren spätere Wirkung voraus.
Ausdrücke im Überblick:
| Ausdrücke | Beschreibung |
|---|---|
| lighter | dünner als die typische Elementstärke |
| bolder | dicker |
| smaller | kleiner als die typische Elementgröße |
| larger | größer |
Um Ihre eigenen HTML-Dateien im Nachhinein besser bearbeiten zu können,
sollten sie Kommentare verwenden. Da sich gerade bei CSS die verschiedenen
Formatdefinitionen schnell zu einer überlangen Zeichenkette ansammeln
können, erleichtert Ihnen ein Kommentar spätere Änderungen.
Wenn Sie innerhalb einer separaten CSS-Datei oder zwischen <style> und
</style> Kommentare einfügen wollen dann gilt dafür folgende
Syntax:
/* mehrzeiliger Kommentar */ // einzeiliger Kommentar
Der gesamte so gekennzeichnete Text wird beim Anzeigen der Seite nicht interpretiert und ist für den Betrachter unsichtbar.
