CSS Tutorial 112-11-02 

Nachfolgendes Tutorial behandelt CSS - eine Erweiterung zu HTML.
Deshalb wäre es sinnvoll sich zunächst mit HTML zu beschäftigen eh man hier versucht CSS zu verstehen ;o)


Fangen wir erstmal wieder mit einer leeren Seite und einer kleinen Tabelle an.

<HTML>
<BODY Text="#000000" bgColor="#FFFFFF">

<TABLE width="100%">
<tr>
<td width="50%">Kleine HTML Tabelle</td>
<td width="50%">erstmal ohne CSS</td>
</tr>
</table>

So, wer das jetzt nicht verstanden hat muß sich mehr mit HTML beschäftigen *grins*
Als erste CSS Definition wollen wir in einem HTML Tag den Wert "style" benutzen.
Auf diese Weise sollte man immer vorgehen wenn es sich um kurze oder einmalige
CSS Definitionen handelt. Um das zu verdeutlichen wollen wir das zweite Tabellen-
feld etwas bunter gestalten. Das sieht dann ungefähr so aus:

<TABLE width="100%">
<tr>
<td width="50%">Kleine HTML Tabelle</td>
<td width="50%" style="Background-Color:#DDDDDD">etwas CSS dabei</td>
</tr>
</table>

Als Ergebnis bekommen wir eine Tabelle mit einem durchsichtigem Feld und einem
grauen.
Background-Color legt also die Hintergrundfarbe eines Objects fest. Das tolle ist,
daß wir dies auf praktisch alle HTML Tags anwenden können:

<a href="Test.html" style="Background-Color:#FF0000">Link</a>

Ok Background-Color ist ja nun nicht sooo toll wird jetzt der ein oder andere
sagen aber es gibt eine Menge an derartigen Funktionen.
Die meisten HTML Tag Eigenschaften lassen sich auch durch CSS Angaben ausdrücken.
Um dies mal zu verdeutlichen hier unser Anfangsbeispiel in CSS:

<HTML>
<BODY style="Background-Color:#FFFFFF; Color:#000000">

<TABLE style="width:100%">
<tr>
<td style="width:50%">Kleine HTML Tabelle</td>
<td style="width:50%">mit CSS</td>
</tr>
</table>

Nun gut, sieht nich unbedingt einfacher aus. Im Body Tag sieht man aber schon
mal wie man mehrere Eigenschaften miteinander verbindet: durch ein ";"
Als nächstes möchte ich CSS Classes vorstellen. Dabei gilt: Alle CSS Befehle
in Classes können auch im Tag unter style="" geschrieben werden.
Wie geht nun so ne Class:

