Text-Styling

Weitere Beispiele

Veränderung der Textart

Ebenfalls möglich, ist das Ändern der Schriftart über CSS. Im Grunde verhält es sich hierbei ähnlich, wie das Ändern der Schriftgröße. Der Unterschied liegt hierbei darin, dass es anstatt vieler verschiedener Optionen zur Einstellung der größe eine Auswahl verschiedener Schriftarten gibt. Die Schriftarten sind hierbei die selben, wie bei den Standardmäßig verwendeten Schreibprogrammen wie Word oder Open Office. Zum ändern der Schriftart definiert man hierfür den Abschnitt, bei dem man die Schriftart ändern möchte und nutz dann den befehl "font-family". Daraus folgt ein Doppelpunkt und hinter diesen schreibt man den Namen der gewünschten Schriftart. Zum Abschluss ein Semikolon und die Schriftart wurde erfolgreich geändert.

<style>
 #Text1{font-family: Arial;}
 #Text2{font-family: Helvetica;}
 #Text3{font-family: sans-serif;}
</style>

<body>
 <ol>
  <li id="Text1">Arial</li>
  <li id="Text2">Georgia</li>
  <li id="Text3">Lucida Handwriting</li>
 </ol>
</body>

  1. Arial
  2. Georgia
  3. Lucida Handwriting

Schriftfarbe ändern

Auch die Farbe der Schrift lässt sich mit CSS verändern. Dafür steht dem Nutzer ein Großteil des sichtbaren Farbspektrums zur Verfügung. Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der Webseite. Dahinter gibt man dann die gewünschte Farbe an. Dafür gibt es zwei Möglichkeiten. Entweder man schreibt einfach den Namen der Farbe und die standard Version der gewünschten Farbe wird genutzt oder man gibt die RGB Werte einer Farbe an um einen genauen Farbton zur erhalten. Danach bendet man die Anweisung wieder mit einem Semikolon.

<style>
 #Farbe1{color: Rot;}
 #Farbe2{color: rgb(81, 132, 109);}
</style>

<body>
 <ol>
  <li id="Farbe1">Rot</li>
  <li id="Farbe2">RGB</li>
 </ol>
</body>

  1. Rot
  2. RGB

Schrift stylen

Zusätzlich kann man mit hilfe der "font-styles" Anweisung das Aussehen der Schrift verändern um gewisse Ausschnitte eines Textes hervor zu heben. Dafür kann man entweder den italic oder den onlique style verwenden in dem man sie wie die andereren font Anweisungen anwendet.

<style>
 #Style1{font-style: italic}
 #Style2{font-style: onlique}
</style>

<body>
 <ol>
  <li id="Style1">italic</li>
  <li id="Style2">oblique</li>
  <li>normal</li>
 </ol>
</body>

  1. italic
  2. oblique
  3. normal

Schriftdicke verändern

Mit der Anweisung "font-weight" lässt sich lässt sich die Dicke des Schrift verstellen. Auch hierbei gibt es zwei Möglichkeiten die Werte anzugeben. Entweder man nutz einen der vorgefertigten Werte von CSS oder man gibt den Wert in einer Zahl an. Dabei gehen die Werte von 100 bis 900 in 100ter schritten während die Standart dicke der Schrift bei 400 liegt. Anzuwenden ist die Anweisung wie die vorherigen Module.

<style>
 #Text1{font-weight: bold}
 #Text2{font-weight: 700}
</style>

<body>
 <ol>
  <li id="Style1">italic</li>
  <li id="Style2">oblique</li>
  <li>normal</li>
 </ol>
</body>

  1. bold
  2. 700
  3. normal

Schrift Variante ändern

Mit der Anweisung "font-variant" kann man die Art der Schrift zwischen normal und small-caps verändern.

<style>
 #Text1{font-variant: normal}
 #Text2{font-variant: small-cap}
</style>

<body>
 <ol>
  <li id="Style1">normal</li>
  <li id="Style2">small-cap</li>
 </ol>
</body>

  1. normal
  2. small-cap

Textausrichtung ändern

Mit der Anweisung text-align lässt sich die Ausrichtung eines Textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksatz ändern.

<style>
 #Align1{text-align: left}
 #Align2{text-align: right}
 #Align3{text-align: center}
 #Align4{text-align: justify}
</style>

<body>
 <ol>
  <li id="Align1">left</li>
  <li id="Align2">right</li>
  <li id="Align3">center</li>
  <li id="Align4">justify</li>
 </ol>
</body>

  1. left
  2. right
  3. center
  4. justify

Textgestaltung

Mit hilfe der "text-decoration" Anweisung kann man der Schrift Linien über, unter und durch die Schrift hinzufügen.

<style>
 #Text1{text-decoration: underline;}
 #Text2{text-decoration: overline;}
 #Text3{text-decoration:: line-trough;}
</style>

<body>
 <ol>
  <li id="Text1">underline</li>
  <li id="Text2">overline</li>
  <li id="Text3">line-trough</li>
 </ol>
</body>

  1. underline
  2. overline
  3. line trough

Wort- und Zeichenabstände verändern

Die "word-spacing" Anweisung funktioniert im Grunde wie die "font-size" Anweisung nur anstatt dass man die Größe der Wörter verändert erhöht oder veringert man den zwischen den einzelnen Worten. Der Rest ist identisch, außer dass man den Abstand nicht in Prozenten(%) angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).

<style>
 #Text1{word-spacing: 3mm;}
 #Text2{word-spacing: 1px;}
 #Text3{word-spacing: 1rem;}
</style>

<body>
 <ol>
  <li id="Text1">3 milimeter</li>
  <li id="Text2">10 pixel</li>
  <li id="Text3">1 root-Element</li>
 </ol>
</body>

  1. 3 Milimeter
  2. 10 Pixel
  3. 1 root-Element

Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen Zeichen, also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern.

Texte einrücken

Über die Anweisung "text-indent" kann der Nutzer Zeilen einrücken. Die Einheiten zum eingeben sind hierbei die gleichen wie beim word- und letter-spacing.

<style>
 #Text1{text-indent: 10mm;}
 #Text2{text-indent: 20px;}
 #Text3{text-indent: 1rem;}
</style>

<body>
 <ol>
  <li id="Text1">10 milimeter</li>
  <li id="Text2">20 pixel</li>
  <li id="Text3">1 root-Element</li>
 </ol>
</body>

  1. 10 Milimeter
  2. 20 Pixel
  3. 1 root-Element

Texte transvormieren

Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für den Text festlegen, die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind:

  1. Capitalize: Der erste Buchstabe jedes Wortes wir zu einem Großbuchstaben.
  2. Uppercase: Alle Buchstaben werden Großbuchstaben
  3. Lowercase: Alle Buchstaben werden Kleinbuchstaben
  4. None: Regeln werden aufgehoben.

Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der Rechtschreibung für Leute, mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.

<style>
 #Text1{text-transform: capitalize}
 #Text2{text-transform: uppercase}
 #Text3{text-transform: lowercase}
 #Text4{text-transform: none}
</style>

<body>
 <ol>
  <li id="Text1">capitalize the letters</li>
  <li id="Text2">uppercase</li>
  <li id="Text3">Lowercase The Letters</li>
  <li id="Text3">no rules</li>
 </ol>
</body>

  1. capitalize the letters
  2. uppercase
  3. Lowercase The Letters
  4. no rules

Nun weißt du alles was es über das Gestalten eines Textes mit CSS zu wissen gibt.