<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styling-Allgemein</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/text_styling.css">
</head>
<body>
<header>
<h1>Text-Styling</h1>
</header>
<nav class="navigationbar">
<a href="../home.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a>
</nav>
<main>
<article>
<h2>Allgemeines</h2>
<p>
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:
</p>
<section>
<h3>
Veränderung der Textgröße
</h3>
<p>
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).<br>
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.
</p>
<div class="code-example">
<code>
<style> <br>
 #Text1{font-size: 20px;}<br>
 #Text2{font-size: 120%;}<br>
 #Text3{font-size: 1cm;}<br>
</style><br>
<br>
<body><br>
 <ol><br>
  <li id="Text1">Pixel </li><br>
  <li id="Text2">Vorgegebene Größen</li><br>
  <li id="Text3">Prozent</li><br>
 </ol><br>
</body>
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-sizePX">Pixel </li>
<li id="font-sizePR">Vorgegebene Größen</li>
<li id="font-sizeCM">Prozent</li>
</ol>
<p class="explanation">
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.
</p>
<br>
<div class="code-example">
<code>
<style> <br>
 #Text1{font-size: smaller;}<br>
 #Text2{font-size: medium;}<br>
 #Text3{font-size: large;}<br>
</style><br>
<br>
<body><br>
 <ol><br>
  <li id="Text1">Pixel </li><br>
  <li id="Text2">Vorgegebene Größen</li><br>
  <li id="Text3">Prozent</li><br>
 </ol><br>
</body>
</code>
</div>
<br>
<ol class="visual-example">
<li id="font-sizeS">Pixel </li>
<li id="font-sizeM">Vorgegebene Größen</li>
<li id="font-sizeL">Prozent</li>
</ol>
<p class="explanation">
So lässt sich grob und schnell die Schrifgröße des textes auf des
webseite auf die passende Größe einstellen.
</p>
<br>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Luca Nicolas Fleck</p>
</footer>
</body>