Fünf Wege der CSS-Integration: einfacher mit @import
CSS und XHTML haben die Arbeit des Webdesigners geradezu revolutionär vereinfacht. Die Zeiten der endlosen HTML-4.01-Quellcode-Wurst sind durch das Verschwinden des Font-Tags und die Einführung der pixelgenauen Positionierung endlich vorbei.
Bei großen Projekten und komplexen Layouts wird aber auch unser schöner, neuer CSS-Code schnell zum “Pflegefall”. Ab einigen hundert Zeilen wird eben jeder Quellcode etwas unübersichtlich, da hilft auch die schönste Technik nichts…
Nach einer kurzen Wiederholung der gängigen CSS-Integrationstechniken zeige ich Ihnen, wie Sie sich das Leben durch eine sinnvolle Aufteilung des CSS-Codes deutlich erleichtern können. Durch die vereinfachte Wiederverwendung von CSS-Definitionen geht Ihnen die Arbeit in Zukunft vielleicht sogar etwas schneller von der Hand.
Vom Detail zum Gesamtprojekt - 4 Klassiker der CSS-Integration
CSS-Formatierung einzelner Elemente (Styles inline definieren)
Der direkteste Weg ist das Einbinden von CSS-Stilen in ein HTML-Element per Style-Attribut.
<p style="color:red;font-weight:bold;">fetter, roter Text</p>
Auf diese Inline-Definition sollte man aber nur in Ausnahmefällen zurückgreifen. Setzt man sie zu häufig ein, bekommt man ähnliche Probleme wie schon zu Zeiten von Font-Tag und HTML 4.01. Der Quellcode läuft über vor Definitionen, die alle einzeln gesucht und angepasst werden müssen.
CSS-Definition im Header einer Seite
Um Styles für eine einzelne Datei zentral im Header zu definieren, wird der HTML-Tag <style…> verwendet.
<style type="text/css">
<!--
/* CSS-Klassen hier definieren... */
-->
</style>
In diesem Fall haben wir die einzelnen HTML-Elemente zwar erfolgreich von ihrem Style-Balast befreit, bekommen aber erneut Redundanzen (mehrfache Definitionen), wenn wir es mit mehreren HTML-Dokumenten zu tun haben, die sich die selben Stil-Definitionen teilen. Außerdem wird, wie übrigens auch im vorigen Beispiel, der CSS-Code bei jedem Seitenaufruf neu geladen. Ladezeit, die man einsparen kann!
Einbinden externer Stylesheets über CSS-Dateien
Eine gute Lösung für mehrseitige Webprojekte ist es daher, die notwendigen CSS-Klassen in eine eigene Datei auszulagern und diese mit dem Link-Element im Header zu laden.
<link rel="stylesheet" type="text/css" href="styles.css">
Im Bedarfsfall können einzelne Stile im jeweiligen HTML-Dokument noch überschrieben werden. Als Regel gilt: die Inline-Definition überschreibt <style…> und <style…> überschreibt gleichnamige Definitionen aus der verlinkten CSS-Datei.
CSS durch CSS integrieren mit @import
@import ist sozusagen die CSS-Variante des HTML-Elements <link…>, das wir im vorigen Absatz schon kennengelernt haben. Mit @import ist es möglich, CSS-Dateien aus dem CSS-Code heraus einzubinden:
<style type="text/css">
@import url(styles.css);
</style>
4+1 = 5 - CSS-Integrationstechniken einfach kombinieren
Um den CSS-Code übersichtlicher zu gestalten, bietet es sich an, zusammengehörige Definitionen in einzelne Dateien auszulagern und diese, je nach Bedarf, zu kombinieren. So können häufig verwendete Stile (z.B. für das Layout von Formularen) in jedem neuen Projekt ganz einfach wiederverwendet werden. Dazu muss man die entsprechende CSS-Datei eigentlich nur in das Projektverzeichnis kopieren und verlinken.
Damit die Header der HTML-Dokumente nicht unübersichtlich wird, legt man am besten eine zentrale CSS-Datei an, die die verwendeten Stile per @import lädt. Diese verknüpft man dann per <link…> mit den Dokumenten und braucht sich um das HTML nun nicht mehr zu kümmern.
Alle notwendigen Importe lassen sich jetzt nämlich ganz übersichtlich in einer einzigen Datei vornehmen. Da mit der CSS-Angabe @import auch Angaben zum Ausgabemedium gemacht werden können, kann über diese Datei problemlos die gesamte Ausgabeformatierung kontrolliert werden. Leider wird die Angabe des Ausgabemediums für @import nicht von allen Browsern unterstützt. Mehr dazu auch hier.
Der Header unseres HTML-Dokuments:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ihr Titel</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/controller.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="css/handheld.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
</head>
Die Datei controller.css:
@import url(styles.css);
@import url(layout.css);
@import url(menu.css);
@import url(forms.css);
Die Datei handheld.css:
@import url(styles_mobile.css);
@import url(layout_mobile.css);
Da die CSS-Styles für den Druck nur aus einer Datei bestehen, reicht hier das Einbinden von print.css mit dem Link-Tag aus.
Weitere Beiträge, die dich interessieren könnten:
Das ist interessant. Als PHP-DAU habe ich in der WP-header-PHP drin:
” type=”text/css” media=”screen” />
Für die Datei style.css im Theme will ich eine 2. als ALternative machen (style2.css), ein wenig anders die FArben usw., damit sich der Kunde eine Variante aussuchen kann. Wie geht dann das?
Danke für eine hilfreiche Antwort!