CSS - Cascading Style Sheets
Cascading Style Sheets ("Übergreifende Formatvorlagen") können als Erweiterung zu HTML gesehen werden und dienen der Formatierung eines HTML-Dokumentes. Der Unterschied zur herkömmlichen Formatierung: CSS-Sheets werden entweder im HEAD einer HTML-Seite für die gesamte Seite definiert oder können mit der Erweiterung .css als eigenständige Datei ausgelagert werden. Das ist dann sinnvoll, wenn viele Seiten gleiche Formatierungen benötigen und man den Code nicht in jede HTML-Datei extra schreiben möchte.
CSS-Codes sind grundsätzlich im HEAD-Bereich eines HTML-Dokumentes angesiedelt:
<head>
<style type="text/css">
</style>
</head>
Zwischen <style type="text/css"> und </style> werden nun die CSS-Anweisungen geschrieben, die für das gesamte Dokument gelten. Es besteht auch die Möglichkeit, die CSS-Anweisungen in eine externe Datei auszulagern. Das ist dann sinnvoll, wenn mehrere Seiten die gleichen Formatierungen benötigen. So erspart man sich, in jede Datei einzeln die CSS-Codes zu schreiben sondern kann dies bequem in einer einzigen tun. CSS-Datein haben die Endung .css, ein Beispiel für eine CSS-Datei kann hier betrachtet bzw. heruntergeladen werden.
Eingebunden werden externe CSS-Dateien wie folgt:
<head>
<link rel="STYLESHEET" type="text/CSS" href="styles.css">
</head>
Wäre der obige Code in einer HTML-Datei vorhanden, würden für diese die Formatierungen der externen CSS-Datei mit dem Namen styles.css gelten.
Mit <style type="text/css"> und </style> wird nun Platz für CSS-Anweisungen geschaffen. Diese bestehen immer aus einer Zuordnung (was formatiert werden soll) und Eigenschaften (wie formatiert werden soll). Möchte man nun alles innerhalb des <body>-Tags formatieren, sehenden passende CSS-Anweisungen wie folgt aus:
<style type="text/css">
body {
background-color: #FFCC66;
background-image: url("beispielbild.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size: medium;
font-style: normal
font-weight: bold;
}
</style>
Die einzelnen Eigenschaften im Detail:
body {: Gibt an, dass alles innerhalb des BODY-Tags formatiert wird, die geschwungene Klammer öffnet Zeilen um Anweisungen zu platzieren.
background-color: #FFCC66;: Gibt die Hintergrundfarbe an.
background-image: url("beispielbild.jpg");: Definiert das Bild beispielbild.jpg als Hintergrundbild.
background-repeat: no-repeat;: Das Hintergrundbild wird nicht öfters angezeigt, mit background-repeat: repeat; wiederholt sich das Bild.
background-attachment: fixed;: Das Bild bewegt sich beim Scrollen nicht mit.
background-position: right bottom;: Gibt die Position des Hintergrundbildes an, in diesem Fall rechts am Boden.
margin-top: 100px;: Gibt an, dass Texte und Bilder 100 Pixel von der oberen Bildschirmkante eingerückt werden. Das Gleiche gilt für margin-right, margin-bottom und margin-left.
font-family: Arial,Verdana,Helvetica,sans-serif;: Gibt die Schriftart an. Arial ist hier die erste verfügbare Schrift, sollte Arial auf dem Computer nicht vorhanden sein, wird automatisch die zweite Schrift (in unserem Fall Verdana) angezeigt.
font-size: medium;: Gibt die Schriftgröße an. Weitere Möglichkeiten sind: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
font-style: normal: Gibt die Art der Schrift an. Weitere Möglichkeiten sind: italic, oblique
font-weight: bold;: Gibt die Schriftstärke an.
Natürlich sind alle diese Eigenschaften nicht ausschließlich für den BODY-Tag verwendbar, im Gegenteil: Auch für andere Tags wie z.B. Überschriften können die gleichen Eigenschaften herangezogen werden:
<style type="text/css">
h1 {
font-family: Verdana,sans-serif;
font-size: large;
color: #FFFFFF;
text-align: center;
text-decoration: underline;
}
</style>
Mit dem obigen Code werden alle Überschriften, also alle Texte innerhalb eines h1-Tags (<h1></h1>) rot und groß dargestellt, die Schriftart ist Verdana, der Text ist unterstrichen und mittig. Wichtig ist, dass alle Eigenschaften immer mit einem Semikomma (;) geschlossen werden. Dadurch weiß der Browser, dass eine neue Zeile und eine neue Anweisung beginnt.
text-align: center;: Gibt an, dass der Text zentriert dargestellt wird.
text-decoration: underline;: Gibt an, dass der Text unterstrichen wird.
Links haben in CSS mehrere Formatierungsmöglichkeiten. Links, die angeklickt wurden können anderd aussehen als Links, auf die gerade die Maus zeigt. Dem Link-Tag <a> werden die Attribute visited, active oder hover verliehen. "Visited" steht für jene Links, auf die bereits geklickt wurde und die auf eine andere Seite verwiesen haben. "Active" steht für jene Links, die gerade ausgewählt sind. "Hover" bezeichnet jene Links, auf die gerade mit der Maus gezeigt wird (Mouseover). Ein entsprechender CSS-Code würde wie folgt aussehen:
<style type="text/css">
a:link{ color: #ffffff; text-decoration:underline; font-family:verdana; font-size: 10pt;}
a:visited{ color:#ffffff; text-decoration:underline; font-family:verdana; font-size: 12pt;}
a:active{ color:green; text-decoration:underline; font-family:verdana; font-size: 12pt;}
a:hover{ color:#7EAED6; text-decoration:none; font-family:Arial; font-size: 12pt;}
</style>
Aus Gründen der Übersicht sind die einzelnen Teile des Codes farbig markiert. Selbstverständlich könnten auch noch weitere Formatierungen wie z.B. die Hintergrundfarbe hinzugefügt werden.
Im nächsten Kapitel erklärt Wissen-Kompakt wie Tabellen in HTML funktionieren!
WEITER
|
Wissen
Informatik