css stil reihenfolge

Status
Nicht offen für weitere Antworten.
ARadauer

ARadauer

Grünschnabel
Hallo,
ich habe eine Frage bezüglich der Rangfolge von CSS Stilen.

Folgendes Beispiel:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>
<HEAD>
<style type="text/css">
.blau {
	color: blue;
}

.rot {
	color: red;
}
</style>
</HEAD>
<BODY>

<p class="blau rot">rot</p>
<p class="rot blau">blau</p>

</BODY>
</HTML>

Ich dachte mir wenn ich in einen TAG mehrer Stile über class definiere, wird wahrscheinlich der letztere angewandt. In diesem Fall soll rot rot sein und blau blaub.

Jedoch richtet sich das Verhalten rein nach der Reihenfolge wie ich sie innerhalb vom <style type="text/css"> Tag definiert habe. Hier sind nun beide Zeilen rot.

Ist das nicht einwenig seltsam?
Mein konkretes Problem ist, dass ich mehrer Zeilen habe die sehr aufwändig formatiert sind und sich nur durch die Farbe unterscheiden. Ich würde gerne alle den selben Stil geben und bei einigen einfach zusätzlich die Farbe ändern. Wie mach ich das am Besten?

Danke
 
Hi,

was hälst du von dem Vorschlag, die Elemente wie gewünscht mit einer übereinstimmenden Klasse zu formatieren, und die Klasse mit der Schriftfarbendefinition, wie von dir gezeigt, hinten anzuhängen.

Code: 
<p class="eine_klasse rot">rot</p>
<p class="eine_klasse blau">blau</p>
 
Die Reihenfolge, in denen die Regeln definiert sind, ist entscheidend:
HTML: 
<p class="blau1 rot1">rot</p>
<p class="rot1 blau1">blau</p>

<p class="blau2 rot2">rot</p>
<p class="rot2 blau2">blau</p>
Code: 
.blau1 {
	color: blue;
}
.rot1 {
	color: red;
}

.rot2 {
	color: red;
}
.blau2 {
	color: blue;
}
Du solltest also erst die allgemeineren Stile definieren und danach die speziellen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück