CSS/Einbindung

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

In diesem Abschnitt wird zusammengefasst, wie ein Stylesheet von einem Dokument eingebunden werden kann.

Inhaltsverzeichnis

[Bearbeiten] Beschaffenheit einer CSS-Datei

Stylesheets in separate Dateien auszulagern bringt viele Vorteile mit sich. So kann eine Datei von mehreren Dokumenten eingebunden werden, muss aber vom Browser nur einmal geladen werden.

CSS-Dateien bestehen aus reinem Text, als Dateiendung hat sich „.css“ durchgesetzt. Ein Browser darf eine CSS-Datei nur dann verarbeiten, wenn diese den Medientyp „text/css“ besitzt. Diese Anforderung sollte von jedem Betriebssystem und jeder Serversoftware erfüllt werden. Dennoch kann eine Fehlkonfiguration dazu führen, dass ein Stylesheet nicht verarbeitet wird.

[Bearbeiten] Stylesheets in HTML einbinden

[Bearbeiten] Einbinden einer externen Datei

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • HTML 3.2
  • XHTML 1.0
  • CSS 1.0

Mit dem HTML-Element link können externe Stylesheets eingebunden werden. Die einzelnen Anforderungen, die das Element erfüllen muss, werden nachfolgend beschrieben.

Beispiel
<link rel="stylesheet" href="stylesheet.css" type="text/css">
Hinweis: Das link-Element ist ein Kindelement des head-Elements.

Mit dem Attribut rel wird der Beziehungstyp des Elements definiert. „stylesheet“ bedeutet, dass ein Stylesheet eingebunden werden soll.

Das href-Attribut referenziert die einzubindende Stylesheetdatei.

Diese beiden Attribute sind erforderlich und ausreichend um ein Stylesheet einzubinden. Das link-Element kann aber noch weitere Attribute besitzen, die auf Stylesheets eine Wirkung haben.

Das type-Attribut enthält den Medientyp der einzubindenden Datei, für CSS also „text/css“. Die Angabe dient dem Browser jedoch nur als Hinweis. Ist ein anderer Wert hinterlegt, wird die Datei nicht eingebunden, selbst wenn es sich um eine CSS-Datei mit korrektem Medientyp handelt. So wird vermieden, dass Stylesheets eingebunden werden, die der Browser nicht verarbeiten kann. Für HTML-Dokumente, die nicht nach der HTML5-Spezifikation geschrieben sind, ist ein type-Attribut verpflichtend. Es enthält den Medientyp der einzubindenden Datei, für CSS also „text/css“. Ist ein anderer Wert hinterlegt, wird das Stylesheet nicht verarbeitet, selbst wenn die Regeln korrektem CSS entsprechen.

Mit dem media-Attribut kann festgelegt werden, dass ein Stylesheet nur dann verarbeitet werden soll, wenn das Dokument von einem bestimmten Ausgabemedium ausgegeben wird. Als Attributwert ist eine Medienabfrage erlaubt, beispielsweise „screen“ für Bildschirme oder „print“ für Drucker (siehe: medienspezifische Stylesheets). Ist das Attribut nicht definiert, gilt der Wert „all“. Das Stylesheet wird dann unabhängig vom verwendeten Ausgabemedium verarbeitet.

Durch das title-Attribut kann der Titel des Stylesheets definiert werden. Werden mehrere Stylesheets eingebunden, die einen Titel besitzen, werden alternative Stylesheets definiert.

Sie können für jede Internetseite beliebig viele Stylesheets einbinden. Beachten Sie dabei jedoch sowohl die Regeln zur Reihenfolge der Abarbeitung von CSS-Deklarationen als auch die Hinweise zur Performanceoptimierung.

[Bearbeiten] Formate zentral in einem style-Element festlegen

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • HTML 3.2
  • XHTML 1.0
  • CSS 1.0

Das HTML-Element style erlaubt es, Formate zentral in einem HTML-Dokument festzulegen.

Beispiel
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stylesheet in einem style-Element definieren</title>
    <style>
      h1 { color: green; }
    </style>
  </head>
  <body>
    <h1>Einbinden per <code>style</code>-Element</h1>
    <p>Obige Überschrift wird in grüner Farbe dargestellt.</p>
  </body>
</html>
In diesem Beispiel wird das Format für das Überschriftenelement h1 innerhalb eines style-Elements festgelegt. Das style-Element ist ein Kindelement des head-Elements.


Die Attribute media und title können ebenfalls im style-Element definiert werden. Art und Effekt dieser Attribute ist identisch zu den Attributen des link-Elements.

[Bearbeiten] Formate direkt in einem style-Attribut festlegen

  • IE 3
  • Opera 5.12
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • HTML 3.2
  • XHTML 1.0
  • CSS 1.0

