Schriftgröße und Selektoren

[Mario]

Hallo zusammen, ich versuche mich gerade an Schriftgrößen und Selektoren. Dabei bin ich in einem Buch auf folgende Übung gestoßen:

Definiere in einem Stylesheet zunächst, dass alle <em>s gegenüber ihrer Umgebung doppelte Schriftgröße haben sollen. Dann definiere eine Klasse doch-nicht-so-wichtig, und stelle für diese ein, dass doch wieder die normale, einfache Schriftgröße verwendet wird. Die Klasse soll also die Auswirkung der em-Regel aufheben.

Die Angaben im Stylesheet sind noch nachvollziehbar.

em*1 {font-size: 2.0em;}
.doch-nicht-so-wichtig {font-size: 1.0em}

Aber warum muss man den Code mit einer extra Klasse versehen wenn man das <em> nach dem bossum wieder beendet?

Lorum <em>bossum</em>, <em class="doch-nicht-so-wichtig">dort ist </em>amit 

[Christian Kruse]

Hallo Mario,

Aber warum muss man den Code mit einer extra Klasse versehen wenn man das <em> nach dem bossum wieder beendet?

Lorum <em>bossum</em>, <em class="doch-nicht-so-wichtig">dort ist </em>amit 

Ich verstehe deine Frage nicht so richtig. Wenn du die Klasse beim zweiten em weglässt, dann würde es auch eine font-size von 2em bekommen. Durch die Klasse wird das für dieses em resettet.

LG,
CK

[Der Martin]

Hi,

em*1 {font-size: 2.0em;}
.doch-nicht-so-wichtig {font-size: 1.0em}

was soll em*1 deiner Meinung nach bedeuten? IMO ergibt das einen Syntaxfehler.

Aber warum muss man den Code mit einer extra Klasse versehen wenn man das <em> nach dem bossum wieder beendet?

Weil das die Aufgabe war: Der Inhalt von em-Elementen soll grundsätzlich doppelte Schriftgröße haben, mit Ausnahme von em-Elementen, die die Klasse doch-nicht-so-wichtig haben.

Übrigens würde ich den zweiten Selektor im Stylesheet komplett mit dem Elementnamen ausschreiben, also em.doch-nicht-so-wichtig. Dann hat er nämlich eine höhere Spezifizität, auf gut Deutsch, ein höheres Gewicht, als der reine em-Selektor. Dein Beispiel funktioniert, aber die Reihenfolge der Regeln im Stylesheet ist bei dir entscheidend. Mit em.doch-nicht-so-wichtig ist das nicht mehr der Fall.

So long,
 Martin

[MrMurphy1]

Hallo

Entweder hälst du uns Informationen (Präprozessor?) vor oder die Angabe

em*1

ist falsch und müsste

em*1

lauten.

Aber warum muss man den Code mit einer extra Klasse versehen wenn man das <em> nach dem bossum wieder beendet?

In dem Beispiel soll gezeigt werden, wie Formatierungen für bestimmte Elemente (hier: alle em) für einzelne dieser Elemente (hier: die em mit der Klasse doch-nicht-so-wichtig) erneut überschrieben werden können. Also das C in CSS.

Genau so hätte der Autor einen Text mit mehreren Absätzen (p-Elemente) verwenden können, von denen einige mittels Klassen anders formatiert werden.

Das Beispiel mit em ist zudem leider saublöd vom Autoren gewählt.

Das em-Element hat eine bestimmte Wichtigkeit (Bedeutung, Semanik) die nicht durch CSS oder andere Schriftgrößen geändert werden kann. Dafür müssten andere HTML-Elemente verwendet werden. Die Wichtigkeit von em steht fest und kann nicht geändert werden.

Durch solche Beispiele werden grade HTML-Neulinge auf den falschen Weg geführt, das durch CSS oder andere optische Änderungen die Wichtigkeit von Elementen geändert werden kann. Besser wäre für dieses Beispiel als Element span zu wählen und als Klasse vielleicht "normale-schriftgroesse".

aber die Reihenfolge der Regeln im Stylesheet ist bei dir entscheidend

Hast du das überhaupt mal ausprobiert? Die Rangfolge hängt nur bei genau gleicher Spezifität von der Reihenfolge im CSS ab.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Durch solche Beispiele werden grade HTML-Neulinge auf den falschen Weg geführt, das durch CSS oder andere optische Änderungen die Wichtigkeit von Elementen geändert werden kann.

Ja, kein wirklich gutes Beispiel.

Besser wäre für dieses Beispiel als Element span zu wählen und als Klasse vielleicht "normale-schriftgroesse".

Nein! Das wäre eine präsentationsbezogene Klasse; solche sollte man vermeiden.

Da sind Klassen, die unterschiedliche Wichtigkeit von em-Elementen ausdrücken, schon besser.

Bei „doch nicht so wichtig“ sollte aber wohl gar nicht erst ein em-Element verwendet werden.

LLAP 🖖

[Tabellenkalk]

Hallo,

Bei „doch nicht so wichtig“ sollte aber wohl gar nicht erst ein em-Element verwendet werden.

Vielleicht ist "ein-bisschen-wichtig" gemeint?

Gruß
Kalk

[Rolf b]

Entweder hälTst du uns Informationen (Präprozessor?) vor oder die Angabe

em*1

ist falsch und müsste

em*1

lauten.

Entweder hat uns dein Browser einen Teil deines Postings vorenthalten oder - äh - was meinst Du bitte?

Rolf

[MudGuard]

Hi,

Entweder hälst du uns Informationen (Präprozessor?) vor oder die Angabe

em*1

ist falsch und müsste

em*1

lauten.

Und was genau ist der Unterschied? Ich seh keinen ...

cu,
Andreas a/k/a MudGuard

[MrMurphy1]

Hallo

Entschuldigung. Der zweite, korrekte, Eintrag sollte

em

lauten.

Gruss

MrMurphy

[Mario]

Hallo zusammen und vielen vielen Dank allen die hier schon ihre Zeit für mein Beispiel geopfert haben.

Was das em angeht habe ich versehentlich das "*1" nicht entfernt, war für einen Hinweis im Buch ergänzt wurde. Richtig ist also in der Tat "em".

Wenn das Beispiel für Neulinge suboptimal gewählt wurde, bin ich ja echt froh. Es geht übrigens um das Buch "Schrödinger lernt HTML, CSS,...".