Formatierungen mit CSS?

[Flo]

Hallo alle,

ich habe mir selbst ein kleines CM-System programmiert und habe jetzt Probleme mit der Darstellung! Ich habe eine Eingabemaske und unter der Eingabemaske erhält man eine Voransicht der Texte wie sie auf der WebSeite erscheinen sollen! Die Voransicht wird mir aber immer falsch dargestellt und zwar in der CSS-Datei habe ich z.B.

p, td {

mit einer bestimmten Schriftart und -farbe dargestellt!

}

in der Voransicht habe ich eine Tabelle und diese Tabelle formatiere ich so <table class="tabelleanzeigen">

CSS-Datei:

.tabelleanzeigen {

Andere Schriftart und -farbe, -größe!

}

Trotzdem wird mir in der Voransicht immer die Formatierungen von p, td angezeigt! An was kann das liegen? Auch wenn ich in der Eingabemaske einen Satz als Größe 14px formatiere, wird mir dieser Satz nach den Formatierungen von p, td angezeigt!

Könnt ihr mir sagen wie ich da vorgehen kann!?

Vielen lieben Dank!

[Gunnar Bittersmann]

Flo,

Trotzdem wird mir in der Voransicht immer die Formatierungen von p, td angezeigt! An was kann das liegen?

An der Spezifität der Selektoren. Siehe CSS2-Spezifikation, Abschnitt
6.4 Die Kaskade, besonders 6.4.3 Berechnung der Spezifität eines Selektors.

Live long and prosper,
Gunnar

[Flo]

Habs mir gerade durchgelesen, aber checks trotzdem nicht wie ich es hinbekomme!

Kurze Erklärung?

Vielen Dank

[Gunnar Bittersmann]

Kurze Erklärung?

Für den Selektor td gilt:
a = 1, b = 0, c = 0, Spezifität = 100.

Für den Selektor .tabelleanzeigen gilt:
a = 0, b = 1, c = 0, Spezifität = 10.

Also gilt das das für td Angegebene, da dieser Selektor eine höhere Spezifität hat.

Willst du für Elemente <td class="tabelleanzeigen"> andere Formatierungen, muss deren Selektor also eine hörere Spezifität bekommen als 100; setze also a = 1: td.tabelleanzeigen

Live long and prosper,
Gunnar

[MudGuard]

Hi,

Für den Selektor td gilt:
a = 1, b = 0, c = 0, Spezifität = 100.

Was auch immer Du da als Spezifität bezeichnest, es hat wenig mit der Realität zu tun.
Nicht nur, daß Du die Buchstaben falsch zuordnest, da Du das style-Attribut nicht berücksichtigst, Du gibst Elementselektoren einen höheren Stellenwert als Attributselektoren.

Siehe http://www.w3.org/TR/CSS21/cascade.html#specificity
bzw. für CSS 2.0 http://www.w3.org/TR/REC-CSS2/cascade.html#specificity unter Berücksichtigung von http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#s-6-4-3

Für den Selektor td im Stylesheet gilt:

a = 0 (kein Style-Attribut)
b = 0 (kein ID-Selektor)
c = 0 (kein Attribut/Class/Pseudoclass-Selektor)
d = 1 (ein Elementname/Pseudoelement)

Für den Selektor .tabelleanzeigen gilt:
a = 0, b = 1, c = 0, Spezifität = 10.

a = 0 (kein Style-Attribut)
b = 0 (kein ID-Selektor)
c = 1 (ein Attribut/Class/Pseudoclass-Selektor)
d = 0 (kein Elementname/Pseudoelement)

a = 0, b = 0, c = 1, d = 0

Also gilt das das für td Angegebene, da dieser Selektor eine höhere Spezifität hat.

Nope, .tabelleanzeigen hat 0010, was höher als das 0001 von td ist.

Meine Vermutung: in dem Element mit .tabelleanzeigen befinden sich p-Elemente ...

