webmaster.cx - CSS-Tipps & Tricks - CSS richtig einbinden

Freitag, 18. Mai 2012

CSS richtig einbinden
Stylesheets können im Kopf der HTML- Datei definiert werden, als externe Datei verlinkt oder importiert werden. Du kannst Styles auch direkt im betreffenden <Tag> angeben. Dies ist allerdings nur für kurzfristige Änderungen empfehlenswert. Auf diese Definition wird hier nicht näher eingegangen, denn sie entspricht nicht dem Konzept der Trennung von Inhalt und Layout. Die anderen Einbindungsmöglichkeiten bringen die Vorteile von CSS besser zur Geltung.

Im Kopf der HTML-Datei
Die Definition wird eingeleitet mit dem Tag <style>, dem Attribut type und dem Parameter "text/css"

CODE:
<head>
<title>Webmaster.cx</title>
<style type="text/css"></style>

Externes Stylesheet
Wird über das Tag-Element "link" im HTML-Head eingebunden. Bei externen Stylesheets kann die Definition der einzelnen Tag-Style-Attribute direkt erfolgen.

CODE:
<link rel="stylesheet" type="text/css" media="screen" href="style.css">

@Import
Sollen Stylesheets für verschiedene Ausgabemedien definiert werden, so kann man die Einbindung auch so vornehmen:

CODE:
<style type="text/css"></style>

oder, wenn die Ausgabemedien in verschiedenen Stylesheets definiert sind:

CODE:
<style type="text/css"></style>

Attribut Media
CSS2 bietet die Möglichkeit, Stylesheets für verschiedene Medien wie Bildschirm, Drucker oder Handheld zu definieren. Das Attribut Media media="screen" notiert das Medium. Ein Stylesheet kann durch Kommata getrennt mehreren Medien zugewiesen werden.

CSS2 unterscheidet folgende Medien