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 Option zur Einstellung der größe eine Auswahl verschiedener schrifftarten gibt. Die Schriftarten sind hierbei die selben, wie bei den Standartmäß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 CSS verändern. Dafür steht dem Nutzer ein großteil des sichtbaren Farbspektrum zur Verfügung. Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der Website. 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 standart 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 Anschnitte eines textes hervor zu heben. Dafür kann man entweder den italic oder den onlique stle verwenden in dem man sie wie die anderern 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 vorgefährtigten 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. Die Anweisung ist wie die anderen Anweisungen.

<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 kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern. Die Anweisung ist wie die anderen Anzuwenden.

<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. Die Anweisung wird ausgeführt wie die Vorherigen.

<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 Grund wie die "font-size" Anweisung nur anstatt das man die Größe der Wörter verändert erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das 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 eingebn 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.