cu,
Andreas

[Gunnar Bittersmann]

Nicht nur, daß Du die Buchstaben falsch zuordnest, da Du das style-Attribut nicht berücksichtigst, Du gibst Elementselektoren einen höheren Stellenwert als Attributselektoren.

Grmpf, da hab ich a und c vertauscht. :-( Sorry.

Live long and prosper,
Gunnar

[Marian]

Hi Flo,

p, td {
mit einer bestimmten Schriftart und -farbe dargestellt!
}

in der Voransicht habe ich eine Tabelle und diese Tabelle formatiere ich so <table class="tabelleanzeigen">

.tabelleanzeigen {
Andere Schriftart und -farbe, -größe!
}

Trotzdem wird mir in der Voransicht immer die Formatierungen von p, td angezeigt! An was kann das liegen? Auch wenn ich in der Eingabemaske einen Satz als Größe 14px formatiere, wird mir dieser Satz nach den Formatierungen von p, td angezeigt!

Also (wenn es Gunnar nicht fertig bringt, das vernünftig zu erklären, sondern nur auf irgendwelche CSS-Spezifikationen zu verweisen):

td (das gleiche gilt jeweils auch für <p>) ist "genauer" als .tabelleanzeigen. Deswegen richtet sich das Aussehen von td nach dem für td angegeben Aussehen, und nicht nach dem für .tabelleanzeigen.
Du musst festlegen, wie eine Tabellenzelle _in_ einer .tabelleanzeigen aussehen soll.  Siehe: Formate für verschachtelte HTML-Elemente definieren

Gruß, Marian

[Gunnar Bittersmann]

wenn es Gunnar nicht fertig bringt, das vernünftig zu erklären,

Marian,
Erst den ganzen Thread lesen, dann antworten. Bringst du das fertig?

Live long and prosper,
Gunnar

[Marian]

Hi Gunnar,

Erst den ganzen Thread lesen, dann antworten. Bringst du das fertig?

Ich _habe_ alles gelesen.

1. Es gibt bessere Möglichkeiten, jemand etwas zu erklären, als ihn gleich auf die CSS-Spezifikation zu verweisen.

2.

Willst du für Elemente <td class="tabelleanzeigen"> andere Formatierungen, muss deren Selektor also eine hörere Spezifität bekommen als 100; setze also a = 1: td.tabelleanzeigen

kanns ja auch nicht sein. Soll ich jetzt _jedem_ td die Klasse seines Elternelements zuweisen? Da ist mein Vorschlag ja wohl wesentlich einfacher.

Gruß, Marian

[Gunnar Bittersmann]

Ich _habe_ alles gelesen.

Marian,
Wie kamst du dann zu der Einschätzung, ich hätte „nur auf irgendwelche CSS-Spezifikationen verwiesen“?

In https://forum.selfhtml.org/?t=119754&m=768496 habe ich auf Flos Rückfrage versucht, „das vernünftig zu erklären“.

Dass ich mich dabei vertan hatte und meine Erklärung völlig falsch war, steht auf einem anderen Blatt. Das musste natürlich korrigiert werden, so wie MudGuard es getan hat.

1. Es gibt bessere Möglichkeiten, jemand etwas zu erklären, als ihn gleich auf die CSS-Spezifikation zu verweisen.

IMHO ist es die sinnvolle Reihenfolge, erst auf die Grundlage zu verweisen. Wenn der Fragende Nachfragen dazu hat, möge er sie stellen, dann werden sie beantwortet. (Das nächste Mal hoffentlich auch korrekt.)

Soll ich jetzt _jedem_ td die Klasse seines Elternelements zuweisen?

Es ging um die Formatierung der Elemente, die ein class-Attribut mit dem Wert tabelleanzeigen haben.

Live long and prosper,
Gunnar

[Der Martin]

Hallo Gunnar,

Wie kamst du dann zu der Einschätzung, ich hätte „nur auf irgendwelche CSS-Spezifikationen verwiesen“?
[...]
IMHO ist es die sinnvolle Reihenfolge, erst auf die Grundlage zu verweisen.

nein, da bin ich auch anderer Meinung. Sinnvoll ist es, dem Fragenden erst einmal ein _anschauliche_ und _verständliche_ Erklärung zu geben. Dafür sind die meisten technischen Spezifikationen leider denkbar ungeeignet, da sie viel Grundwissen voraussetzen. Sie sind daher für den Einsteiger alles andere als hilfreich und erst dann empfehlenswert, wenn mal eine Grundlage da ist.

Wenn mich ein Laie fragt, warum die Widerstände auf einer Leiterplatte bunte Ringe haben, kann ich ihn auch auf das Ohmsche Gesetz und von da auf den Farbcode für Widerstandswerte verweisen - aber wenn ich ihm einfach nur sage, dass in diesen Farbringen der Widerstandswert verschlüsselt ist, genügt ihm das wahrscheinlich schon.

Wenn der Fragende Nachfragen dazu hat, möge er sie stellen, dann werden sie beantwortet.

Genau. Und _dann_ ist es IMHO früh genug für einen Hinweis auf die Spec.

Schönen Sonntag noch,

Martin

[Marian]

Hi Gunnar Bittersmann,

Dass ich mich dabei vertan hatte und meine Erklärung völlig falsch war, steht auf einem anderen Blatt. Das musste natürlich korrigiert werden, so wie MudGuard es getan hat.

Dass es falsch war habe ich selber garnicht bemerkt. Ich meine nur, dass man  einem Laien erstmal eine kurze Erklärung gibt, wie Der Martin  ja schon geschrieben hat.

Soll ich jetzt _jedem_ td die Klasse seines Elternelements zuweisen?

Es ging um die Formatierung der Elemente, die ein class-Attribut mit dem Wert tabelleanzeigen haben.

Es war eine Tabelle <table class="tabelleanzeigen">.
.tabelleanzeigen war sagen wir mal grün, td, p rot.
Flo hatte sich dann gewundert, warum der Text in der Tabelle nicht grün, sondern rot war.
Darauf hin hast du geschrieben, dass er die Spezifität des Selektors erhöhen und td.tabelleanzeigen und <td class="tabelleanzeigen"> schreiben soll. Das kann ja nicht der Sinn der Sache sein.
Wenn er einfach .tabelleanzeigen td schreiben würde, käme er mit einem class="tabelleanzeigen" aus, und zwar im <table>-Tag.

Gruß, Marian

[Gunnar Bittersmann]

Es ging um die Formatierung der Elemente, die ein class-Attribut mit dem Wert tabelleanzeigen haben.

Es war eine Tabelle <table class="tabelleanzeigen">.

In der Tat. Sorry, Marian, war wohl nicht mein Tag.

Live long and prosper,
Gunnar

[MudGuard]

Hi,

wenn es Gunnar nicht fertig bringt, das vernünftig zu erklären, sondern nur auf irgendwelche CSS-Spezifikationen zu verweisen

, hältst Du es für richtig, schwammig ('ist "genauer" als') den gleichen Fehler zu verbreiten.
Selbst wenn es richtig wäre:
Mit Deiner "Erklärung" wüßte Flo jetzt genau für diese eine Kombination von Selektoren, warum Deklarationen unter dem einen Deklarationen unter dem anderen überschreiben - wenn man aber auf die Stelle der Spezifikation verweist, kann Flo zukünftig für jede beliebige Selektoren-Kombination selbst nachgucken.

Da Flo nur das CSS, nicht aber den HTML-Code-Ausschnitt angegeben hat, ist es eher Rumraterei, was genau dafür sorgt, daß die Formatierungen nicht wie gewünscht benutzt werden.

cu,
Andreas