 12) eigene CSS-Klassen
Das kennen Sie nun bereits: CSS-Formatierungen für Texte eines bestimmten HTML-Tags wie z.B. das <h1>-Tag. Die gilt dann für alle Überschriften der Größe h1.
|
|
HTML-Tag unabhängige CSS-Klassen
Das ist bereits bekannt:
Beispiel: <h1>-Texte mit CSS formatiert. Dazu haben Sie im Head-Bereich des HTML-Dokuments CSS-Angaben notiert, die dann für die Darstellung aller <h1>-Texte in dieser Datei gültig sind.
Der Selektor entspricht dann in der Regel einem HTML-Tag wie 'h1' oder 'p'.
<style type="text/css">
<!--
h1{
font-size: 18px;
font-family: Verdana,Arial,Helvetica;
color: #846ADD;
font-weight: bold;
text-align: center;
}
-->
</style>
Sie können aber auch eigene CSS-Klassen definieren, die nicht an vorhandene HTML-Tags gebunden sind. Diese eigenen Klassen werden ebenfalls im HEAD-Bereich, innerhalb einer CSS-Deklaration notiert. Dem Namen der Klasse wird ein Punkt vorangestellt. Der Name sollte aus Buchstaben bestehen und nicht die gleiche Bezeichnung wie ein HTML-Befehl haben.
Der selbst vergebene Name wird als Selektor eingetragen, hier ist das der Name 'rot'.
<style type="text/css">
<!--
.rot {
font-family: Verdana,Arial,Helvetica;
color: #FF0000;
}
-->
</style>
Die Einbindung erfolgt mit dem <span>-Befehl. Für die Bezeichnung der Klasse wird der Name der selbst definierten Klasse (ohne Punkt) eingetragen.
Das ist ein roter Text
Das ist ein <span class="rot">roter Text</span>
Klassen kombinieren
Wenn Sie mehrere eigene Klassen definiert haben, können Sie diese Formatierungen (auch innerhalb eines <span>-Befehls) kombinieren! Dazu werden innerhalb des Span-Befehls mehrere Klassen eingetragen, die durch ein Leerzeichen getrennt sind.
Das ist ein <span class="rot gross kursiv">formatierter Text</span>
Ergebnis:
Das ist ein formatierter Text
Eine Demo mehrer Kombinationen:
Das ist normaler Text mit einer Vergrößerung von 140%.
Dieses ist ein großer roter LKW.
Hier steht ein kleines blaues Dreirad.
Wie Sie sehen können, ist es möglich viele (eigene) Klassen zu kombinieren und zu verschachteln so oft Sie möchten, so lange die Verschachtelung logisch bleibt. Das bedeutet ein einleitender Befehl sollte auch einen schließenden Befehl haben.
<span class="vergroessert">
Das ist normaler Text mit einer Vergrößerung von 140%.<br>
Dieses ist ein <span class="gross">großer</span> <span class="rot">roter</span> <span class="gross rot bold">LKW</span>.<br>
Hier steht ein <span class="small">kleines</span> <span class="blau">blaues</span> <span class="small blau bold">Dreirad</span>.<br>
Wie Sie sehen können, <span class="gruen">ist es möglich</span> viele (eigene) Klassen <span class="gross blau bold italic">zu kombinieren</span> und zu verschachteln <span class="gross rot bold">so oft</span> Sie möchten, so lange <span class="mittel gruen">die Verschachtelung</span> <span class="gross orange bold italic">logisch</span> bleibt. Das <span class="rot bold italic">bedeutet</span> ein einleitender Befehl sollte auch einen schließenden Befehl haben.
</span>
Die CSS-Anweisungen im Head
<style type="text/css">
<!--
.vergroessert {
font-size:140%;
}
.gross {
font-size:30px;
}
.mittel {
font-size:20px;
}
.small {
font-size:10px;
}
.rot {
color:#FF0000;
}
.orange {
color:#FFBF00;
}
.gruen {
color:#00BF00;
}
.blau {
color:#0000CC;
}
.italic {
font-style:italic;
}
.bold {
font-weight:bold;
}
-->
</style>
|
Home • CSS • eigene CSS-Klassen