Ramnips Homepage-Help      www.chathomepage.de  
CSS-Klassen

« Zurück zur CSS-Auswahl

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:
  • die "class-Variante" (=Allgemeine Klassen - sie werden durch einen vorangestellten Punkt gekennzeichnet.)
  • die "id-Variante" (=Unabhängige Formate - funktionieren in der Praxis genauso wie Klassen)
Ich stelle hier vorerst nur die Class-Variante (Allgemeine Klassen) vor.
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: