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.
400 lines
17 KiB
HTML
400 lines
17 KiB
HTML
<!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-Beispiele</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>Weitere Beispiele</h2>
|
|
<section>
|
|
<h3>
|
|
Veränderung der Textart
|
|
</h3>
|
|
<p>
|
|
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 Optionen zur Einstellung der
|
|
größe eine Auswahl verschiedener Schriftarten gibt.
|
|
Die Schriftarten sind hierbei die selben, wie bei den Standardmäß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.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{font-family: Arial;}<br>
|
|
 #Text2{font-family: Helvetica;}<br>
|
|
 #Text3{font-family: sans-serif;}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Text1">Arial</li><br>
|
|
  <li id="Text2">Georgia</li><br>
|
|
  <li id="Text3">Lucida Handwriting</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="font-familyA">Arial</li>
|
|
<li id="font-familyG">Georgia</li>
|
|
<li id="font-familyLH">Lucida Handwriting</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Schriftfarbe ändern
|
|
</h3>
|
|
<p>
|
|
Auch die Farbe der Schrift lässt sich mit CSS verändern. Dafür steht dem Nutzer ein Großteil des
|
|
sichtbaren Farbspektrums zur Verfügung.
|
|
Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der
|
|
Webseite.
|
|
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
|
|
standard 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.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Farbe1{color: Rot;}<br>
|
|
 #Farbe2{color: rgb(81, 132, 109);}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Farbe1">Rot</li><br>
|
|
  <li id="Farbe2">RGB</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="colorW">Rot</li>
|
|
<li id="colorZ">RGB</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Schrift stylen
|
|
</h3>
|
|
<p>
|
|
Zusätzlich kann man mit hilfe der "font-styles" Anweisung das Aussehen der Schrift verändern um
|
|
gewisse Ausschnitte eines Textes hervor zu heben.
|
|
Dafür kann man entweder den italic oder den onlique style verwenden in dem man sie wie die andereren
|
|
font Anweisungen anwendet.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Style1{font-style: italic}<br>
|
|
 #Style2{font-style: onlique}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Style1">italic</li><br>
|
|
  <li id="Style2">oblique</li><br>
|
|
  <li>normal</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="font-styleI">italic</li>
|
|
<li id="font-styleO">oblique</li>
|
|
<li>normal</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Schriftdicke verändern
|
|
</h3>
|
|
<p>
|
|
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 vorgefertigten 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.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{font-weight: bold}<br>
|
|
 #Text2{font-weight: 700}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Style1">italic</li><br>
|
|
  <li id="Style2">oblique</li><br>
|
|
  <li>normal</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="font-weightB">bold</li>
|
|
<li id="font-weightZ">700</li>
|
|
<li>normal</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Schrift Variante ändern
|
|
</h3>
|
|
<p>
|
|
Mit der Anweisung "font-variant" kann man die Art der Schrift zwischen normal und small-caps
|
|
verändern.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{font-variant: normal}<br>
|
|
 #Text2{font-variant: small-cap}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Style1">normal</li><br>
|
|
  <li id="Style2">small-cap</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="Text1">normal</li>
|
|
<li id="Text2">small-cap</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Textausrichtung ändern
|
|
</h3>
|
|
<p>
|
|
Mit der Anweisung text-align lässt sich die Ausrichtung eines Textes zwischen Linksseitig, Mittig,
|
|
Rechtsseitig und Blocksatz ändern.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Align1{text-align: left}<br>
|
|
 #Align2{text-align: right}<br>
|
|
 #Align3{text-align: center}<br>
|
|
 #Align4{text-align: justify}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Align1">left</li><br>
|
|
  <li id="Align2">right</li><br>
|
|
  <li id="Align3">center</li><br>
|
|
  <li id="Align4">justify</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="text-alignL">left</li>
|
|
<li id="text-alignR">right</li>
|
|
<li id="text-alignC">center</li>
|
|
<li id="text-alignJ">justify</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Textgestaltung
|
|
</h3>
|
|
<p>
|
|
Mit hilfe der "text-decoration" Anweisung kann man der Schrift Linien über, unter und durch die Schrift
|
|
hinzufügen.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{text-decoration: underline;}<br>
|
|
 #Text2{text-decoration: overline;}<br>
