Websiteentwicklung: CSS: Einbau in HTML/XML
CSS-Anweisungen lassen sich direkt in ein (X)HTML-Dokument oder SVG-Dokument einbauen (englisch auch 'Inline-Styles' genannt) oder aus externen Stilvorlagen des Typs text/css einbinden. Die beiden Methoden lassen sich auch kombinieren. Meistens hat man eine größere Anzahl von XHTML-Dateien, auf welche die gleiche Stilvorlage wirken soll. Oder man hat umgekehrt mehrere Stilvorlagen, zwischen denen der Nutzer frei wählen können soll. Daher ist eine externe Stilvorlage, das in die Dateien eingebunden wird, vorzuziehen, da man die CSS-Regeln nur einmal formulieren muss oder die komplette Stilvorlage einfach wechseln kann. Auch wird so eine Änderung in der externen Stilvorlage direkt auf allen Seiten wirksam.
CSS-Anweisungen im (X)HTML- und SVG-Dokument
[Bearbeiten]Details zum Einbau sind bereits in den Büchern dazu beschrieben:
Global geltende Regeln werden im Kopf der (X)HTML-Datei im Element head eingebaut. Sie werden Element style notiert. Bei SVG empfiehlt es sich, das Element style mit den CSS-Angaben im obersten Element defs zu notieren, welches hinter title und desc des Wurzelelementes svg folgen kann.
Prototyp XHTML:
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
version="XHTML+RDFa 1.1"
xml:lang="de">
<head>
<title>Titel des Dokumentes</title>
<style type="text/css">
body {background: white; color: black}
h1 {font-size: 2.5em; color:#060}
h2 {font-size: 2.0em; color:#080}
</style>
</head>
<body>
<h1>Dokumentüberschrift</h1>
<p>Ein (sinnvoller) Gedanke könnte hier
in einem Absatz notiert werden.</p>
<p>Weitere Absätze können natürlich folgen.</p>
<h2>Kapitelüberschrift</h2>
<p>Mit Überschriften kann das Dokument natürlich auch
in Kapitel oder Abschnitte aufgeteilt werden.</p>
</body>
</html>
Prototyp SVG:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="-150 -150 300 300"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xml:lang="de">
<title>Beispiel für ein
mit CSS dekoriertes
SVG-Dokument mit Kreisen
</title>
<defs>
<style type="text/css">
circle.nr1 {stroke: black;
stroke-width: 5px;
stroke-opacity: 0.5}
circle.nr2 {stroke: white;
stroke-width: 5px;
stroke-opacity: 0.5}
</style>
</defs>
<circle r="1000" fill="yellow" />
<circle class="nr1" r="120" fill="red" />
<circle class="nr2" r="110" fill="blue" />
<circle class="nr1" r="80" fill="red" />
<circle class="nr2" r="70" fill="blue" />
<circle class="nr1" r="40" fill="red" />
<circle class="nr2" r="30" fill="blue" />
</svg>
Eine andere, nicht empfohlene Möglichkeit ist, die CSS-Anweisungen direkt in der Anfangsmarkierung des betreffenden Elementes zu notieren, auf welches die Anweisungen wirken sollen. Dazu wird bei (X)HTML oder SVG das Attribut style verwendet, in welchem die Anweisungen als Wert zu notieren sind. Es eignen sich allerdings nicht alle CSS-Anweisungen für diese Methode, etwa können so keine Selektoren verwendet werden, weil diese durch die Verwendung des Attributes bereits impliziert sind.
Das sieht dann zum Beispiel so aus:
<img style="border:0;width:88px;height:31px"
src="vcss.png"
alt="Korrektes CSS!" />
Einbinden von externen CSS-Dateien in (X)HTML oder SVG
[Bearbeiten]Für XML allgemein und XHTML oder SVG insbesondere können Stilvorlagenverarbeitungsanweisungen verwendet werden, um auf externe Stilvorlagendateien zu verweisen. Die Angaben folgen dann auf die XML-Verarbeitungsanweisung, zum Beispiel:
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet href="css1.css"
type="text/css"
title="Stil 1"
alternate="yes"
media="all" ?>
<?xml-stylesheet href="css2.css"
type="text/css"
title="Stil 2"
alternate="yes"
media="all" ?>
<?xml-stylesheet href="css0.css"
type="text/css"
title="Kein CSS"
media="all" ?>
In diesem Falle würde also die Stilvorlage mit dem Titel 'Kein CSS' als Voreinstellung verwendet werden. Der Nutzer kann dann bei Bedarf im Darstellungsprogramm auswählen, ob er stattdessen lieber 'Stil 1' oder 'Stil 2' verwenden möchte.
Diese Methode ist bei HTML nicht vorgesehen.
Bei (X)HTML gibt es eine weitere, meistens verwendete Methode, die für diese Formate spezifisch ist. Das Referenzieren von externen CSS-Dateien geschieht im Kopf, also im Element head der (X)HTML-Datei mit dem Element link:
<link href="voreinstellung.css"
type="text/css"
title="Stil: Voreinstellung"
rel="Stylesheet" />
<link href="hellaufdunkel.css"
type="text/css"
title="Stil: Hell auf Dunkel"
rel="Alternate Stylesheet" />
<link href="dunkelaufhell.css"
type="text/css"
title="Stil: Dunkel auf Hell"
rel="Alternate Stylesheet" />
<link href="exp.css"
type="text/css"
title="Stil: Experimentell"
rel="Alternate Stylesheet" />
<link href="nix.css"
type="text/css"
title="Stil: Kein CSS"
rel="Alternate Stylesheet" />
Als Voreinstellung wird hier der Stil mit dem Titel 'Stil: Voreinstellung' verwendet. Der Nutzer kann dann bei Bedarf im Darstellungsprogramm auswählen, ob er stattdessen lieber einen der anderen Stile verwenden möchte.
Zu beachten ist dabei, dass alte oder mangelhafte Darstellungsprogramme nicht notwendig eine Auswahl von alternativen Stilvorlagen anbieten und selbst wenn sie es tun, es nicht sichergestellt ist, dass der jeweilige Nutzer weiß, wo er sie auswählen kann - ein Hinweis im Inhalt oder besser noch ein unabhängiger Auswahlmechanismus dort kann also nicht schaden.
Eine weitere Möglichkeit besteht darin, eine CSS-Regel innerhalb des Elementes style zu verwenden, um eine externe Datei zu importieren:
<style type="text/css">
@import "screen.css"
</style>
Durch Verwendung des Attributes title bei style kann wiederum ein Name für die Stilvorlage festgelegt werden, womit es gegebenenfalls möglich ist, dies mit dem Mechanismus für alternative Stilvorlagen per link oder per Stilvorlagenverarbeitungsanweisung zu kombinieren.
Vielleicht haben Sie in den Grundlagen gelesen, dass Sie zwei CSS-Dateien - eine 'screen.css' für die Bildschirmausgabe und eine 'print.css' für die Druckausgabe - anlegen sollen. Nun, dann wollen wir diese auch korrekt einbinden. Schreiben Sie also den folgenden Text in Ihre im Grundlagen-Teil erstellte 'index.xhtml':
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml"
version="XHTML+RDFa 1.1"
xml:lang="de">
<head>
<title>Titel des Dokumentes</title>
<link rel="stylesheet"
href="screen.css"
type="text/css"
media="screen" />
<link rel="stylesheet"
href="print.css"
type="text/css"
media="print" />
</head>
<body>
<h1>Dokumentüberschrift</h1>
<p>Ein (sinnvoller) Gedanke könnte hier
in einem Absatz notiert werden.</p>
<p>Weitere Absätze können natürlich folgen.</p>
<h2>Kapitelüberschrift</h2>
<p>Mit Überschriften kann das Dokument natürlich auch
in Kapitel oder Abschnitte aufgeteilt werden.</p>
</body>
</html>
Mit der Ergänzung des Attributes media= haben Sie angegeben, welche CSS-Datei für welches Ausgabemedium verwendet werden soll.
Falls Sie unter Linux arbeiten, ist zu empfehlen, die 'print.css' mit der 'screen.css' zu verlinken, solange Sie keine separate 'print.css' nutzen, den Eintrag im Quelltext aber schon vorbereitet haben möchten:
ln -s screen.css print.css
Bitte beachten Sie außerdem, dass die CSS-Klassen
((X)HTML-Attribut class="Klassenname"; im CSS .Klassenname) und die
CSS-IDs
((X)HTML-Attribut id="ID"; im CSS #ID) für die jeweiligen (X)HTML-Elemente in der Druck-Version des CSS genau so benannt werden müssen wie Sie diese auch schon in der normalen Version benannt haben, da die einzelnen XHTML-Elemente im XHTML-Dokument notiert werden und dieses Dokument nur einmal (für alle media-Typen) existiert.
Außerdem sollten Sie, wenn Sie für die normale Version zwei CSS-Dokumente erstellt haben, auch zwei CSS-Dokumente für die Druckversion mit der gleichen Aufteilung erstellen, um eine bessere Übersicht zu haben.