⬆
Youtube Video

Texteigenschaften etc.

Mit den folgenden CSS Eigenschaften kann man weitere Formatierungen des Textes vornehmen. Die text- Eigenschaften sind auf Block- Elemente anwendbar wie: adress, bockquote, dl, div, fieldset, form, h1- bis h6, hr, ol, ul, p, pre, table

text-align

Text ausrichten

siehe auch  

Hiermit wird die horizontale Ausrichtung innerhalb eines Elements definiert.

text-align
Eigenschaft Wert Bedeutung
Standardwert left
Vererbbar ja
Anwendbar Alle Block-Elemente
text-align left links
right rechts
center mittig
justify Blocksatz

text-transform

Groß und Kleinschreibung

Man kann für einen bestimmten Textbereich bestimmen, ob er groß oder kleingeschrieben werden sollen. Außerdem kann man auch nur die Wortanfänge in Großschreibung darstellen. Im Zusammenhang mit font-variant: small-caps, kann man auch eine Schriftart mit Kapitälchen erzeugen.

text-transform Selfhtml

so sieht's aus

text-transform
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar ja
Anwendbar Alle Elemente
text-transform uppercase Großschreibung
lowercase Kleinschreibung
capitalize erster Buchstabe eines jeden Wortes groß
none normale Schreibweise

text-decoration

Text hervorheben mit Linien

Mit text-decoration kann man Textpassagen besonders hervorheben. Es lassen sich auch mehrere Werte angeben.

text-decoration Selfhtml

so sieht's aus

text-decoration
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar nein
Anwendbar Alle Elemente
text-decoration underline Linie unter dem Element
overline Linie über dem Element
line-through durchgestrichen
blink blinken
none normale Schreibweise

text-shadow

Text mit Schatteneffekt

Western Civilisation Shadow Tool

Ab CSS3 kann man Texte mit einem Schatteneffekt versehen. Achtung! Im Gegensatz zu Box-Shadow gibt es hier nur 4 Werte, um den Schatten zu definieren.

Die Werte sind:
x-Versatz, y-Versatz, Weichheit, Farbe
so sieht's aus

Durch mehrere Schatten lassen sich interessante Effekt erzielen:
so sieht`s aus siehe auch Pixeltuner

text-shadow: h-shadow v-shadow blur color

text-shadow: 2px 2px 3px #333

text-shadow
text-shadow h-shadow horizontaler Abstand
v-shadow vertikaler Abstand
blur Weichzeichnung
color Farbe

text-indent

In vielen Texten wird die erste Zeile eines Absatzes eingerückt. Das lässt sich mit der CSS Eigenschaft text-indent berwerkstelligen.
so sieht's aus

Textabstände
Eigenschaft Wert Bedeutung
Standardwert none
Vererbbar ja nur bei line-height vererbar auf Unterelemente
Anwendbar

die hier aufgeführten Eigenschaften sind anwendbar auf alle Elemente außer

text-indent ist nur anwendbar auf Blockelemente
line-height normal die in der Schrift definierte Zeilenhöhe von ca 120%
  Zahlenangaben Zahlen mit Maßeinheit oder Prozent
word-spacing normal Standardwert
  Zahlenangaben Standardmäßig wird Pixel genommen. Prozentangeben sind nicht erlaubt
letter-spacing normal Standardwert
  Zahlenangaben Standardmäßig wird Pixel genommen. Prozentangeben sind nicht erlaubt
text-indent Zahlenangaben Zahlen oder Prozentangaben Standardmäßig wird Pixel genommen.

vertical-align

Youtube Video

Text ausrichten

siehe dazu Mediaevent
siehe dazu  developer mozilla tipp 

Hiermit wird die vertikale Ausrichtung eines inline Elements festgelegt, beispielsweise wie sich kleiner Text innerhalb einer Zeile zu größerem Text verhält oder Text neben einem Bild oder ein Bild neben einem Text. Man kann jedoch keine Ausrichting an Blockelementen damit festlegen.

Die Werte verhalten sich unterschiedlich, je nach angewendetem Kontext.

Auch für die Ausrichtung in Tabellenzellen ist diese Eigenschaft wichtig. In Tabellenzellen kann man nur die 3 Wert top, middle, bottom verwenden.

so sieht's aus

Desweiteren lassen sich mit vertical-align auch Bilder innerhalb einer Textzeile ausrichten. In den folgenden Beispielen wird die Eigenschaft vertical-align dem Bild zugewiesen. 

img{vertical-align: top;}   

<p>Bla Bla Text <img src="punkt.jpg"> </p>

Bild und Text so sieht`s aus

Typografie

 

vertical-align
Eigenschaft Wert Bedeutung  
Standardwert baseline
Vererbbar nein
Anwendbar inline- Elemente a, acronym, br, em img, input, small, span, strike, strong, textarea zusätzlich td, th
vertical-align top Die Oberkante des Elements liegt auf der Oberkante des Elternelements. Tabellenzelle
bottom Die Unterkante des Elements liegt auf der Unterkante des Elternelements. Tabellenzelle
text-top Die p-Linie des Elements liegt über der x-Linie des Elternelements. no
text-bottom Die Unterkante des Elements liegt unter der Grundlinie des Elternelements. no
baseline Die Grundlinie des Elements liegt auf der Grundlinie des Elternelements.  
middle Die Mitte des Elements liegt auf der Mitte der Kleinbuchstaben des Elternelements. Tabellenzelle
sub tiefgestellt unter der Grundlinie  
super hochgestellt  
Prozentangabe Die Unterkante des Elements liegt um einen prozentualen Wert höher oder bei einem Minuswert tiefer. Die Anteile beziehen sich auf die line-height des inline Elements welchem vertical-align zugewiesen wird. Nicht auf die line-height des Elternelements.  

