Workshop CSS: Teil 2 - Stylesheets in HTML einbinden
Aufbau der Stylesheet-Angabe
Eine Stylesheet-Angabe besteht aus der Eigenschaft und dem Wert, getrennt durch einen Doppelpunkt. Die Eigenschaft ist das, was du formatieren möchtest. Z.B.: color für die Schriftfarbe, border-width für die Rahmenbreite oder text-decoration für Unterstreichungen. Als Wert sind Farbangaben, Einheiten oder Schlüsselworte möglich.
Hier einige Beispiele:-
Schriftfarbe rot:
color:#ff0000;
color ist die Eigenschaft für die Schriftfarbe und #ff0000 ist der Wert als hexadezimale Farbangabe für Rot -
Schriftgewicht fett:
font-weight:bold;
font-weight ist die Eigenschaft für das Schriftgewicht und bold ist der Wert als Schlüsselwort für fett -
Unterstrichen:
text-decoration:underline;
text-decoration ist die Eigenschaft für Unter- und Überstreichungen und underline ist der Wert als Schlüsselwort für unterstrichen -
Elementhöhe:
height:100px;
height ist die Eigenschaft für die Höhe und 100px ist der Wert als Zahl mit der Einheit Pixel. Wichtig! Zwischen der Zahl und der Einheit darf kein Leerzeichen stehen.
HTML-Tags formatieren
HTML-Tags lassen sich durch ein Attribut mit Stylesheets direkt formatieren. Das folgende Beispiel formatiert die Textfarbe einer Überschrift 1 in rot:
,
,
,
,
,
,
<h1 style="color:#ff0000;">Dies ist eine Überschrift</h1>
Und dieses Beispiel formatiert für eine Tabellenzelle die Textfarbe in weiß und die Hintergrundfarbe in schwarz:
,
,
,
,
,
,
<td style="color:#ffffff; background-color:#000000;"> Irgendein Text in dieser Zelle </td>
Ein HTML-Tag mit Stylesheets zu formatieren ist recht einfach. Du brauchst in dem HTML-Tag nur das Attribut style=""
mit den Stylesheet-Angaben in Anführungszeichen einzufügen.
Der Aufbau der Stylesheet-Angaben ist immer gleich: Die Eigenschaft, ein Doppelpunkt,
der Wert und als Abschluß ein Semikolon.
Abschnitte eines Dokuments mit <span> formatieren.
Das folgende Beispiel formatiert die Worte "irgendein Text" fett und mit roter Textfarbe:
,
,
,
,
,
,
Dies ist <span style="color:#ff0000; font-weight:bold;"> irgendein Text</span> und der soll formatiert werden.
Zur Formatierung ganzer Abschnitte innerhalb eines Absatzes eignet sich das
<span>-Tag, da es sich um ein sog. Inline-Element handelt, dass keinen eigenen Absatz erzeugt.
Die Formatierung führst du wie in dem vorherigen Absatz beschrieben durch,
in dem du das Attribut style="..." mit den Stylesheet-Angaben in Anführungszeichen
in das <span>-Tag einfügst.
Diese Formatierungen sind dann für alle Elemente innerhalb des <span>-Tags gültig.
Zum Aufbau der Stylesheet-Angaben gilt Gleiches wie im vorherigen Absatz:
Die Eigenschaft,
ein Doppelpunkt, der Wert und als Abschluß ein Semikolon.
Näheres über den Aufbau erfährst du in Teil 3 und
eine Übersicht aller Stylesheet-Angaben findest du in der Stylesheet-Referenz.
Stylesheets zentral im Dokument deklarieren
In der Regel sollten die Formate für das gesamte Dokument gültig sein. Damit du nun aber nicht in jedem HTML-Tag die Angaben wiederholen musst, hast du die Möglichkeit die Formatierungen an einer Stelle im Dokument zentral zu deklarieren. Sie sind dann für das gesamte Dokument gültig.
,
,
,
,
,
,
<html> <head> <style type="text/css"><!-- Stylesheet Angaben //--></style> <title>Irgendein Titel</title> </head><body> </body> </html>
Im <head>-Bereich, d.h. zwischen dem einleitenden <head>-
und dem abschließenden </head>-Tag, wird der Bereich,
in dem die Stylesheet-Angaben stehen, mit <style type="text/css"><!--
eingeleitet. Dann folgen
die Stylesheet-Angaben und abschließend //--></style>.
Das <style>- und </style>-Tag schließt den
Stylesheet-Bereich ein. Die Kommentar-Tags <!-- //--> sollen verhindern,
dass Browser, die CSS nicht verstehen, diese Angaben als normalen Text anzeigen.
Wie die Stylesheet-Angaben aussehen, erfährst du in Teil 3.
Stylesheets in eine externen Datei auslagern.
Die zentrale Deklaration von Formaten im <head>-Bereich ist für einer
Seite gut, aber welche Homepage besteht nur aus einer Datei? Um die Stylesheet-Angaben
allen Seiten zur Verfügung zu stellen, kannst du sie auch in eine Datei speichern und diese
mit den HTML-Dokumenten verlinken.
,
,
,
,
,
,
<link rel="stylesheet" type="text/css" href="dateiname.css">
Dafür wird eine Textdatei benötigt, die die Stylesheet-Angaben enthält und an der Endung
.css zu erkennen ist. Das <link>-Tag, das, wie im Beispiel oben,
an einer beliebigen Stelle im <head>-Bereich eingefügt wird, verweist auf
diese externe Datei. Dafür gibst du im Attribut href= Pfad und Name der Datei an.
Liegt diese Datei auf einem anderen Server, kannst du auch komplette URL-Adressen angeben.
Der einzige Unterschied zu den zentralen Deklarationen im <head>-Bereich ist,
dass die Angaben nicht mit dem <style>-Tag eingeschlossen werden.
Es reicht einfach eine Auflistung der Stylesheet-Angaben.
Wie die Stylesheet-Angaben aussehen, erfährst du in Teil 3.
Kommentare in Stylesheet-Bereichen
In Stylesheet Bereichen darfst Du auch Kommentare einfügen. Sie beginnen mit
/* und enden mit */
,
,
,
,
,
,
<style type="text/css">
/* Überschrift der 1. Ebene */
h1 {color:#ffffff; font-weight:bold;font-size:12pt;}
</style>