The StyleWorksCSS { Referenz · Labor · Übungen }
  1. Startseite
  2. Testen
  3. Textformatierung und -darstellung 2

CSS-Quiz · Runde 2

CSS-Quiz: Textformatierung und -darstellung – Teil 2

10 Fragen zu Textformatierung und -darstellung in CSS 2.1. Jede Antwort wird sofort bewertet und erklärt; das Ergebnis erscheint am Ende der Seite.

Erstveröffentlichung Fragen 10Antwortmöglichkeiten 3 je Frage
Frage 1 von 10Angenommen, für ein Block- Level- Element sei text-decoration: underline; deklariert, ein Nachkommenelement davon sei mit text-decoration: overline; deklariert. Was wird am Nachkommenelement dargestellt?

Lösung

Richtig: Unterstreichung und Überstreichung. – Richtig, durch das Prinzip der '/quiz.html' wird die Textdekoration nicht unterbrochen. Die Deklaration für das Nachkommenelement wird praktisch ….

Frage 2 von 10Welche Werte können nicht durch die Eigenschaft font gesetzt werden?

Lösung

Richtig: Werte für die Eigenschaften font-size-adjust und font-stretch. – Richtig, diese beiden Werte werden zwar auf ihre Ausgangswerte zurückgesetzt, aber sonst weiter nicht verändert.

Frage 3 von 10Wie heißen die generischen Werte für die Eigenschaft font-family?

Lösung

Richtig: serif, sans-serif, cursive, monospace und fantasy.

Frage 4 von 10Welche absoluten Längeneinheiten kann man für die Schriftgröße (font-size) verwenden?

Lösung

Richtig: Zentimeter (cm), Millimeter (mm), Zoll/Inch (in), Points (pt) und Picas (pc). – Absolut richtig - fünf absolute Längeneinheiten.

Frage 5 von 10Wie groß ist im folgenden Codebeispiel die Zeilenhöhe des Elements P?
BODY { font-size: 15px; }
P { font: 120%/1.33 }

Lösung

Richtig: 24 Pixel.

Frage 6 von 10Durch welche Eigenschaften kann der Abstand zwischen zwei Worten beeinflusst werden?

Lösung

Richtig: Durch font-size, letter-spacing, word-spacing und text-align. – Stimmt, alle genannten Eigenschaften haben auf unterschiedliche Weise einen Einfluß auf den Wortabstand.

Frage 7 von 10In welche der folgenden Deklarationen hat sich ein Fehler eingeschlichen?

Lösung

Richtig: P:first-line { line-height: -20%; }. – Genau richtig: der Wert für … darf nicht negativ sein.

Frage 8 von 10Was ist der Unterschied zwischen dem HTML-Attribut valign und der CSS-Eigenschaft vertical-align? 

Lösung

Richtig: Valign gilt nur innerhalb von Tabellen, vertical-align ist auf jeden Text anwendbar. – Richtig, genau genommen ist … auf alle Inline- Level- Elemente anwendbar, es hängt aber noch von anderen Eigenschaften ab, ob man den Unterschied überhaupt sieht.

Frage 9 von 10Angenommen, Sie wollen die erste Zeile eines Absatzes ein Stück weit einrücken. Wie bewirken Sie, dass die Einrückung von der Bildweite des Browserfensters abhängig ist?

Lösung

Richtig: Durch Deklaration von text-indent mit einem Prozentwert. – Stimmt, denn Prozentwerte sind hier abhängig von der Breite des umschließenden Blocks.

Frage 10 von 10Welche Möglichkeit bietet CSS, Sequenzen von Leerzeichen in vollständiger Länge auszugeben.?

Lösung

Richtig: Die Eigenschaft white-space. – Stimmt: durch die Deklaration ….

Warum die Unterstreichung durchgreift

Die Textauszeichnung wird nicht im eigentlichen Sinn vererbt, wirkt aber über die Nachfahren hinweg: An einem Block gesetzt, unterstreicht sie den gesamten Text darin, einschließlich aller Inline-Elemente – und lässt sich an einem Nachfahren nicht abschalten. Eine Betonung innerhalb eines unterstrichenen Absatzes bleibt unterstrichen, auch wenn dort ausdrücklich das Gegenteil steht.

Der Grund ist, dass die Linie zur Auszeichnungsbox des Blocks gehört und nicht zu den Boxen der Kinder. Nur ein Nachfahre, der einen eigenen Formatierungskontext eröffnet – ein Inline-Block, eine schwebende Box, eine Tabellenzelle –, ist davon ausgenommen und trägt die Linie nicht.

