Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)

HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)

Über die in diesem Video-Training vorgestellten CSS-Eigenschaften lassen sich Texte und Zeichen optisch anpassen. So können zum Beispiel die Abstände zwischen den einzelnen Buchstaben verändert und Texte ausgerichtet werden. Auch diese Eigenschaften helfen euch also dabei, Texte ansprechend zu präsentieren.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Die Schriftfarbe lässt sich über color festlegen. Erwartet wird dabei ein Farbwert.
p { 
   color: red; 
}

Als Wert könnt ihr Farbwörter oder einen hexadezimalen Farbwert angeben.


Die Schreibrichtung festlegen

Über die Eigenschaft direction kann die Schreibrichtung bei Elementen erzwungen werden. Interessant ist die umgekehrte Schreibrichtung im Zusammenhang mit Sprachen, in denen von rechts nach links geschrieben wird.

Zusätzlich lässt sich hierüber bestimmen, an welcher Seite übergroße Inhalte mit overflow abgeschnitten werden.

ltr – von links nach rechts
rlt – von rechts nach links

Das folgende Beispiel zeigt, wie sich die Eigenschaft nutzen lässt.
.normal {direction:ltr;} 
.rueckwaerts {direction:rtl;}

Hier wurden zwei Klassen definiert.
<p class="normal">Text, der von links nach rechts geschrieben wird. 1 2 3 4 5 6 7 8 9 0</p> 
<p class="rueckwaerts">Text, der von rechts nach links geschrieben wird. 1 2 3 4 5 6 7 8 9 0</p>

 
Das Ergebnis sieht im Browser folgendermaßen aus:

Bilder



 

Die horizontale Ausrichtung von Texten

Über die Eigenschaft text-align wird die horizontale Ausrichtung von Textabsätzen und anderen in Block-Elementen enthaltenen Fließtexten oder Inline-Elementen festgelegt. Die Standardeinstellung ist übrigens eine linksbündige Ausrichtung.

left – linksbündige Ausrichtung
right – rechtsbündige Ausrichtung
center – zentriert
justify – als Blocksatz ausrichten

Ein Beispiel:
<p style="text-align:right;">
    Herzlich willkommen
</p>

Das Ergebnis sieht so aus:

Bilder



 

Die vertikale Ausrichtung

Über die Eigenschaft vertical-align wird die vertikale Textausrichtung innerhalb einer Zeile bezüglich der Zeilenhöhe bestimmt. Die Angabe bezieht sich immer auf das Elternelement, das ein Inline-Element sein muss. Zudem lässt sich Text innerhalb von Tabellen ausrichten.

Die folgenden Werte stehen zur Verfügung:

sub – tiefgestellt
super – hochgestellt
baseline – an der Grundlinie ausgerichtet
top – Ausrichtung am oberen Rand des Elternelements
bottom – am unteren Rand des Elternelements ausgerichtet
middle – mittig zwischen oberem und unterem Rand des Elternelements ausgerichtet
text-top – am oberen Textrand
text-bottom – am unteren Textrand
• Längenangabe – ein positiver oder negativer Wert verschiebt das Element über oder unter die Grundlinie.
• Prozentangabe – ein positiver oder negativer Wert verschiebt das Element über oder unter die Grundlinie.

Ein Beispiel:
.baseline { 
   vertical-align: baseline; 
}

Beachtet, dass die Werte von vertical-align durch die verschiedenen Browser leider sehr ungleichmäßig interpretiert werden. Ihr solltet die Ergebnisse also unbedingt testen, bevor ihr die Seiten online stellt.


 

Die Textdekoration bestimmen

text-decoration wird verwendet, um Texten oder Hyperlinks zusätzliche Eigenschaften zuzuweisen.

none – keine Textdekoration
underline – unterstrichen
overline – überstrichen
line-through – durchgestrichen
blink – blinkend

Auch hierzu ein Beispiel:
a:link { 
   text-decoration: none; 
}

Dadurch werden die Hyperlinks der Seite nicht mehr mit einem Unterstrich ausgestattet.

Bilder



 
Den Abstand zwischen den einzelnen Wörtern kann man ebenfalls explizit bestimmen.
<span style="word-spacing:0.5em">Willkommen auf PSD-Tutorials.de!</span><br />
<span style="word-spacing:1em"> Willkommen auf PSD-Tutorials.de!</span>

Erwartet wird ein numerischer Wert. Prozentuale Angaben sind hingegen nicht möglich.

Ähnlich gelagert wie word-spacing ist übrigens letter-spacing. Allerdings bestimmt man über letter-spacing den Abstand zwischen den einzelnen Buchstaben eines Textes. Auch hier sind numerische Werte, jedoch keine Prozentangaben erlaubt.
<span style="letter-spacing:0.1em">Beispieltext mit Zeichenabstand 0.1em</span><br> 
<span style="letter-spacing:0.3em">Beispieltext mit Zeichenabstand 0.3em</span><br>

Mit der Eigenschaft text-transform könnt ihr festlegen, ob der Text groß- oder kleingeschrieben wird. Und das unabhängig von der tatsächlichen Notation im Quelltext. Zusätzlich lassen sich Kapitälchen erzwingen.

