Websiteentwicklung: CSS: Einbau in HTML/XML
Aus Wikibooks
CSS-Anweisungen lassen sich direkt in ein HTML/XHTML-Dokument einbauen oder aus externen Stylesheets des Typs text/css einbinden. Die beiden Methoden lassen sich auch kombinieren. Meistens hat man eine größere Anzahl von HTML-Dateien, die gleich „gestylt“ werden sollen, so ist ein externes Stylesheet, das in die HTML-Dateien eingebunden wird, vorzuziehen, da man die CSS-Regeln nur einmal formulieren muss. Auch wird so eine Änderung im externen Stylesheet direkt auf allen HTML Seiten ersichtlich.
[Bearbeiten] CSS-Regeln im (X)HTML-Dokument
Global geltende Regeln werden im Kopf der HTML-Datei (zwischen <head></head>) eingebaut. Sie werden nach dem HTML-Tag <style> formuliert und enden wieder mit dem abschließenden Tag </style>.
Eine andere Möglichkeit ist, die CSS-Regeln direkt im betreffenden HTML-Tag als style-Attributwerte zwischen den Anführungszeichen zu formulieren, z.B.:
<img style="border:0;width:88px;height:31px" src="vcss.png" alt="Valid CSS!" />
[Bearbeiten] Einbinden von externen CSS-Dateien in (X)HTML
Das Einbinden von externen CSS-Dateien geschieht im Kopf (zwischen <head></head>) der HTML-Datei. Hierbei gibt es zwei Möglichkeiten:
- Mit dem
link-Element für XHTML:
<link rel="stylesheet" href="screen.css" type="text/css" />
- Anmerkung: der Slash (
/) am Ende des<link>-Tags muss nur bei XHTML geschrieben werden.
- Mit dem
style-Element und@import:
<style type="text/css"> @import "screen.css"; </style>
Inzwischen ist die erste Variante gebräuchlicher.
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.html":
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link rel="stylesheet" href="screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <title>Meine erste Homepage</title> </head> <body> <p>Hallo Welt</p> </body> </html>
Mit der Ergänzung "media=" haben Sie definiert, welche CSS-Datei für welches Ausgabemedium verwendet werden soll.
Falls Sie unter Linux arbeiten, empfehle ich Ihnen, die print.css mit der screen.css zu verlinken, so lange Sie keine separate print.css nutzen, den Eintrag im HTML-Code aber schon vorbereitet haben möchten.
ln screen.css print.css
Bitte beachten Sie außerdem, dass die CSS Gruppen oder IDs für die jeweiligen XHTML Elemente genau so benannt werden müssen wie Sie sie auch schon in der screen Version genannt haben, da die Definition der einzelnen XHTML Elemente im XHTML Dokument vorgenommen werden, dieses aber nur 1 mal existiert. Außerdem sollten Sie (der IE stellt die Website auch bei nicht beachten dieser Regel korrekt dar), wenn Sie für die screen Version 2 CSS Dokumente erstellt haben, auch 2 screen Dokumente erstellen mit der gleichen Aufteilung.
äülöpüklüp,klä