|
|
 #Text3{text-decoration:: line-trough;}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Text1">underline</li><br>
|
|
  <li id="Text2">overline</li><br>
|
|
  <li id="Text3">line-trough</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="text-decorationU">underline</li>
|
|
<li id="text-decorationO">overline</li>
|
|
<li id="text-decorationLT">line trough</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Wort- und Zeichenabstände verändern
|
|
</h3>
|
|
<p>
|
|
Die "word-spacing" Anweisung funktioniert im Grunde wie die "font-size" Anweisung nur anstatt dass man die
|
|
Größe der Wörter verändert
|
|
erhöht oder veringert man den zwischen den einzelnen Worten. Der Rest ist identisch, außer dass
|
|
man den Abstand nicht in Prozenten(%)
|
|
angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{word-spacing: 3mm;}<br>
|
|
 #Text2{word-spacing: 1px;}<br>
|
|
 #Text3{word-spacing: 1rem;}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Text1">3 milimeter</li><br>
|
|
  <li id="Text2">10 pixel</li><br>
|
|
  <li id="Text3">1 root-Element</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="word-spacingMM">3 Milimeter</li>
|
|
<li id="word-spacingPX">10 Pixel</li>
|
|
<li id="word-spacingREM">1 root-Element</li>
|
|
</ol>
|
|
<p class="explanation">
|
|
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.
|
|
</p>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Texte einrücken
|
|
</h3>
|
|
<p>
|
|
Über die Anweisung "text-indent" kann der Nutzer Zeilen einrücken.
|
|
Die Einheiten zum eingeben sind hierbei die gleichen wie beim word- und letter-spacing.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{text-indent: 10mm;}<br>
|
|
 #Text2{text-indent: 20px;}<br>
|
|
 #Text3{text-indent: 1rem;}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Text1">10 milimeter</li><br>
|
|
  <li id="Text2">20 pixel</li><br>
|
|
  <li id="Text3">1 root-Element</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="text-indentMM">10 Milimeter</li>
|
|
<li id="text-indentPX">20 Pixel</li>
|
|
<li id="text-indentREM">1 root-Element</li>
|
|
</ol>
|
|
</section>
|
|
<section>
|
|
<h3>
|
|
Texte transvormieren
|
|
</h3>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<ol>
|
|
<li>Capitalize: Der erste Buchstabe jedes Wortes wir zu einem Großbuchstaben.</li>
|
|
<li>Uppercase: Alle Buchstaben werden Großbuchstaben</li>
|
|
<li>Lowercase: Alle Buchstaben werden Kleinbuchstaben</li>
|
|
<li>None: Regeln werden aufgehoben.</li>
|
|
</ol>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<div class="code-example">
|
|
<code>
|
|
<style> <br>
|
|
 #Text1{text-transform: capitalize}<br>
|
|
 #Text2{text-transform: uppercase}<br>
|
|
 #Text3{text-transform: lowercase}<br>
|
|
 #Text4{text-transform: none}<br>
|
|
</style><br>
|
|
<br>
|
|
<body><br>
|
|
 <ol><br>
|
|
  <li id="Text1">capitalize the letters</li><br>
|
|
  <li id="Text2">uppercase</li><br>
|
|
  <li id="Text3">Lowercase The Letters</li><br>
|
|
  <li id="Text3">no rules</li><br>
|
|
 </ol><br>
|
|
</body>
|
|
</code>
|
|
</div>
|
|
<br>
|
|
<ol class="visual-example">
|
|
<li id="text-transformC">capitalize the letters</li>
|
|
<li id="text-transformU">uppercase</li>
|
|
<li id="text-transformL">Lowercase The Letters</li>
|
|
<li id="text-transformN">no rules</li>
|
|
</ol>
|
|
</section>
|
|
<p>
|
|
Nun weißt du alles was es über das Gestalten eines Textes mit CSS zu wissen gibt.
|
|
</p>
|
|
</article>
|
|
</main>
|
|
<footer>
|
|
<p>Erstellt von: Luca Nicolas Fleck</p>
|
|
</footer>
|
|
</body>
|