CSS: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 17. August 2009, 09:48 Uhr

Ein wesentliches Merkmal einer Auszeichnungssprache ist die Trennung von Inhalt, Struktur und Layout der Dokumente. Dieses Prinzip wurde anfänglich in HTML nicht konsequent umgesetzt: Es existieren zahlreiche Tags zur Layoutge¬staltung. Zur Trennung von Layout und Struktur dienen Cascading Stye Sheets (CSS).

Grundlagen

CSS ist die Abkürzung für Cascading Style Sheets und die Formatierungssprache für HTML. CSS wurde in den 90er Jahren als Standard vom World Wide Web Consortium (W3C) ^[1] verabschiedet und wird mittlerweile von allen gängigen Browsern fast zu 100% implementiert.

Ein wesentliches Merkmal einer Auszeichnungssprache ist die Trennung von Inhalt, Struktur und Layout der Dokumente. Dieses Prinzip wurde anfänglich in HTML nicht konsequent umgesetzt: Es existieren zahlreiche Tags zur Layoutge¬staltung. Zur Trennung von Layout und Struktur dienen Cascading Stye Sheets (CSS), die mit den HTML-Dokumenten verknüpft werden oder in eine HTML- Datei direkt eingebunden werden können. Die Funktionsweise von CSS1 (stan¬dardisiert 1996) ist in etwa vergleichbar mit Druckformatvorlagen in Textverar¬beitungsprogrammen. Die Möglichkeiten bei der Verwendung von CSS2 (stan-dardisiert bereits 1998) gehen dabei, soweit dies der Client unterstützt, im Bereich des seitenorientierten Layouts weit über die Tags zur optischen Präsentation in HTML hinaus und in Kombination mit HTML eignet sich CSS auch als vollwer¬tige Seitenbeschreibungssprache, wie beispielsweise Postscript. Die Ausgabe ist aber nicht nur auf eine optische Präsentation begrenzt, es existieren auch Befehle für die akustische Ausgabe.

Aufbau einer CSS Regel

Eine CSS Regel ist immer nach folgendem Schema aufgebaut:

Selektor { Attribut: Wert; }

Der Selektor steht für jedes zu formatierende HTML-Element. Das Attribut oder auch Eigenschaft genannt, stellt die Möglichkeit dar, wie ein HTML-Element formatiert werden kann. Die Möglichkeiten richten sich hier nach dem Element selbst. Der Wert definiert die konkrete Gestalt der Formatierung und kann bspw. in Pixel, Farbcodes oder anderen Einheiten angegeben sein.

Ein einfacher Absatz kann mithilfe folgender Regel formatiert werden:

p {
    font-size: 12px;
    color: black;
}

Kommentare werden auf zwei Arten verwendet, einerseits können kurze Textstellen zur Erklärung geschrieben werden, man kann aber auch die Regel mit Hilfe eines Kommentars 'ausblenden' bzw. deaktivieren.

/* Kommentar für einfachen Absatz */
p {
    font-size: 12px;
    color: green;
}

/* Die folgende Regel kommt nicht zur ausführung, da sie auskommentiert ist */
/*
h1 {
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
*/

Einbinden in HTML

CSS Regeln können auf 3 unterschiedliche Arten in HTML eingebunden werden.

Verwendung als Style Attribut

<p style="font-weight: bold;">fett geschriebener Absatz</p>

Nachteil: Man benötigt für jeden Absatz, den man speziell formatieren möchte, dieses style-Attribut im <p>-Tag. Ändert man die Formatierung für Absätze, müsste jeder Absatz händisch umformatiert werden.

Style Element

  <head>
    <title>CSS-Einbindung per 'style'-Element</title>
    <style type="text/css">
      p {
        font-weight: bold;
      }
    </style>
  </head>

Vorteil: Ersparnis von Formatierungen jedes einzelnen Elements
Nachteil: Jede einzelne Seite muss mit dem style-Bereich ausgestattet werden. Bei mehreren Seiten erhöht sich der Wartungsaufwand

Als Link zu einer ausgelagerten CSS Datei

<link rel="stylesheet" type="text/css" href="format.css" />

Der große Vorteil an Variante 3 ist die zentrale Datei, die Änderungen werden dann sofort für alle Seiten übernommen, die diese Datei eingebunden haben. Es sinkt somit die Fehleranfälligkeit, man vermeidet Codeverdopplung und erhöht somit die Wartbarkeit der Website.

Literatur

Quellen

↑ http://www.w3.org/

Weiterführende Links

[1] ttp://www.w3.org/

[1]

@@ Zeile 9: / Zeile 9: @@
 CSS ist die Abkürzung für Cascading Style Sheets und die Formatierungssprache für HTML. CSS wurde in den 90er Jahren als Standard vom World Wide Web Consortium (W3C) <ref>http://www.w3.org/</ref> verabschiedet und wird mittlerweile von allen gängigen Browsern fast zu 100% implementiert.
-Mit CSS ist es möglich, das Konzept der Trennung von Content und Design umzusetzen, was in reinem HTML nicht möglich ist.
+Ein wesentliches Merkmal einer Auszeichnungssprache ist die Trennung von Inhalt, Struktur und Layout der Dokumente. Dieses Prinzip wurde anfänglich in HTML nicht konsequent umgesetzt: Es existieren zahlreiche Tags zur Layoutge¬staltung. Zur Trennung von Layout und Struktur dienen Cascading Stye Sheets (CSS), die mit den HTML-Dokumenten verknüpft werden oder in eine HTML- Datei direkt eingebunden werden können. Die Funktionsweise von CSS1 (stan¬dardisiert 1996) ist in etwa vergleichbar mit Druckformatvorlagen in Textverar¬beitungsprogrammen. Die Möglichkeiten bei der Verwendung von CSS2 (stan-dardisiert bereits 1998) gehen dabei, soweit dies der Client unterstützt, im Bereich des seitenorientierten Layouts weit über die Tags zur optischen Präsentation in HTML hinaus und in Kombination mit HTML eignet sich CSS auch als vollwer¬tige Seitenbeschreibungssprache, wie beispielsweise Postscript. Die Ausgabe ist aber nicht nur auf eine optische Präsentation begrenzt, es existieren auch Befehle für die akustische Ausgabe.
 == Aufbau einer CSS Regel ==