Cascading-Style-Sheets
Werbung
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) sind Formatvorlagen des World Wide Web und dienen u.a. der
einheitlichen Formatierung von Texten und Absätzen, der Positionierung von Objekten (z. B.
Tabellen) oder der Einbindung von Hintergrundgrafiken auf einer Website. Innerhalb der Style
Sheets werden HTML-Elementen (z. B. Überschriften) bestimmte Formatierungen einmalig
zugewiesen. Diese Zuweisung gilt dann für alle Überschriften der Seiten, die sich auf das Style
Sheet beziehen.
CSS können intern (innerhalb des <head>-Bereiches einer Seite) oder extern (in einer
gesonderten Datei mit der Endung .css) angelegt werden. Um den Quelltext einer Seite
übersichtlich zu halten, sollten nur kurze Style Sheets als interne CSS angelegt werden.
Externe Style Sheets haben außerdem noch folgende Vorteile:
einheitliches Aussehen aller Seiten einer Website, in denen das externe CSS
angewendet wird
der Aufwand bei der Erstellung einer Website ist wesentlich geringer (Formatierungen in
CSS müssen nur einmal in der CSS-Datei und nicht auf jeder Seite eingegeben werden)
geringerer Aufwand bei Änderungen an der Website (die Änderungen müssen nur
einmal in der CSS-Datei vorgenommen werden)
kürzere Ladezeiten für Besucher der Website, da alle Informationen der externen CSSDatei nur einmal geladen werden müssen
Externe CSS
Externe CSS müssen in einer separaten Datei mit der Endung .css abgespeichert werden. Die
Style Sheets haben grundsätzlich folgenden Aufbau:
<!-- Elementname (tag)
{Schlüsselwort: Wert; } -->
der Elementname gibt in der Regel den HTMLtag an, der formatiert werden soll (z. B. <h3>)
das Schlüsselwort gibt das Attribut an, das
festgelegt werden soll (z. B. die Farbe)
der Wert bestimmt die Ausprägung des
Attributes (z. B. rot)
Um die .css-Datei mit einer HTML-Seite zu verbinden, muss innerhalb des <head>-Bereiches
der einzelnen Seiten, auf die das CSS angewendet werden soll, folgender tag integriert werden:
<link href=“Dateiname der CSS-Datei“ rel=“stylesheet“ type=“text/css“>
Beispiel für den Inhalt einer .css-Datei, in der die Hintergrundfarbe der HTML-Seite auf rot und
die Schriftfarbe auf schwarz festgelegt wird:
body {background-color: red; color: black;}
Eine Übersicht über weitere gängige CSS-Elemente finden Sie auf der Seite 3!!!
Direktformatierung mit CSS
Sie können auch einzelnen tags Style Sheets direkt im <body>-Bereich einer Seite zuweisen.
Hierzu fügen Sie innerhalb des jeweiligen tags das Attribut style=“Schlüsselwort: Wert“ ein.
In dem folgenden Beispiel wird der Text innerhalb der <p>-tags pixelgenau auf der Seite
positioniert (90 Pixel vom linken Rand und 150 Pixel vom oberen Rand entfernt).
<p style=“position: absolute; left: 90px; top: 150px;“>Text</p>
Interne CSS
Interne CSS werden im <head>-Bereich einer HTML-Seite innerhalb der tags <style
type=“text/css“> </style> angelegt und haben grundsätzlich denselben Aufbau wie externe
Style-Sheets (der tag <link href=“Dateiname der CSS-Datei“ rel=“stylesheet“ type=
“text/css“> entfällt).
Im folgenden Beispiel wird durch ein Style Sheet innerhalb des <head>-Bereiches bestimmt,
dass alle <h1>-tags der Seite in roter Farbe und der Schriftart Comic Sans MS erscheinen und
das Text innerhalb von <p>-tags in Arial angezeigt wird:
Quelltext:
Ansicht im Browser:
<html>
<head>
<title>Seitentitel</title>
<style type=”text/css”>
h1 {color: red; font-family: comic sans ms;}
p {font-family: arial; font-size: 14pt;}
</style>
</head>
<body>
<h1>Diese Überschrift wird rot in der Schriftart
„Comic Sans MS“ angezeigt </h1>
<p>Der Text innerhalb von p-tags wird in der
Schriftart „Arial“ in der Größe „14 Punkte“
angezeigt.</p>
</body>
</html>
Informationen für Fortgeschrittene
Sie können auch mehreren tags die gleichen Werte zuweisen. In dem folgenden Beispiel wird
allen Überschriften die Farbe blau zugewiesen.
h1, h2, h3, h4, h5, h6, h7 {color: blue;}
Manche Werte (insbesondere Schriftarten) können nicht von allen Browsern angezeigt werden.
Um sicher zu gehen, dass dennoch eine Formatierung erfolgt, können mehrere Werte
nacheinander angegeben werden. Falls der Browser den ersten Wert nicht kennt, nimmt er den
zweiten (usw.). In dem folgenden Beispiel werden alternative Schriftarten für alle <p>-tags
zugewiesen:
p {font-family: Comic Sans MS, Arial;} Falls der Browser die Schriftart Comic Sans MS
nicht kennt, wird der Text in den <p>-tags in Arial dargestellt.
Letztlich gibt es bei CSS die Möglichkeit, bestimmte Formatierungen in Klassen zu speichern,
die je nach Bedarf auf den jeweiligen tag angewendet werden können. Die Syntax lautet:
.Klassenname {Schlüsselwort: Wert; }. Z. B. wird durch die Zeile .blau14 {color: blue; fontfamily: arial; font-size:14pt;} in der Klasse blau14 gespeichert, dass die Formatierung blau
mit der Schriftgröße 14 Punkte in der Schriftart Arial erfolgen soll. Wenn man die Klasse bei
einem tag anwenden möchte, setzt man in den Tag das Attribut class=“Klassenname“. In dem
folgenden Beispiel wird dem Text innerhalb des <p>-tags die Klasse blau14 (und somit auch
die entsprechenden Formatierungen) zugewiesen: <p class=“blau14“>
Ein Tipp zum Abschluss: Nicht immer will man tags mit eigener Formatierung (wie z. B. <h1>)
ändern. Die tags <div> und <span> sind in HTML nicht mit Formatierungen vorbelegt. Sie
können in Style-Sheets und HTML-Seiten beliebig eingesetzt werden.
Auflistung von CSS-Schlüsselwörtern mit möglichen Werten (eine umfassendere
Darstellung findet sich in der Self-HTML-Datei unter dem Punkt „Kurzreferenz:
CSS“):
Anwendungsbereich
Positionierung von
Objekten (Abstand vom
linken, rechten, oberen
oder unteren Rand)
CSS-Schlüsselwort
position:
und zusätzlich
left:
right:
top:
bottom:
font-family:
mögliche Werte
absolute (Standard) oder relative
Größenangabe (z. B. 12pt, 20px, 3cm
oder 10%)
Namen von Schriftarten (z. B. comic
sans ms)
font-size:
Größenangabe (z. B. 12pt, 20px, 10%)
Schriftgröße
color:
Schriftfarbe
HTML-Farbpalette
font-style :
italic
Kursive Schrift
font-weight:
lighter, light, normal, bold, bolder
Schriftstärke
text-align:
left, right, center, justify (Blocksatz)
Textausrichtung
background-color:
Hintergrundfarbe
HTML-Farbpalette
background-image:
url(Pfad zur Bilddatei)
Hintergrundbild
background-repeat:
no-repeat (Bild wird nur einmal
HintergrundbildWiederholungen
angezeigt)
Position
des background-position: Entweder 2 numerische Werte (Abstand
Hintergrundbildes
vom linken und vom oberen Rand, z.B.
100px 200px) oder die Ausrichtungen
top, center, bottom, left, middle, right
border-style:
Solid
(durchgezogen),
dashed
Rahmen
(gestrichelt), double (doppelt), dotted
(gepunktet), groove (3D)
border-width:
Größenangabe (z. B. 12pt, 20px, 10%)
Rahmenstärke
oder thick, middle, thin
border-color:
Rahmenfarbe
HTML-Farbpalette
Größenangabe (z. B. 12pt, 20px)
Abstand zum Tabellen- border-spacing:
Rahmen
Collapse (normaler Rahmen) oder
Rahmenanzeige
bei border-collapse:
separate (jede Zelle hat einen eigenen
Tabellen
Rahmen)
Schriftart
