✔ CSS-Klassen (Rangordnung)

Status
Nicht offen für weitere Antworten.
C

Consti

Erfahrenes Mitglied
Beim Schreiben von HTML Seiten und deren grafische Gestaltung via CSS ist mir folgendes Aufgefallen

CSS-Datei

td {bgcolor:#ABCDE1}
td.rot {bgcolor:#123456}
Zum Vergrößern anklicken....

Wenn ich nun in HTML eine Tabelle folgendermassen erstelle

<table>
<tr>
<td>Hallo</td>
<td class="rot">und Tschüss</td>
</tr>
</table>
Zum Vergrößern anklicken....

Dann wird im 2. TD Tag die gl. Hintergrundfarbe verwendet, wie im ersten, weil, so hab ich es verstanden, der <td>-Tag dem <td class="rot">-Tag übergestellt ist.
Wenn ich nun schon einige Seiten immer mit <td> erstellt habe und jetzt eine Seite erstellen möchte wo nur <td class="rot"> verwendet werden soll, dann muss ich erst in der CSS Datei das td zu td.standard (als Beispiel) umwandeln, und dann in den vorherigen Seiten alle <td>-Elemente zu <td class="standard"> umwandeln!

Hoffe, soweit ist das verstanden worden!
Kann man das auch anders lösen oder sollte man von Anfang an nur mit "speziellen" Klassen arbeiten und td {bgcolor:...} vermeiden, stattdessen immer td.standard{..} verwenden?

Hoffe, dass mir jemand helfen kann - denn es ist recht nervig, die ganze Seite zu ändern, nur weil eine Tabelle anders aussehen soll!

Dankeschön schon mal im Vorraus!
 
bgcolor ist keine css-Eigenschaft. Hier heisst es background bzw. background-color.
Und eigentlich sollte die Eigenschaft der Klasse die der einfachen td überlagern, vorrausgesetzt, sie ist, wie in Deinem Beispiel später in der css-Datei definiert.

Um solche Änderungsarien zu vermeiden, sollte man bei der Erstellung der Seite darauf achten, dass man die Klassen entsprechend der Bedeutung (also z.B. tabellenTitel, summenFeld, hervorgehoben) und nicht entsprechend ihrer Formatierung benennt (z.B. ro, fett, mitRahmen).
 
Naja, lassen wir den Falschen Befehl mal ausser acht (keine Ahnung warum er falsch geworden ist, aber daran liegts nicht. War wohl nen Fehler beim Posten.
Klar, die Bennenung war jetzt nicht besonders durchdacht - sie sollte auch noch als Bsp. genommen werden - hab da jetzt keinen besonderen Wert drauf gelegt - naja, egal!

Nun zu der eigentlichen Antwort - irgendwie habe ich die nicht verstanden.
Wie muss ich die Elemente denn genau anordnenen, damit es wohl klappt?
So:

td.rot
td.blau
td.schwarz
td

Soweit ich das verstanden habe, passt von den 1. drei dann keiner und dann nimmt er den letzen
Falls ich das falsch verstanden habe, wäres nett, wenn du mir das noch einmal erklären würdest

Danke!
 
Hallo!

Also ich verstehe das Problem nicht. Egal, wie rum Du die Klassen schreibst, wenn Sie korrekt defniert sind, geht das immer.

Also auch so:
HTML: 
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td.rot {background-color:#FF0000;}
td {background-color:#000000;}
</style>
</head>

<body>
<table>
<tr>
<td><p>Hallo</p></td>
<td class="rot"><p>und weg</p></td>
</tr>
</table>
</body>

Sorry, aber da muss irgendwo anders was "klemmen" ;)

Klassen sind nach ihrer Definition nicht gegeneinander bevorrechtigt.

Gruss
 
Nee, Nee,
die Reihenfolge ist so, wie in Deinem ersten Post, richtig.
Was andere Definitionen überschreiben soll muss am Ende stehen.
EDIT: Klassen sind da scheinbar etwas "wertvoller", siehe Post meines Vorredners.
In anderen Fällen kann die Reihenfolge jedoch entscheidend sein.
Ich habe dieses Beispiel gemacht und es funktioniert in FF und IE:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
        <title>Test</title>
        <style type="text/css" media="screen">
            td {background:#00f; border:1px #000 solid;}
            td.rot {background:#f00;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Hallo</td>
                <td class="rot">und Tsch&uuml;ss</td>
            </tr>
        </table>
    </body>
</html>
 
Zuletzt bearbeitet:
Ich nochmal, hallo!

Klassen sind gegeneinander nicht bevorrechtigt. CSS hat nur an zwei "Ecken" Bevorrechtigungen:
  • beim z-index
  • und bei CSS im Dokument gegenüber CSS in einer separaten CSS-Datei

@Consti
Du kannst nicht zufällig den entsprechenden Code posten, nicht nur das Beispiel?

Gruss
 
@Budman
Und bei Pseudoformaten wie link hover active etc.
Da ist die Reihenfolge wichtig, da mehrere der Pseudoformatklassen zutreffen können.
Evtl. auch noch in anderen Fällen
 
HTML: 
td	{
				text-align:justify;
				vertical-align:top;
				}
td.td-klausur	{
				text-align:justify;
				vertical-align:top;
				border-bottom:1px solid #2E5475;
				}

Das ist der Original CSS-Teil

Wenn ich nun eine Tabelle erstellt habe und ich ein <td class="td-klausur">-erstellt hab, kam die die bottom-line.
Dann hab ich das normale td zu td.td-standard gemacht und alle tds in den Dokumenten entsprechend geändert und aufeinmal klappte alles!

Naja, ich habs jetzt noch ein 2. Mal ausprobiert und da gabs das Problem nicht - hab keine Ahung, worans nun lag, aber dann weiss ich jetzt aufjedenfall, dass es keine Rolle spielt und es eigentlich auch klappen sollte!

DAnkeschön für die Hilfe
 
Hallo!

@hpvw
Da hast Du völlig Recht. Das sollte auch nicht als Kritik an Dir gemeint sein. Ich hoffe, das kam auch so an! :)

@Consti
Gut, wenns funktioniert. Nur so als Idee: Ich würde nicht unbedingt einen geschützten Begriff für einen Klassennamen nehmen. Damit hatte ich schinmal Probleme. Also nicht td.td-klausur sondern nur td und td.klausur.

Gruss
 
Naja, ich habs mir so gedacht:

Wenn ich in Dreamweaver eine CSS Datei einbinde, kommt, wenn ich class=" eintippte direkt ein Menü, wo alle CSS Klassen aufgeführt sind. Hab mir dann gedacht, dass wenn man td- oder a- oder sonst was davor schreibt, man genau weiss wozu das genau gehört, denn wenn man td.td-klausur nimmt, dann weiss man, dass man dieses Ding nur in td-Tags verwenden sollte

Inwieweit hattest du denn Probleme damit?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück