24.01.2008

Schrift- und Textformatierungen

Für die üblichen Text-Ausrichtungungen sind die nachfolgenden Eigenschaften weitgehend bekannt:

text-align: left; für linksbündigen Text (Standardeinstellung)
text-align: right; für rechtsbündigen Text
text-align: justify; für links- und rechtsbündigen Text (Blocksatz) und
text-align: center; für zentrierten Text

Darüber hinaus gibt es noch weitere Attribute, mit denen man Text gestalten kann:

1. letter-spacing

Mit letter-spacing wird durch Zuweisung eines entsprechenden Wertes der Abstand zwischen den einzelnen Buchstaben festgelegt.
Demo:
Diesem Satz liegt ein letter-spacing: 3px; zugrunde.

2. word-spacing

Ähnlich funktioniert's mit word-spacing, wobei hier der Abstand zwischen den einzelnen Wörtern angegeben wird:
Demo:
Hier haben die einzelnen Wörter durch word-spacing: 7px; einen Abstand von 7px.

3. text-decoration

Wer die manchmal störenden Link-Unterstriche entfernen will, bedient sich eines text-decoration: none;.

Mit text-decoration: underline; kann Text unterstrichen werden.

text-decoration: overline; bewirkt ein Überstreichen des Textes.

Statt Text einfach zu löschen, kann man ihn zu Demonstrationszwecken mit text-decoration: line-through; auch durchstreichen:
Demo:
Hier wurde das Wort "doppelt" doppelt geschrieben und deshalb einmal durchgestrichen.

4. text-indent

Mit text-indent: 40px; wird der Text der jeweils ersten Zeile eines Absatzes eingerückt. Hier um einen Wert von 40px.
Die zweite Zeile sowie alle weiteren erscheinen dann wieder linksbündig.

5. text-transform

Wer zu bequem ist, die Hochstelltaste für großgeschriebenen Text zu bedienen, oder dies vergessen hat, der kann es mit text-transform: uppercase; korrigieren:
Demo:
Dieser Text ist im Quelltext korrekt mit Groß- und Kleinbuchstaben geschrieben. Durch die Eigenschaft text-transform: uppercase; wird er jedoch durchgängig in Großschrift angezeigt.

Für durchgehende Kleinschrift - unabhängig von der Texteingabe - verwendet man text-transform: lowercase;

6. first-letter

Soll der erste Buchstaben eines Absatzes eine andere Formatierung haben, so kann man dies mit first-letter; definieren:

Der erste Buchstabe dieses Satzes ist 2em groß, in Schrägschrift und rot.
Die weiteren Zeilen haben wieder Normalschrift, bis ein neuer Absatz anfängt.

Beachte:
First-letter ist ein Pseudoelement. Seine Eigenschaften können nur zentral angegeben werden. Also entweder in einer ausgelagerten CSS-Datei oder in den Style-Angaben innerhalb des Head-Bereichs. Seine CSS-Angaben erfolgen so:

p:first-letter
{
font-size:2em;
font-style: italic;
color:red;
}

Diese Angabe schlägt auf sämtliche Absätze durch. Will man sie auf bestimmte Absätze begrenzen, so definiert man eine entsprechende Klasse nach folgendem Syntax:

p.first:first-letter
{
font-size:2em;
font-style: italic;
color:red;
}

HTML-Aufruf entsprechend mit <p class="first"> Text </p>

7. first-line

Analog zu "first-letter" lässt sich auch die erste Zeile eines Absatzes gesondert formatieren, z.B. in Fettschrift und blau. Das Ganze ist auch kombinierbar mit "first-letter", so dass , dadurch zusätzlich der erste Buchstabe wie oben in rot erscheint.

Diesem Absatz liegt folgende CSS-Formatierung zugrunde:

p.first2:first-letter
{
font-size:2em;
font-style: italic;
color:red;
}

p.first2:first-line
{
font-weight: bold;
color: blue;
}

HTML:

<p class="first2">
Analog zu "first-letter" lässt sich auch ...
</p>

nach oben


Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0018.php on line 177

Warning: include(mainincludes/footer.php): failed to open stream: No such file or directory in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0018.php on line 177

Warning: include(): Failed opening 'mainincludes/footer.php' for inclusion (include_path='.:/opt/php/7.2.11/share/pear') in /var/www/web539/html/gehtsgarnet/subdomains/ohne-css/0018.php on line 177