Hier möchte ich nun versuchen zu erklären, welche Möglichkeit man mit CSS hat, unterschiedliche Formate für ein- und dasselbe Tag per Klassen zu definieren. Klassen erlauben die Definition mehrerer Formatvarianten für ein- und dasselbe Tag. Wer auf der Homepage-Help den Hinweistext zum tag-externen CSS-Definitionsteil gelesen und anschließend die Unterseite "Linkstyling mit Hovereffekt" besucht hat, wird mit Recht fragen, warum ich erst behaupte, dass ein solcher externer CSS-Code für das gesamte HTML-Dokument gilt, und im gleichen Moment aber in einem Dokument verschiedene Effekte erziele. Die Lösung liegt auf der Hand - das Verwenden von CSS-Klassen, die dann im jeweiligen, für sie bestimmen, HTML-Code aufgerufen werden. Wichtig auch hier: Ich liste die CSS-Codes zum Anfang übersichtlich auf. Für eine Übernahme in den Knuddels-Homepageeditor müssen sie in einer Zeile, also ohne Zeilenumbruch, eingefügt werden. Mir selbst sind zwei Varianten bekannt:
Wichtiger Hinweis: Bei der Namenswahl der CSS-Klasse nie mit einer Ziffer beginnen, da dies zu Problemen bei Browsern führen kann. Diesen Effekt stellte ich z.B. per Zufall im Firefox fest. |
Beginnen wir mit der "class-Variante" am praktischen Beispiel. Wir wollen zwei Klassen für das Link-Tag a festlegen. Wir benennen sie knuddels1 und knuddels2. <style type="text/css"> <!-- a.knuddels1:link{color:#00009F;} a.knuddels1:visited{color:#00009F;} a.knuddels1:active{color:#00009F;} a.knuddels1:hover{color:#7F0000; text-decoration:none;} a.knuddels2:link{color:#00009F;} a.knuddels2:visited{color:#00009F;} a.knuddels2:active{color:#00009F;} a.knuddels2:hover{color:#FF9F00; text-decoration:overline;} --> </style> Für eine erfolgreiche Übernahme im Knuddels-Homepageditor: <style type="text/css"><!--a.knuddels1:link{color: #00009F;} a.knuddels1:visited{color: #00009F;} a.knuddels1:active{color:#00009F;} a.knuddels1:hover{color:#7F0000;text-decoration:none;} a.knuddels2:link{color: #00009F;} a.knuddels2:visited{color: #00009F;} a.knuddels2:active{color:#00009F;} a.knuddels2:hover{color:#FF9F00;text-decoration:overline;}--></style> Für den Aufruf im a-Tag wäre folgender Code nötig: <a class="knuddels1" href="http://www.chatfarben.de/" target="_blank">Ramnips Farbtabelle</a> <a class="knuddels2" href="http://www.chatfarben.de/" target="_blank">noch ein Link zu Ramnips Farbtabelle</a> Das Ergebnis: Ramnips Farbtabelle noch ein Link zu Ramnips Farbtabelle |
Wir haben also einen Tag (a) mit zwei verschiedenen Klassen im CSS-Definitonsteil vorbereitet und diese dann wie gewünscht im HTML-Code angesteuert. In einem Dokument haben wir so also für ein HTML-Tag verschiedene Effekte und Formatierungen erzeugt. Das ist eigentlich das ganze Prinzip einer CSS-Klasse. Übrigens: Der Link in der Überschrift dieser Seite (ganz oben), sollte die Farbe und die Eigenschaften nicht wechseln. Kann er auch nicht, denn er hat keine class="knuddels1" oder class="knuddels2"- Anweisung erhalten. Wir haben also gelernt: Bei der "class-Variante" fügt man im Definitionsteil dem Tag-Namen die Wertzuweisung mit einem Punkt . und des frei wählbaren Namens ein. Der Aufruf im jeweiligen HTML-Code geschieht dann mit dem Codezusatz class="name" - in unserem Beispiel "knuddels1" bzw. "knuddels2". Im ersten Beispiel haben wir einen a-Tag, also Link-Tag damit ausgestattet. Das sah gleich etwas schwierig aus, denn hinter der Klassen-Namenszuweisung folgen noch die verschiedenen Linkzusätze, die (wie beim normalen a-Tag ohne Class) mit einem Doppelpunkt getrennt werden. Man kann diese Klassen natürlich mit allen CSS-Formatierungen ausstatten und sich die direkte HTML-Tag-Stylesheets dadurch sparen. Schnappen wir uns ein ganz simples Beispiel, an dem man auch deutlich sieht, was der Vorteil von mehreren Klassen sein kann. |
Im Beispiel legen wir 3 Klassen fest, die für verschiene Schriftanzeigen sorgen. <style type="text/css"> <!-- font.schrift1{font-family:verdana;color:#7000C0;font-size:12pt;} font.schrift2{font-family:arial;color:#00BF00;font-size:15pt;} font.schrift3{font-family:times new roman;color:#000000;font-size:8pt;} --> </style> Für eine erfolgreiche Übernahme im Knuddels-Homepageditor: <style type="text/css"><!--font.schrift1{font-family:verdana;color:#7000C0;font-size:12pt;} font.schrift2{font-family:arial;color:#00BF00;font-size:15pt;} font.schrift3{font-family:times new roman;color:#000000;font-size:8pt;}--></style> Wir weisen also dem font-Tag hier einige Werte zu. Nun brauchen wir nur noch das gewünsche font-tag im HTML-Code ansteuern... <font class="schrift1">Schrift-Art/Farbe/Größe der 1. Klasse</font> <font class="schrift2">Schrift-Art/Farbe/Größe der 2. Klasse</font> <font class="schrift3">Schrift-Art/Farbe/Größe der 3. Klasse</font> Ergebnis: Schrift-Art/Farbe/Größe der 1. Klasse Schrift-Art/Farbe/Größe der 2. Klasse Schrift-Art/Farbe/Größe der 3. Klasse |
Ich möchte es hier vorerst an Erklärungstexten belassen und werde die Seite mit zwei letzten Beispielen (übersichtlich im CSS-Code dargestellt - also bitte selbst aneinanderreihen!) beenden. Diese Beispiele werden beweisen, dass man praktisch jedes HTML-Tag mit einer eigenen Klasse vordefinieren und auf die tag-internen Stylesheets verzichten kann. Wer das Grundprinzip verstanden hat, wird merken, dass man sich so sehr einfach und übersichtlich seine CSS-Stylesheets vorbereiten kann und dann im HTML-Code selbst nur noch die Klasse aufruft. Dass man diese Klassendefinitionen natürlich auch in eine externe CSS-Datei packen kann, versteht sich von selbst. |
<style type="text/css"> <!-- img.pic1{width:75px; height:30px;} img.pic2{border:5px #00DF00 dashed;} --> </style> |
<img class="pic1" src="http://www..../bild.jpg"> <img class="pic2" src="http://www..../bild.jpg"> Ergebnis: Pic1:  Pic2: |
<style type="text/css"> <!-- input.schalter1{font-size:8pt; font-family: arial; font-weight:bold; color:#CFCFCF; background-color:#00007F; border-color:#FF0000;} input.schalter2{font-size:13pt; font-family: impact; color:#FF7F00; background-color:#0000FF; border-color:#DFDFDF;} --> </style> |
<input class="schalter1" type="button" onmouseup="JavaScript: alert( ' Dieser Button wurde mit einer CSS-Klasse gestylt. ' )" value="Hier 1x Klicken"> <input class="schalter2" type="button" onmouseup="JavaScript: alert( ' Auch dieser Button wurde mit einer CSS-Klasse gestylt. ' )" value="Hier 1x Klicken"> Ergebnis: |