Text-Styling

Allgemeines

Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb des Programmes in dem die Webseite erstellt wird gegebennen Möglichkeiten bearbeitet um den Wünschen des Webssitenbesitzers zu entsprechen. Heutzutage ist diese Methode jedoch stark veralltet. Die gängigste arte eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu erstellen und die Textoptik dann mithilfe eines zusätzlichen CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten. Diese sind in form der Größe, der Schriftart und der Textfarbe und so funktionieren die drei verschiedenen bearbeitungsfunktionen:

Veränderung der Textgröße

Mit hilf von Css lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften verändern. Einige Beispiele für die verschiedenen Mäßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der standart Schriftgröße(%) oder sogar Centimeter(cm).
Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern möchte und nutz dann den befehl "font-size". Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert auf welchen man sie verändern. Danach endet man den CSS befehl mit einem Semikolon.

<style>
 #Text1{font-size: 20px;}
 #Text2{font-size: 120%;}
 #Text3{font-size: 1cm;}
</style>

<body>
 <ol>
  <li id="Text1">Pixel </li>
  <li id="Text2">Vorgegebene Größen</li>
  <li id="Text3">Prozent</li>
 </ol>
</body>

  1. Pixel
  2. Vorgegebene Größen
  3. Prozent

Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene größen. Hierfür nutzt man dann statt einem Parameter mit Wert einfach eine der Vorgegeben Größenstufen, indem man sie als Wort hinschreibt.


<style>
 #Text1{font-size: smaller;}
 #Text2{font-size: medium;}
 #Text3{font-size: large;}
</style>

<body>
 <ol>
  <li id="Text1">Pixel </li>
  <li id="Text2">Vorgegebene Größen</li>
  <li id="Text3">Prozent</li>
 </ol>
</body>

  1. Pixel
  2. Vorgegebene Größen
  3. Prozent

So lässt sich grob und schnell die Schrifgröße des textes auf des webseite auf die passende Größe einstellen.