lowercase – Kleinschreibung
uppercase – Großschreibung
capitalize – Wortanfänge als Großbuchstaben
none – keine Texttransformation

Beispiel:
.klein { 
   text-transform: lowercase; 
}

 
Im Browser sieht das Ergebnis folgendermaßen aus:

Bilder



 

Leerzeichen und Zeichenumbrüche

Mit der Eigenschaft white-space wird festgelegt, wie im Quelltext vorhandene Leerzeichen und Zeilenumbrüche im Browser dargestellt werden sollen.

normal – es wird ein automatischer Zeilenumbruch eingefügt. Außerdem werden mehrere Leerzeichen zu einem zusammengefasst.
pre – Zeilenumbrüche werden so angezeigt, wie sie im Quelltext stehen.
nowrap – es findet kein automatischer Zeilenumbruch statt.
pre-line – mehrere Leerzeichen werden zu einem zusammengefasst. Zusätzlich erfolgt ein Umbruch, wenn die Box für die Anzeige nicht groß genug ist.
pre-wrap – es erfolgt ein Umbruch, wenn die Box für die Anzeige nicht groß genug ist.

Auch hierzu ein Beispiel:
<pre class="brush:xml;">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;de&quot;&gt;
&lt;head&gt;
&lt;title&gt;PSD-Tutorials.de&lt;/title&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;style&gt;
body&gt;p {
   font-family:&quot;Courier New&quot;, Courier, monospace;
   font-size: 200%;
}
body p {
   color:#0066FF;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Absatz 1&lt;/p&gt;
&lt;p&gt;Absatz 2&lt;/p&gt;
&lt;p&gt;Absatz 3&lt;/p&gt;
&lt;div&gt;
&nbsp; &lt;p&gt;Absatz 4&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

 
Im Browser sieht das folgendermaßen aus:

Bilder



 

Schatten umsetzen

Über die Eigenschaft text-shadow kann man einen Schattenwurf für Texte erzwingen. Beachtet, dass diese Eigenschaft nur in vergleichsweise aktuellen Browsern unterstützt wird. Die Browser, die text-shadow nicht interpretieren können, zeigen die Schrift ohne Schatten an.

text-shadow wird folgendermaßen verwendet:
text-shadow: hV vV blur #xxxxxx;

Und das bedeuten die Werte:

hV – Horizontale Verschiebung
vV – Vertikale Verschiebung
blur – Unschärfe
#xxxxxx – Die Schattenfarbe

Das folgende Beispiel zeigt eine typische Anwendung für text-shadow.
.schatten {
   color: #444;
   font-size: 34px;
   text-shadow: 2px 2px 3px #333;
}

Angewendet wird die definierte Klasse nachfolgend auf eine Überschrift der ersten Ordnung.
<h1 class="schatten">PSD-Tutorials.de</h1>

 
Und auch hier ein Blick auf das Ergebnis:

Bilder



Wie bereits beschrieben, könnt ihr text-shadow problemlos einsetzen, da eine Nichtinterpretation durch die Browser keine negativen Auswirkungen hat. Der Text wird dann eben einfach ohne Schatten angezeigt.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:38

Vielen Dank für das Tutorial.

Portrait von Monti7
  • 06.07.2015 - 22:28

vielen Dank für das gelungene PDF

Portrait von Kiasa
  • 10.04.2015 - 08:55

Herzlichen Dank für das Video!

Portrait von ZainaPhoto
  • 28.03.2015 - 20:34

Großen Dank für das Video.

LG Zaina

Portrait von Turbotoni
  • 15.03.2015 - 14:23

Vielen Dank fuer diesen weiteren Teil dieses Tutorials

Portrait von dlieb
  • 02.03.2015 - 10:41

Vielen Dank für das Tutorial.

Portrait von Kundentest
  • 01.03.2015 - 17:24

Herzlichen Dank für das Tutorial.

Portrait von MARIA52
  • 01.03.2015 - 16:26

Vielen Dank für das Tutorial.

Portrait von suzana
  • 01.03.2015 - 15:49

Besten Dank, für das weitere informative Tutorial.

Portrait von kopfam
  • 01.03.2015 - 15:32

Vielen Dank für dein weiteres Tutorial aus der Reihe.

Portrait von renate_C
  • 01.03.2015 - 15:31

Vielen Dank für dsa interessante Tutorial.

Portrait von arko2013
  • 01.03.2015 - 15:30

Vielen Dank für das Tutorial.

Portrait von fe_web
  • 01.03.2015 - 15:03

Danke für dieses Tutorial.MfG

Portrait von teste123
  • 01.03.2015 - 14:30

vielen Dank
MfG

Portrait von teste123
  • 01.03.2015 - 14:29

vielen Dank
MfG

Portrait von samtron
  • 01.03.2015 - 14:28

vielen Dank

MfG

Portrait von BOPsWelt
  • 01.03.2015 - 13:59

Vielen Dank für einen weiteren Teil.

Portrait von pallasathena
  • 01.03.2015 - 13:43

besten Dank, das kann man wieder gut umsetzen

Portrait von Caesarion2004
  • 01.03.2015 - 13:16

Vielen Dank für das weitere informative Tutorial.

Portrait von fe_web
  • 03.02.2015 - 11:39

Tolles Tutorial und sehr lehrreich.Danke

x
×
×