CSS: Unterschied zwischen den Versionen

Aus IV1
← Zum vorherigen Versionsunterschied
Keine Bearbeitungszusammenfassung
K Textersetzung - „mussswiki.idv.edu“ durch „mussswiki.idb.edu“
 
(29 dazwischenliegende Versionen von 8 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Kurzform|Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.}}
<!--<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 Stlye Sheets (CSS).}}




Zeile 7: Zeile 8:
== Grundlagen ==
== 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) <ref>http://www.w3.org/</ref> verabschiedet und wird mittlerweile von allen gängigen Browsern fast zu 100% implementiert.  
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.  


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 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 ==
== Aufbau einer CSS Regel ==
Zeile 16: Zeile 29:
<source lang="css">Selektor { Attribut: Wert; }</source>
<source lang="css">Selektor { Attribut: Wert; }</source>


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.
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:
Ein einfacher Absatz kann mithilfe folgender Regel formatiert werden:
Zeile 26: Zeile 39:
</source>
</source>


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.
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.


<source lang="css">
<source lang="css">
Zeile 44: Zeile 57:
*/
*/
</source>
</source>
== Einbinden in HTML ==
CSS Regeln können auf drei unterschiedliche Arten in HTML eingebunden werden.
=== Verwendung als Style Attribut ===
<source lang="html4strict">
<p style="font-weight: bold;">fett geschriebener Absatz</p>
</source>
Nachteil: Man benötigt für jeden Absatz, den man speziell formatieren möchte, dieses Style-Attribut im <nowiki><p></nowiki>-Tag. Ändert man die Formatierung für Absätze, müsste jeder Absatz händisch umformatiert werden.
=== Style Element ===
<source lang="html4strict">
  <head>
    <title>CSS-Einbindung per 'style'-Element</title>
    <style type="text/css">
      p {
        font-weight: bold;
      }
    </style>
  </head>
</source>
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.
=== Als Link zu einer ausgelagerten CSS Datei ===
<source lang="html4strict">
<link rel="stylesheet" type="text/css" href="format.css" />
</source>
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 ==
== Literatur ==
Zeile 51: Zeile 99:
<references/>
<references/>


=== Zitiervorschlag ===


=== Weiterführende Links ===
''Niederländer'' in ''Höller'', Informationsverarbeitung I, CSS (mussswiki.idb.edu/iv1)
 
* [http://www.idv.edu Institut für Datenverarbeitung]
* [http://www.jku.at Johannes Kepler Universität]
* [http://musss.jku.at/moodle MUSSS-Moodle]

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

  1. ↑ http://www.w3.org/

Zitiervorschlag

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

Abgerufen von „https://mussswiki.idb.edu/iv1wiki/index.php?title=CSS&oldid=6434“