|
|
|
|
<!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="../index.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
|
|
|
|
|
gegebenen Möglichkeiten bearbeitet um den Wünschen des Webseitenbesitzers zu entsprechen. Heutzutage
|
|
|
|
|
ist diese
|
|
|
|
|
Methode jedoch stark veraltet. Die gängigste
|
|
|
|
|
Art 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 hilfe von CSS lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften
|
|
|
|
|
verändern.
|
|
|
|
|
Einige Beispiele für
|
|
|
|
|
die verschiedenen Maßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der
|
|
|
|
|
standard
|
|
|
|
|
Schriftgröße(%) oder Zentimeter(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 der
|
|
|
|
|
Webseite auf die passende Größe einstellen.
|
|
|
|
|
</p>
|
|
|
|
|
<br>
|
|
|
|
|
</section>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>Erstellt von: Luca Nicolas Fleck</p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
