CSS in eine Seite einbinden

Es gibt drei Möglichkeiten CSS in eine Seite einzubinden.

style Attribut

Das Style Attribut ist ein sogenannete Universalattribut und kann in nahezu allen Elementen verwendet werden.

<p style="text-align: center; font-style: italic;">Absatz</p>

Nach Möglichkeit sollte ein Element nicht auf diese Art formatiert werden, da die Trennung zwischen Struktur und Formatierung nicht mehr gegeben ist.

style Element

im <head>

<style type="text/css">
  p {
      text-align: center;
      font-style: italic
    }
</style>

Auch diese Art der Formatierung solltest du nur in begründeten Ausnahmefällen anwenden.

im <head>

<link rel="stylesheet" media="all" type="text/css" href="formatierung/meins.css" />

Wenn möglich lagerst du die Formatierung in ein externes Stylesheet aus. Dort sind alle Angaben zur Formatierung hinterlegt.

Dauerhafte Einbindung

Über das Attribut rel mit dem Wert stylesheet

<link rel="stylesheet" media="screen,projection" type="text/css"
href="/formatierung/meins.css" />


Solange nicht vom Nutzer überschrieben ist das Stylesheet immer aktiv.

Gewünschte Einbindung

Über das Attribut title mit einem beliebigen Wert kommt hinzu.

<link rel="stylesheet" media="screen,projection" type="text/css"
title="Mein Stylesheet" href="formatierung/meins.css" />


Nun kann der Nutzer Stylesheets auswählen.

Alternative Stylesheets

Über das Attribut rel erhält den Wert alternate stylesheet.

<link rel="alternate stylesheet" media="screen,projection" type="text/css"
title="Mein anderes Stylesheet" href="formatierung/meins-zwei.css" />


Nun kann der Nutzer zwischen den Stylesheets wählen.

Stylesheets zum Testen

Das w3c stellt einige Stylesheets zum Testen bereit. Sie sind zwar etwas veraltet, erfüllen jedoch ihren Zweck.

Einfach flogenden code in den <head></head> Bereich deiner Seite einbinden.

<link  rel="stylesheet" title="meinStylesheet"  
type="text/css" media="screen,projection"   
href="http://www.w3.org/StyleSheets/Core/Midnight" />

Neben Midnight gibt es noch Chocolate, Modernist, Oldstyle, Steely, Swiss, Traditional, und Ultramarine. Ersetze im Quelltext Midnight durch eines der angegebenen Wörter und betrachte das Ergebnis.

Ausgabemedien


Es gibt verschiedene Ausgabemedien:

Typ Medium
all Für alle Geräte.
aural Für Sprachbrowser, die den Inhalt der Webseite vorlesen.
braille Für Ausgabegeräte mit sogenannter Braillezeile. Der Text der Webseite wird in eine veränderte Oberflächenstruktur der Braillezeile umgewandelt und ist so für blinde Menschen tastbar.
embossed Für »Brailledrucker«. Der Text der Website wird dabei gestanzt und ist dann für blinde Menschen tastbar.
handheld Für kleine Handcomputer wie Palms oder Mobiltelefone, zumeist mit kleinen monochromen Bildschirmen und geringer Bandbreite.
print Für die Ausgabe durch Drucker.
projection Für Projektoren und ähnliche Geräte. (Opera für Vollbilddarstellung)
screen Für die Ausgabe auf dem Bildschirm, also auf einem Computermonitor.
tty Für die Ausgabe auf nicht grafischen Ausgabemedien mit Festbreitenschrift, wie zum Beispiel Terminals oder auch Textbrowser wie Lynx.
tv Für die Ausgabe auf Fernsehern oder ähnlichen Geräten.





Startseite > Programmieren > CSS > CSS einbinden

programmieren/css/css_einbinden.txt · Zuletzt geändert: 10.11.2014 16:43 (Externe Bearbeitung)
CC Attribution-Noncommercial-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0