Neben der Möglichkeit, Formatvorlagen zentral festzulegen, gibt es in HTML auch die Möglichkeit, Eigenschaften einem Element direkt zuzuweisen. Viele Elemente in HTML besitzen zu diesem Zweck ein style-Attribut.

In einem style-Attribut sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich.

Beispiel
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Formate direkt festlegen</title> </head> <body> <h1 style="text-align: center; text-decoration: underline;"> Formate direkt festlegen </h1> <p>Obige Überschrift wird zentriert und unterstrichen dargestellt.</p> </body> </html>
Dieses Beispiel zeigt, wie einem Element per style-Attribut verschiedene Formate zugewiesen werden können.
Beachten Sie: Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während die Flexibilität sich verringert. Inline-Styles sind an ein Dokument gebunden und können nicht an zentraler Stelle bearbeitet werden.

[Bearbeiten] Formate für unterschiedliche Ausgabemedien festlegen

Sogenannte Medienabfragen (Media Queries) erlauben es, für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones aber auch Drucker abweichende Darstellungen festzulegen.

[Bearbeiten] Stylesheets in XML einbinden

  • Opera 6.0
  • Firefox 1.0
  • Konqueror 3.1
  • Safari 1.0
  • Chrome 4
  • XML 1.0

XML-Dokumente können Stylesheets mit der „xml-stylesheet“-Verarbeitungsanweisung einbinden.

Beispiel
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="stylesheet.css" ?>
<beispiel>
 <text>Dies ist ein beispielhaftes XML-Dokument.</text>
</beispiel>
Dieses mögliche XML-Dokument bindet ein externes Stylesheet mit Hilfe der „xml-stylesheet“-Verarbeitungsanweisung ein.

Diese Verarbeitungsanweisung kann mehrere Attribute besitzen.

Das href-Attribut ist ein Pflichtattribut und referenziert die einzubindende Stylesheetdatei.

Die Attribute type und media können ebenfalls gesetzt werden. Ihre Wirkung entspricht den gleichnamigen Attributen bei link- und style-Elementen.

Durch das charset-Attribut kann dem Browser ein Hinweis gegeben werden, in welcher Kodierung das Stylesheet vorliegt. Die Angabe besitzt hinweisenden Charakter. Sie wird nur dann verarbeitet, wenn mit dem Stylesheet selbst keine Informationen über die verwendete Kodierung verfügbar wird.

Auch in XML-Dokumenten können alternative Stylesheets definiert werden. Hierzu muss das Stylsheet als solches gekennzeichnet werden. Dies erfolgt durch das Attribut alternate, sofern es den Wert „yes“ erhält. Wird das Attribut nicht angegeben, gilt automatisch der Wert „no“, durch den kein alternatives Stylesheet definiert wird.

Sofern das alternate-Attribut den Wert „yes“ besitzt, wird die Angabe des title-Attributs erforderlich.

[Bearbeiten] Formate zentral in einem Element festlegen

  • IE 9
  • Firefox 1.0

Mit der „xml-stylesheet“-Verarbeitungsanweisung kann auch ein Stylesheet referenziert werden, dass sich innerhalb des Dokuments befindet. Dazu wird im href-Attribut die Referenz auf ein Element mit einer ID notiert.

Beispiel
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/css" href="#formatvorlagen" ?>
<beispiel>
 <formatierung id="formatvorlagen">
 text { font-weight: bold; }
 </formatierung>
 <text>Dieser Text soll in Fettschrift dargestellt werden.</text>
</beispiel>
In diesem XML-Dokument wird kein externes Stylesheet eingebunden, sondern der Inhalt eines Elements an die Formatierungsmechanik weitergegeben.
Beachten Sie: Das Referenzieren eines Elements erlauben nur Firefox und Internet Explorer ab Version 9 (Stand April 2011). Beide jedoch fehlerhaft: Anstatt des Elementinhalts wird das gesamte Dokument als Stylesheet verarbeitet. Dadurch werden eigentlich korrekte Regeln nicht richtig erkannt und ignoriert.

[Bearbeiten] Alternative Stylesheets

  • IE 7
  • Opera 6.0
  • Firefox 1.0
  • Safari 3.0

Bereits mehrfach wurde angesprochen, dass so genannte alternative Stylesheets definiert werden können.

Üblicherweise werden alle Stylesheets, ob extern gelagert oder innerhalb des Dokuments definiert, zusammengefasst und als Einheit verarbeitet. Durch das definieren eines Titels für das link- oder das style-Element wird das entsprechende Stylesheet von anderen Stylesheets (auch „bevorzugtes Stylesheet“ genannt) abgegrenzt.

