CSS: Unterschied zwischen den Versionen

Aktuelle Version vom 1. Oktober 2018, 14:07 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 Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stlye Sheets (CSS).

Grundlagen

CSS ist die Abkürzung für Cascading Style Sheets und die Formatierungssprache für HTML. CSS wurde in den 90-er 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 Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stlye Sheets (CSS), die mit den HTML-Dokumenten verknüpft werden oder in eine HTML-Datei direkt eingebunden werden können. Die Funktionsweise von CSS1 (standardisiert 1996) ist in etwa vergleichbar mit Druckformatvorlagen in Textverarbeitungsprogrammen. Die Möglichkeiten bei der Verwendung von CSS2 (standardisiert 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 vollwertige 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. Die aktuelle Version CSS3 ist eine Weiterentwicklung von CSS2, ist jedoch im Gegensatz zu den Vorgängern modular aufgebaut. Die Beispiele in diesen Kapitel basieren noch auf CSS2.

Welche Vorteile entstehen durch die Verwendung von CSS?

CSS war eine Revolution im Webdesign. Die konkreten Vorteile sind:

Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-Sheet-Datei heraus;
präzisere Kontrolle über das Layout;
verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige, Druck etc.);
eine Vielzahl von fortgeschrittenen und anspruchsvollen Techniken.

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 beispielsweise 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, andererseits kann man 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 drei 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: Keine Formatierungen jedes einzelnen Elements nötig.
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 drei ist eine zentrale Datei, welche verwendet wird. Die Änderungen werden dann sofort für alle Seiten übernommen, die diese Datei eingebunden haben. Somit sinkt die Fehleranfälligkeit, man vermeidet Codeverdopplung und erhöht somit die Wartbarkeit der Website.

Literatur

Quellen

↑ http://www.w3.org/

Zitiervorschlag

Niederländer in Höller, Informationsverarbeitung I, CSS (mussswiki.idb.edu/iv1)

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

[1]

@@ Zeile 1: / Zeile 1: @@
 <!--<yambe:breadcrumb>Hypermedia|Hypermedia</yambe:breadcrumb>-->
-{{Kurzform|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 Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stye Sheets (CSS).}}
+{{Kurzform|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 Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stlye Sheets (CSS).}}
@@ Zeile 10: / Zeile 10: @@
 CSS ist die Abkürzung für Cascading Style Sheets und die Formatierungssprache für HTML. CSS wurde in den 90-er 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.
-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 Layoutgestaltung. 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 (standardisiert 1996) ist in etwa vergleichbar mit Druckformatvorlagen in Textverarbeitungsprogrammen. Die Möglichkeiten bei der Verwendung von CSS2 (standardisiert 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 vollwertige 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.
+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 Layoutgestaltung. Zur Trennung von Layout und Struktur dienen Cascading Stlye Sheets (CSS), die mit den HTML-Dokumenten verknüpft werden oder in eine HTML-Datei direkt eingebunden werden können. Die Funktionsweise von CSS1 (standardisiert 1996) ist in etwa vergleichbar mit Druckformatvorlagen in Textverarbeitungsprogrammen. Die Möglichkeiten bei der Verwendung von CSS2 (standardisiert 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 vollwertige 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.
+Die aktuelle Version CSS3 ist eine Weiterentwicklung von CSS2, ist jedoch im Gegensatz zu den Vorgängern modular aufgebaut.
+Die Beispiele in diesen Kapitel basieren noch auf CSS2.
-=== Welche Vorteile entstehen durch die Verwendung CSS? ===
+=== Welche Vorteile entstehen durch die Verwendung von CSS? ===
 CSS war eine Revolution im Webdesign. Die konkreten Vorteile sind:
@@ Zeile 81: / Zeile 83: @@
    </head>
 </source>
-Vorteil: Ersparnis von Formatierungen jedes einzelnen Elements.<br />
+Vorteil: Keine Formatierungen jedes einzelnen Elements nötig.<br />
-Nachteil: Jede einzelne Seite muss mit dem Style-Bereich ausgestattet werden. Bei mehreren Seiten erhöht sich der Wartungsaufwand
+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 ===
@@ Zeile 89: / Zeile 91: @@
 <link rel="stylesheet" type="text/css" href="format.css" />
 </source>
-Der große Vorteil an Variante 3 ist die zentrale Datei, die
+Der große Vorteil an Variante drei ist eine zentrale Datei, welche verwendet wird. Die Änderungen werden dann sofort für alle Seiten übernommen, die diese Datei eingebunden haben. Somit sinkt die Fehleranfälligkeit, man vermeidet Codeverdopplung und erhöht somit die Wartbarkeit der Website.
-Ä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 ==
@@ Zeile 100: / Zeile 101: @@
 === Zitiervorschlag ===
-''Niederländer'' in ''Pils'', Informationsverarbeitung I (21.9.2009), Informationsdarstellung#CSS (mussswiki.idv.edu/iv1)
+''Niederländer'' in ''Höller'', Informationsverarbeitung I, CSS (mussswiki.idb.edu/iv1)