You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

130 lines
5.3 KiB
HTML

2 years ago
<!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>
2 years ago
<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/allgemeines.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>
2 years ago
<p>
2 years ago
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.
2 years ago
</p>
2 years ago
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-size: 20px;}<br>
&emsp;#Text2{font-size: 120%;}<br>
&emsp;#Text3{font-size: 1cm;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtPixel &lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtVorgegebene Größen&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtProzent&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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>
&ltstyle&gt <br>
&emsp;#Text1{font-size: smaller;}<br>
&emsp;#Text2{font-size: medium;}<br>
&emsp;#Text3{font-size: large;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtPixel &lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtVorgegebene Größen&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtProzent&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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>