Textabstände

Youtube Video

line-height

Die Zeilenhöhe ist der Abstand zwischen den Unterkanten zweier übereinanderliegender Zeilen. Wird die Höhe größer als 120% gesetzt führt das zu einem sogenannten zusätzlichen Durchschuss. Das ist ein typografischer Ausdruck, der sich auf den Zwischenraum zwischen den beiden Zeilen bezieht.

Je größer die Zeilenbreite, desto größer sollte die Zeilenhöhe werden, das fördert die Lesbarkeit.

Fette Schriften brauchen eine größere Zeilenhöhe z.B. 130% bis 140%.
so sieht's aus

word-spacing

Der ideale Wortzwischenraum ist laut Typografieregel der Abstand den ein Großbuchstabe in einer Serifenschrift einnehmen würde. Der typografische Ausdruck für den Wortabstand ist Ausschuss.
so sieht's aus

letter-spacing

Den Abstand zwischen den einzelnen Zeichen nennt man auch Laufweite, Buchstabenabstand oder Buchstabenweite. Die Abstände zwischen Buchstaben vergrößern nennt man in der Typgrafie sperren und verkleinern nennt man stauchen.
so sieht's aus

Zeilenumbruch white-space

Um einen Text vor Zeilenumbruch zu schützen kann man die CSS Eigenschaft white-space einsetzen. Es löst den HTML Tag <nobr> ab.

Selfhtml white-space

so sieht's aus

Silbentrennung kann man nicht mit CSS aber mit HTML erreichen.
Mehr dazu im Thema Zeilenumbruch.

white-space
Eigenschaft Wert Bedeutung
Standardwert normal
Vererbbar ja
Anwendbar Alle Block- Elemente
white-space normal automatischer Zeilenumbruch
pre Umbruch wie beim Html Element pre
pre-wrap wie beim Html-Element pre mit der Ausnahme, dass bei Platzmangel doch umgebrochen wird
pre-line wie bei pre aber mehrere Leerzeichen werden zusammengefasst
nowrap Zeilenumbruch wird unterbunden

Mehrspaltensatz column-count

siehe auch w3schools

Mit der neuen CSS Eigenschaft colum-count, kann man echten mehrspaltigen Text erzeugen, der automatisch in die nächste Spalte fließt.

article {column-count: 2; column-gap: 1em;}

so sieht`s aus

column-count
Eigenschaft Wert Bedeutung
Standardwert auto
column-count Zahl Anzahl der Spalten
auto Hier wird die Anzahl der Spalten durch andere Eigenschaften ermittelt z.B. column-width

Alternativ kann man auch column-width angeben. Daraus ergibt sich die Anzahl der Spalten.

column-width
Eigenschaft Wert Bedeutung
Standardwert auto
column-width length Breite der Spalten z.B. 200px
auto Hier wird die Anzahl der Spalten durch andere Eigenschaften ermittelt z.B. column-count

Mittels column-gap gibt man an, wie groß die Lücke zwischen den Spalten sein soll.

column-gap
Eigenschaft Wert Bedeutung
Standardwert auto
column-gap number Breite der Lücke z.B. 20px
auto Hier wird die Anzahl der Spalten durch andere Eigenschaften ermittelt z.B. column-width

Mittels column-rule kann man eine Linie zwischen den Spalten definieren. Dieser Linie kann man 3 verschiedene Eigenschaften zuweisen: column-rule-width, column-rule-style, column-rule-color, Die Werte für column-rule-style entsprechen den Werten für border-style

Mit der Kurzschreibweise column-rule: Breite, Style Color gibt man alle 3 Eigenschaften auf einmal zuweisen.

column-rule
Eigenschaft Wert Bedeutung
Standardwert auto
column-rule width Breite der Linie
style Stil der Linie entspricht border-style
color Farbe

User-select

Die user-select Eigenschaft gibt an, ob der Text eines Elements ausgewählt werden kann.

user-select
Eigenschaft Wert Bedeutung
Standardwert auto
user-select auto Der Text kann ausgewählt werden, wenn der Browser es erlaubt
none Text kann nicht ausgewählt werden
text Der Text kann vom User ausgewählt werden
all Der gesamte Text wird mit einem Klick ausgewählt anstatt einem Doppelklick.

hyphens

siehe auch Mediaevent
Mit hyphens: auto kann man eine automatischen Silbentrennung am Ende einer Zeile erzeugen. Hierzu muss die Sprache der Seite in HTML definiert sein.
<html lang="de">

Gerade im Zusammenhang mit Blocksatz kann man es gut einsetzen.

p{text-align: justify;
  hyphens:auto;
  }

Bedingter Zeilenumbruch

Man kann in HTML auch einen bedingten Zeilenumbruch erzeugen

&shy bedingter Zeilenumbruch mit Trennzeichen

<wbr> bedingter Zeilenumbruch ohne Trennzeichen

siehe auch