CSS/Tutorials/Einstieg/Stylesheets einbinden

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Es gibt mehrere Möglichkeiten, Formatfestlegungen mit CSS in HTML-Dokumenten einzubinden.


← Warum Layouts mit CSS?
Syntax →

Formate direkt in einem style-Attribut festlegen

Mit dem Universalattribut style können Sie Eigenschaften einem Element direkt zuweisen. Dabei sind nur Deklarationen, also Eigenschaft-Wert-Zuweisungen möglich.

Formate direkt festlegen ansehen …
<p style="text-align: center; color: green;">
  Dieser Absatz wird über ein style-Attribut formatiert. 
</p>
Dieses Beispiel zeigt, wie einem p-Element per style-Attribut verschiedene Formate zugewiesen werden können. Diese Festlegung gilt aber nicht für weitere Textabsätze.
ansehen …
Beachten Sie: Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden.

Formate zentral in einem style-Element festlegen

Das HTML-Element style erlaubt es, Formate zentral im head des HTML-Dokuments festzulegen.

Beispiel ansehen …
<!doctype html>
<html lang="de">
  <head>
    <style>

    h1 { 
       background-color: green;
       color: white;
    }
    p {
    	text-align: center; 
    	color: green;
    }

    </style>
  </head>
In diesem Beispiel wird das Format für das Überschriftenelement h1 und alle Textabsätze des Dokuments innerhalb eines style-Elements festgelegt. Das style-Element ist ein Kindelement des head-Elements.
ansehen …

Einbinden einer externen Datei

Im Normalfall besteht eine Webpräsenz aus mehreren (oft hunderten) von Seiten, die alle gleich formatiert werden sollen. Hier hat es sich durchgesetzt, das CSS in einem eigenen externen Stylesheet mit der Endung .css abzuspeichern und mit dem HTML-Element link direkt im head einzubinden.

Einbinden eines externen Stylesheets 
<!doctype html>
<html lang="de">
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    ...
Das link-Element ist ein Kindelement des head-Elements.

Folgende Attribute gibt es:

  • rel definiert den logischen Beziehungstyp des Elements. „stylesheet“ bedeutet, dass ein Stylesheet eingebunden werden soll.
  • href: 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.

  • type: enthält den Medientyp der einzubindenden Datei, für CSS also „text/css“. Da dies in HTML der Standard Typ ist, kann es weggelassen werden.
  • media: kann festlegen, 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 Standardwert all. Das Stylesheet wird dann unabhängig vom verwendeten Ausgabemedium verarbeitet.
  • title: 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.

ein Layout - oder doch mehrere?

Früher wurden Webseiten oft für eine bestimmte Browserversion und eine festgelegte Bildschirmauflösung entwickelt. Da es zwischen den Browsern gravierende Darstellungsunterschiede gab, wurden mittels einer Browserweiche verschiedene Stylesheets geladen.

Heutzutage geht es eher darum, Webseiten auf allen verfügbaren Ausgabegeräten vom Smartphone bis zum Riesen-Monitor gleichermaßen lesbar zu machen. Wenn die Seitenbreite zur Darstellung der Inhalte nicht mehr ausreicht, werden sie mittels media queries automatisch in ein neues, passendes Design verschoben.

Empfehlung: Das Arbeiten mit CSS erlaubt es, mit Medienabfragen (Media Queries) für Ausgabemedien mit bestimmten Eigenschaften, etwa Tablets, Smartphones aber auch Drucker abweichende Darstellungen innerhalb eines Stylesheets festzulegen. Passen Sie Ihr Layout flexibel an.


← Warum Layouts mit CSS?
Einstieg in CSS
(Übersicht)
Syntax →

Siehe auch

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Einstieg/Stylesheets_einbinden&oldid=64455“