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


=== Attributbedingte Formate ===

Im folgenden Beispiel wird davon ausgegangen, dass eine Formatdefinition für ''p''-Elemente (Absätze) existiert. Mit der Syntax p[align] werden alle ''p''-Elemente erfasst, die ein align-Attribut haben. Mit ''p[align=center]'' werden alle ''p''-Elemente erfasst, die ein ''align="center"'' im einleitenden Tag haben. Mit ''td[abbr~=Berlin]'' werden alle Tabellenzellen des Typs ''td'' erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt.

<code html>
p[align]
p[align="center"]
td[abbr~=Berlin]
</code>

=== Pseudoklassen ===

Mittels Pseudoklassen und Pseudoelementen können Sie Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes".

Bei Pseudoelementen und Pseudoklassen notiert man zuerst das betroffene HTML-Element, im Beispiel das ''a''-Element für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa ''link'' (für noch nicht besuchte Verweisziele), ''visited'' (für bereits besuchte Verweisziele), ''hover'' (für Verweise, während der Anwender mit der Maus darüber fährt), ''active'' (für angeklickte Verweise) und ''focus'' (für z.B. mit der Tastatur ausgewählte Verweise).

Man beachte, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.

Es gibt eine Reihe fester, erlaubter [[http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm|Pseudoelemente und Pseudoklassen]]

<code html>
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

p:first-line { font-weight:bold }
p:first-letter { font-size:300%; color:red }
</code>


=== Klassenstyles ===

Im folgenden Beispiel wird mit h3.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h3 gilt: also z.B. auf HTML-Elemente wie ''<h3 class="hinterlegt">'' anwendbar ist.

Mit ''*.hinterlegt'' wird gezeigt, dass man den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden kann. Der Stern gilt als Universalselektor und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen.
Im Beispiel ''.hinterlegt'' kann man das sehen.
Ein ''h3''-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor ''h3.hinterlegt'' bestimmt werden. Ein ''p''-Element mit ''<p class="hinterlegt">'' erhält dagegen die Formatierungen, die mit ''.hinterlegt'' bestimmt werden.

Es können auch mehrere Klassenselektoren hintereinander verwendet werden.

<code html>
h3.hinterlegt  {background-color:red }
*.hinterlegt   {background-color:yellow}
.hinterlegt    {background-color:yellow}
.groesser      {font-size:24pt; }
.unterstrichen {text-decoration:underline;}
...
<h3 class="hinterlegt">Diese Überschrift erscheint rot</h3>
<p class="hinterlegt">Diese Zeile ist gelb hinterlegt.</p>
<p class="groesser">Diese Zeile ist größer geschrieben.</p>
<p class="unterstrichen">Diese Zeile ist unterstrichen.</p>
<p class="hinterlegt groesser unterstrichen">Diese Zeile ist gelb hinterlegt,
             größer und unterstrichen geschrieben.</p>
</code>

Die beiden HTML-Elemente <div> und <span> haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Unter Verwendung von div oder span ist es also Möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen.

<code html>
<div class="chap">Eine Kapitelüberschrift</div>
<div class="sect">Eine Sektionsüberschrift</div>
</code>

=== Individualformate ===

Im folgenden Beispiel wird ein Individualformat definiert: Solche Formate beginnen also mit dem Gatterzeichen #, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen als Wertzuweisung an das ''id''-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. 

Der prinzipielle zwischen ''id'' und ''class'' Unterschied liegt nicht in CSS, sondern in HTML bzw. Javascript. Mit dem ''id''-Attribut können Elemente eindeutig bezeichnet werden; diese Eindeutigkeit bedingt, dass der Bezeichner nur einmal pro CSS-File vorkommen darf.

<code html>
#merksatz {
   position:absolute;
   top:130px;
   left:30px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #EE0000;}
<p id="merksatz">Im rechtwinkeligen Dreieck gilt: Summe der Kathetenquadrate = Hypotenusenquadrat</p>
</code>

----

==== Theoriefragen ====
  - Erkläre, was Cascading Style Sheets sind.
  - Nenne Vor- und Nachteile
  - Gib an, welche Möglichkeiten zur Einbindung von Stylesheets bestehen.
  - Erkläre die Rangfolge, mit der die Stylesheets angewendet werden.