Ein Browser kann anhand der Titel-Informationen ein Standardstylesheet (das „bevorzugte Stylesheet“) und alternative Stylesheets in ener Liste zusammenfassen, die dem Benutzer zur Auswahl angeboten werden.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Beispiel für alternative Stylesheets</title>
    <style title="seriös">
      html { font-family: serif; }
      .demo { display: inline-block; border: 1px solid #bbb; background: #ddd; padding: 1em;}
      .demo span::after { content: "'seriös'"; }
    </style>
    <style title="Fantasy">
      html { font-family: fantasy; }
      .demo { display: inline-block; border: 5px solid red; background: gold; padding: 1em;}
      .demo span::after { content: "»Fantasy«"; }
    </style>
  </head>
  <body>
    <h1>Beispiel für alternative Stylesheets</h1>
    <p class="demo">Sie verwenden den Stil <span></span>.</p>
    <p>Manche Browser bieten die Möglichkeit, alternative Stylesheets zu verwenden.</p>
    <p>Im Firefox etwa können Sie über den Menüpunkt (Menüleiste muss aktiviert sein) <kbd>Ansicht/Webseitenstil</kbd>
       die verschiedenen Stylesheets auswählen.</p>
  </body>
</html>
In diesem Beispiel werden zwei Stylesheets definiert. Das erste Stylesheet oder ein Stylesheet ohne title-Attribut wird als Standard verwendet.
Ein Browser kann dem Benutzer nun anzeigen, dass ein alternatives Stylesheet vorhanden ist. Wählt der Benutzer dieses aus, wird die Seite nach dessen Regelwerk dargestellt.
Beachten Sie: Die Vereinbarungen der nicht gewählten Stylesheets werden dabei komplett ignoriert, es ist also nicht möglich, auf diese Weise zusätzliche CSS-Regeln zu vereinbaren.

Besitzen alle Elemente einen Titel, so wird das erste Element als bevorzugtes Stylesheet gewertet und alle anderen als alternative Stylesheets.

Beachten Sie: Werden alternative Stylesheets mit Hilfe des style-Elements definiert, ignoriert der Internet Explorer bis Version 9 dies und verarbeitet alle style-Elemente gemeinsam. Sie können dieses Problem umgehen, wenn Sie stattdessen Stylesheets per link-Element einbinden.

[Bearbeiten] zusätzliche Stylesheets im CSS einbinden

Es gibt die Möglichkeit, Stylesheets aus unterschiedlichen Quellen zusammenzuführen. Dafür wird eine @import-Regel verwendet.

[Bearbeiten] Stylesheet über HTTP einbinden

  • Opera 5.12
  • Firefox 1.0

Eine Möglichkeit, ein einzelnes Stylesheet in ein Dokument einzubinden, ohne dass Stylesheet und Dokument direkt miteinander verknüpft werden müssen, gibt der HTTP-Header „Link“. Dieser ähnelt in seiner Funktion dem gleichnamigen HTML-Element, funktioniert aber sowohl für HTML- als auch für XML-Dokumente.

Beispiel
Link: <stylesheet.css>;rel=stylesheet

Dem Namen des Headers, „Link“, folgt ein Doppelpunkt. Innerhalb von Spitzklammern wird die einzubindende Datei genannt. Darauf folgend können Attribute hinzugefügt werden. Diese beginnen mit einem Strichpunkt, gefolgt vom Attributnamen, einem Gleichheitszeichen sowie dem Wert des Attributs.

Neben dem rel-Attribut sind auch die Attribute type, media und title erlaubt. Die Wirkung der Attribute entspricht den gleichnamigen Attributen des link-Elements.

Beachten Sie: Über den HTTP-Header können Sie nur ein einziges Stylesheet einbinden. Bei mehrfachem Vorkommen des Headers wird das zuletzt festgelegte Stylesheet eingebunden.

Achtung!

Das Einbinden eines Stylesheets über HTTP erlauben nur Mozilla Firefox und Opera. Andere Browser ignorieren den Header.

[Bearbeiten] Variante als Meta-Angabe

  • Opera 5.12
  • Firefox 1.0

Mit Hilfe eines meta-Elements kann das Einbinden eines Stylesheets über HTTP emuliert werden.

Beispiel
<meta http-equiv="Link" content="<stylesheet.css>;rel=stylesheet;media=print"/>
Hinweis: Das meta-Element ist ein Kindelement des head-Elements. Die sich öffnende Spitzklammer muss maskiert werden, damit beispielsweise bei der Verarbeitung von XHTML kein Fehler entsteht.

Achtung!

Mozilla Firefox unterstützt diese Variante des meta-Elements ab Version 4.0 nicht mehr.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke