Ein anderer empfehlenswerter CSS-Workshop
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.
<link rel="stylesheet" type="text/css" href="formate.css">
<link rel="stylesheet" media="screen" href="website.css"> <link rel="stylesheet" media="print" href="druck.css"> <link rel="stylesheet" media="projection" href="beamer.css">
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). 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
body { font-family: "Arial", "Helvetica", sans-serif; background: #FFEFD5; }
h1 { color: #CD5C5C; font-size: 24pt; }
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:
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-
<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>
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.
p[align] p[align="center"] td[abbr~=Berlin]
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 Pseudoelemente und Pseudoklassen
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 }
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.
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>
Die beiden HTML-Elemente
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.
<div class="chap">Eine Kapitelüberschrift</div> <div class="sect">Eine Sektionsüberschrift</div>
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.
#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>