<HTML>
<style type="text/css">
 .DarkItem  {Background-Color:#909090; width:50%; Text-Align:center}
 .LightItem {Background-Color:#D0D0D0; width:50%; Text-Align:center}
</style>

<BODY style="Background-Color:#FFFFFF; Color:#000000">

<TABLE style="width:100% cellspacing:0">
 <tr>
  <td class="DarkItem">1-1</td>
  <td class="DarkItem">1-2</td>
 </tr>
 <tr>
  <td class="LightItem">2-1</td>
  <td class="LightItem">2-2</td>
 </tr>
 <tr>
  <td class="DarkItem">3-1</td>
  <td class="DarkItem">3-2</td>
 </tr>
 <tr>
  <td class="LightItem">4-1</td>
  <td class="LightItem">4-2</td>
 </tr>
</table>


Die CSS Classen werden wie hier gezeigt immer in dem Tag
<style type="text/css"> bis </style> angegeben.
Eine Class ist dabei wie folgt aufgebaut:

 .Name { Eigenschaften wie im style="" }

Die Reihenfolge der Eigenschaften spielt dabei eigentlich keine Rolle.
Um eine solche Class im HTML Code wieder aufzurufen, schreibt man
in ein Tag (geht wieder bei praktisch allen HTML Tags) class="Name".
Zu beachten: Bei der deklaration steht ein . vor dem Namen - beim Aufruf
nicht.
Wenn man sich nun obiges Beispiel mal im Browser anschaut sieht man
schnell das dies viel kürzer ist als bei jedem <td> mit style=""
zu arbeiten. Man brauch so alles nur einmal schreiben.
Genauso einfach kann man nun ganz oben die Farben ändern um sie sofort
auf der ganzen Seite zu aktualisieren. (einfach mal testen ;o)

Nun kommen wir zu meinen persönlichen zwei lieblings CSS Elementen.
Zum einen ist das die Positionierung von Objecten und zum anderen
die Eigenschaft Background-Image.
Da zweiteres erstmal HTML gerechter ist fangen wir damit an.
Wir wollen nun in unsere Tabelle statt einem grauen Hintergrund
zwei verschiedene Bilder legen - ein helleres und ein dunkleres Bild.
Dabei sind Hintergrundbilder von Haus aus so wie ein aus dem standart
HTML bekanntes BODY Background - sie wiederholen sich bis die Fläche
voll ist. Das heißt andersherum, daß es reicht wenn wir ein kleines
Bild als Hintergrund einstellen solange es sich gut Wiederholen lässt.
Um ein solches Bild zu basteln öffnest du eine Grafikprogramm wie Psp
oder Photoshop (eben was du gerade da hast) und malst ein Bild,
das 1x20 Pixel groß ist. Jap, ist verdammmt klein - also ranzoomen ;o)
Da malst du nun einfach eine Farbverlaufslinie hinein. Also du nimmst
einen blauen Stift, mallst das Bild aus. Nun nimmst du einen etwas
helleren blauen Stift und mals nur noch die untere 18 Pixel damit aus
das machst du solange bis ein schöner Farbverlauf enstanden ist.
Das ganze entweder als h1.jpg abspeichern und in dein HTML Verzeichnis
schieben.
Das ganze noch mal - nur in einer anderen Farbe *grins* und als
h2.jpg abspeichern. (ebenfalls ins HTML Verzeichnis werfen)

Nun das ganze im CSS einbinden: (wir ändern nur oben die Classes)

<style type="text/css">
 .DarkItem  {Background-Image:url(h1.jpg); width:50%; Text-Align:center}
 .LightItem {Background-Image:url(h2.jpg); width:50%; Text-Align:center}
</style>

Das wars auch schon. Ok das mit :url() sieht doof aus - is aber leider
so. Auch folgendes ist dabei möglich:

Background-Image:url(ordner1/h1.jpg); oder
Background-Image:url(../h1.jpg);

Also ganz wie im HTML üblich.

Als letztes nun noch die Positionierung. In HTML ist es ja nun mal so
üblich das die Webseite irgendwie etwas fortlaufendes ist.
Zum Beispiel: man schreibt erst eine Tabelle dann etwas Text und zum
Schluß noch ein Bild am Ende. Genau so wird es dann auch in aller
Regel im Webbrowser erscheinen.
Nun ist es aber mit CSS möglich genau diese Abfolge aufzulösen und
einfach alle Elemente frei zu positionieren.
Zum Beispiel: Wir wollen eine Tabelle haben die genau 20 Pixel vom
linken Rand liegen soll, genau 50 Pixel von Oben und sie soll genau
200 Pixel breit und 200 hoch sein.

Wozu soll das nun gut sein? Stell dir mal folgendes vor:
Du willst ein Menü an der linken Seite im Webfenster bauen.
Du weißt das die Buttons alle einen bestimmten abstand haben
und eine bestimmte größe aufweisen. Damit kannst du nun diese Buttons
einfach an die Stelle schieben wo du meinst das sie hin sollen,
ohne dir Gedanken darüber zu machen an welcher Stelle im HTML Code
sie erscheinen müssen.
Der ein oder andere würde jetzt sicher sagen wozu hab ich den
Frameseiten - geht natürlich auch aber nehmen wir an wir wollen ein
dynamisches Menü machen, was sich bewegt wenn wir mit der Maus drüber
fahren - dann sind Frames untauglich.

Aber wir wollen uns mal mit einem einfachen Menü zufrieden geben
um noch mal etwas zu den Classes zu zeigen und wie man nur
Teile aus der Class und andere aus dem Style="" zusammen addiert:

<style type="text/css">
 .Button {position:absolute; left:0; width:100; height:20;
          Background-Image:url(h1.jpg); }
</style>

<table class="Button" style="top:20">
<tr><td align="center"><a href="Test1.html">Erste Seite</a></td></tr>
</table>
<table class="Button" style="top:50">
<tr><td align="center"><a href="Test2.html">Zweite Seite</a></td></tr>
</table>
<table class="Button" style="top:80">
<tr><td align="center"><a href="Test3.html">Dritte Seite</a></td></tr>
</table>

So, ich hoffe mal das war mal ein interessanter Einblick in das Thema
CSS. Eine gute Auflistung der CSS Funktionen findet ihr im SelfHTML
oder anderswo im Internet.