~~SLIDYSHOW~~
====== Cascading Stylesheets ======

===== CSS lernen mittels Workshop =====

  * Teil 1 des Workshops behandelt die Syntax einfacher CSS-Anweisungen und führt in die zugrundeliegende Terminologie ein. Einen weiteren Schwerpunkt stellen die verschiedenen Möglichkeiten zur Einbindung von Style-Sheets in HTML-Dokumente und das Prinzip der Kaskadierung dar.
  * Teil 2 des Workshops behandelt CSS(1)-Eigenschaften sowie Maßeinheiten und mögliche Werte systematisch und im Detail. Darüber hinaus werden Vor- und Nachteile der Verwendung von Formatierungsklassen erörtert.
  * Teil 3 des Workshops stellt vor allem die durch die Verabschiedung von CSS2 gegebenen erweiterten Gestaltungsmöglichkeiten vor. Behandelt werden dabei auch Techniken - namentlich zur Positionierung von Elementen - die für den Einsatz von Dynamic HTML (DHTML) grundlegend sind.


[[http://www.staff.uni-marburg.de/~aumann/workshops/css/welcome.html|Zum Workshop]]

----

Ein anderer empfehlenswerter [[http://www.css4you.de/|CSS-Workshop]]
  
\\
\\


===== Sprachversionen und Referenzen =====

==== CSS 1.0 und CSS 2.0 ====

Wie bei HTML, so gibt es auch bei CSS Sprachversionen, die auf den Neuauflagen der Recommendations basieren. Die Version 1.0 von CSS wurde bereits im Jahr 1996 herausgegeben und 1999 nochmals überarbeitet.1998 erhielt die Version 2.0 den Status einer Empfehlung. Mittlerweile wird an den Versionen 2.1 und 3.0 gearbeitet.

==== CSS-Referenzen ====

  * [[http://de.selfhtml.org/navigation/css.htm|Kurzreferenz aus SelfHTML]]
  * [[http://www.w3.org/TR/REC-CSS1|Referenz für CSS 1]]
  * [[http://www.w3.org/TR/REC-CSS2|Referenz für CSS 2]]
  * [[http://www.wssexpert.de/Style/CSS/|Deutsche W3-Referenzsite]]

\\
\\

===== Das Wichtigste zum Thema CSS =====

==== 3 Möglichkeiten Styles zu einzubinden ====

=== Externe Styles ===

<code html>
<link rel="stylesheet" type="text/css" href="formate.css">
</code>

=== Interne Styles ===

<code html>
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</code>

=== Inline-Styles ===

<code html>
<h1 style="[element-spezifische Formate]">...</h1>
</code>

\\

==== Styles für unterschiedliche Ausgabemedien ====

<code html>
<link rel="stylesheet" media="screen" href="website.css">
<link rel="stylesheet" media="print" href="druck.css">
<link rel="stylesheet" media="projection" href="beamer.css">
</code>

\\


==== Kaskadierung und Vererbung ====

Alle Tags in einer HTML Seite stehen zueinander in einer hierarchischen Beziehung, dabei unterscheidet man zwischen Eltern- und Kind-Elementen und Geschwister-Elementen. Beschrieben werden diese beziehungen im sogenannten Document Object Model(DOM).
[[http://de.wikipedia.org/wiki/Document_Object_Model|Document Object Model]]

Vererbung heißt, dass Stileigenschaften von einem Element an ein beliebiges in ihm enthaltenes Element weitergegeben werden. Bei vorausschauender Planung kann die Vererbung Stilangaben sehr effizient machen

<code html>
body { font-family: "Arial", "Helvetica", sans-serif; background: #FFEFD5; }
h1   { color: #CD5C5C; font-size: 24pt; }
</code>

Die Kaskade bezeichnet das hierarchisches System, das den Stilanweisungen je nach Herkunft unterschiedliches Gewicht verleiht. Wie bei der Vererbung haben spezifischere - d. h. näher am Wirkungsort definierte - Regeln Vorrang vor den allgemeineren.

An dieser Hierarchie sind insgesamt - mit steigender Gewichtung -  beteiligt:

  * Default-Einstellungen des Browsers
  * externe Style Sheets; werden mehrere externe Style Sheets mit einem Dokument verlinkt, haben im Konfliktfall die in der zuletzt eingelesenen CSS-Datei enthaltenen Anweisungen Vorrang;
  * eingebettete (im Dokumentskopf definierte) Style Sheets;
  * inline-Stilvorgaben.

\\


==== Verschiedene Arten von Style-Formaten ====

=== Formate für HTML-Tags ===

Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, wird als als sog. Selektor der Name des HTML-Elementtyps angegeben, und zwar ohne spitze Klammern. Im folgenden Beispiel werden ''body'' (Dokument), ''h1'' (Überschriften 1. Ordnung), ''p'' (Textabsätze) und ''li'' (Listeneinträge) auf diese Weise notiert.

Über den Universalselektor * hat man die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element natürlich nur die jeweils zulässigen Eigenschaften zugewiesen werden.

Wenn ein Format für mehrere HTML-Elementtypen definiert werden soll, werden alle gewünschten Elementtypen angegeben- 

<code html>
<style type="text/css">

// für einzelne Tags
body { background-color:#FFFFCC;
       margin-left:100px; }
h1 { font-size:300%;
     color:#FF0000;
     font-style:italic;
     border-bottom:solid thin black; }

// für mehrere Tags
p,li { font-size:110%;
       line-height:140%;
       font-family:Helvetica,Arial,sans-serif;
       letter-spacing:0.1em;
       word-spacing:0.3em; }

// für alle Tags
* { color:blue; }

</style>
</code>