Dateiversion:
|
diesen Beitrag diskutieren,ergänzen, eine Frage stellen |
|
|
Homepagebau |
|
|
||
|
|
||||||
Klassen in CSS
Schwierigkeitsgrad: 
Klassen erlauben es ihnen, Tags in Gruppen zu unterteilen. So ist es zum Beispiel möglich, eine Klasse "blau" zu erstellen, die den Text jedes beliebigen Tags der zu dieser Klasse gehört blau darstellt.
Darüber hinaus können sie aber sogar festlegen, dass zum Beispiel eine Tabelle, die ebenfalls zu dieser Klasse gehört stattdessen die Hintergrundfarbe Blau zugewiesen bekommt.
<style type="text/css">
.blau { color: blue; }
table.blau { background-color: blue; }
</style>Anders als bei Tags, müssen sie hier von Hand in den Quellcode eingreifen. Die Zugehörigkeit eines Tags zu einer bestimmten Klasse müssen sie mit dem Attribut "class" explizit angeben. Im Fall unserer Tabelle wäre das:
<TABLE ...
class="blau">
...
</TABLE>
"blau" ist hier der Name unserer Klasse.
Ein weiteres Beispiel: wir behalten die Klasse "blau" bei, außerdem gibt es eine Klasse "rot".
<style type="text/css">
.blau { color: blue; }
.rot { color:
red; }
</style>
Was meinen sie, welche Farbe hat der folgende Abschnitt?
<P class="rot">Ist
dieser Text rot oder <span class="blau">blau</span>?</P>
Ist dieser Text rot oder blau?
Letztes Beispiel: wir formatieren alle "P"-Tags blau und behalten die Klasse "rot".
<style type="text/css">
p {
color: blue; }
.rot { color:
red; }
</style>
Welche Farbe hat der Abschnitt nun?
<P class="rot">Ist
dieser Text rot oder blau?</P>
Ist dieser Text rot oder blau?
Sie sehen, dass die Formatierung der Klasse die Formatierung des Tags überschreibt.
Natürlich beschränken sich die Möglichkeiten für die Anwendung von Klassen nicht auf unsere kleine Farbspielerei, lassen wir es aber im Moment damit bewenden. (weitere Formatierungsmöglichkeiten finden sie u.a. auf unserer Homepage oder in der Literatur, deren Anwendung ist jedoch analog zu unseren Beispielen)
|
Autor: Thomas Meyer |
Home: www.All-Community.de |
Kontakt: |