Ein Rahmen verhält sich anders: Er gehört genau zu der Box, an der er notiert ist. Wer eine Linie braucht, die einzelne Wörter aussparen soll, kommt mit der Unterstreichung also nicht weiter. Umgekehrt ist die Durchgriffswirkung nützlich, wenn eine ganze Zeile durchgestrichen erscheinen soll – ein einziger Wert am Container genügt.

Was die Kurzform für Schriften nicht kann

Die Kurzform setzt bis zu sechs Angaben in einer Zeile, und zwei davon sind Pflicht: Größe und Familie, in dieser Reihenfolge und am Ende. Alles davor – Stil, Variante, Stärke – ist entbehrlich, und die Zeilenhöhe wird hinter der Größe mit einem Schrägstrich angehängt.

Der Punkt, an dem die meisten stolpern: Was nicht genannt ist, wird nicht etwa beibehalten, sondern auf den Ausgangswert zurückgesetzt. Eine vorher gesetzte Zeilenhöhe ist nach einer Kurzform ohne Zeilenhöhe verschwunden, und dasselbe gilt für Stärke und Variante. Die Kurzform ist eine vollständige Neudefinition, keine Ergänzung.

Zurückgesetzt werden inzwischen auch Eigenschaften, die in ihrer Schreibweise gar nicht vorkommen können – die Schriftbreite, die Größenanpassung und die Angaben zu den Schriftvarianten. Setzen lassen sie sich über die Kurzform nicht, verlieren aber tut man sie. Wer Kapitälchen, Ziffernvarianten oder eine angepasste Breite verwendet, notiert die Schriftangaben deshalb besser einzeln.

Leerraum, Wortabstand und Umbruch

Im Normalfall fasst der Browser jede Folge aus Leerzeichen, Tabulatoren und Zeilenumbrüchen zu einem einzigen Leerzeichen zusammen; Leerraum am Zeilenanfang und -ende fällt ganz weg. Der Zeilenumbruch im Quelltext ist also nur ein Leerzeichen, und zehn Leerzeichen hintereinander sind eines. Genau darum lässt sich Quelltext frei einrücken.

Die Eigenschaft für den Leerraum schaltet an drei unabhängigen Stellen: ob Folgen zusammengefasst werden, ob Umbrüche aus dem Quelltext erhalten bleiben und ob am Zeilenende automatisch umbrochen wird. Aus diesen drei Ja-Nein-Fragen ergeben sich ihre Werte – wer sie so liest, muss sich keine Tabelle merken.

Für den Abstand zwischen Wörtern gibt es zwei Eigenschaften: eine, die den Zwischenraum an den Wortgrenzen vergrößert, und eine, die den Abstand zwischen allen Zeichen ändert und damit auch die Wörter auseinanderzieht. Beide nehmen negative Werte an. Und für einzelne Stellen ist die Eigenschaft ohnehin zu grob – ein geschütztes Leerzeichen hält zwei Wörter zusammen, ein weiches Trennzeichen erlaubt einen Umbruch mit Bindestrich.

Das Attribut valign und die CSS-Eigenschaft

Beide heißen fast gleich und tun in einer Tabellenzelle dasselbe – die senkrechte Ausrichtung des Zelleninhalts. Der Unterschied liegt woanders: Das Attribut gibt es nur an Tabellenelementen, die Eigenschaft an jedem Inline-Element und an Tabellenzellen. Und dort bedeutet sie zwei verschiedene Dinge.

An einem Inline-Element bestimmt sie die Lage in der Zeilenbox: Grundlinie, hoch- und tiefgestellt, oben und unten in der Zeile, dazu Längen und Prozentwerte, die sich auf die Zeilenhöhe beziehen. An einer Tabellenzelle bestimmt sie die Lage des Inhalts in der Zelle, und dort haben die Werte für hoch- und tiefgestellt sowie alle Längenangaben keine Wirkung.

Vererbt wird die Eigenschaft nicht – anders als fast alle anderen dieses Kapitels. Der Grund liegt auf der Hand: Ein vererbter Wert würde jede verschachtelte Inline-Box gegenüber ihrer Zeile verschieben und die Zeile auseinanderziehen. Wer eine ganze Tabelle oben ausrichten will, muss die Eigenschaft also an den Zellen setzen, nicht an der Tabelle.

Auch hier lohnt der Blick in die Spalte der Schnellreferenz, die für jede Eigenschaft dieses Kapitels Ausgangswert, Vererbung und Bezugswert nebeneinanderstellt. Die meisten Überraschungen dieser Runde lassen sich dort in einer Zeile nachlesen – und wer die Tabelle einmal von oben nach unten liest, hat den Zusammenhang zwischen den zwölf Eigenschaften schneller als über zwölf Einzelseiten.