|
|
|
|
@ -15,7 +15,7 @@
|
|
|
|
|
<h1>Text-Styling</h1>
|
|
|
|
|
</header>
|
|
|
|
|
<nav class="navigationbar">
|
|
|
|
|
<a href="../">Home</a>
|
|
|
|
|
<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>
|
|
|
|
|
@ -34,15 +34,15 @@
|
|
|
|
|
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 Option zur Einstellung der
|
|
|
|
|
größe eine Auswahl verschiedener schrifftarten gibt.
|
|
|
|
|
Die Schriftarten sind hierbei die selben, wie bei den Standartmäßig verwendeten Schreibprogrammen
|
|
|
|
|
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.
|
|
|
|
|
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">
|
|
|
|
|
@ -74,13 +74,13 @@
|
|
|
|
|
Schriftfarbe ändern
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Auch die Farbe der Schrift lässt sich CSS verändern. Dafür steht dem Nutzer ein großteil des
|
|
|
|
|
sichtbaren Farbspektrum zur Verfügung.
|
|
|
|
|
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
|
|
|
|
|
Website.
|
|
|
|
|
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
|
|
|
|
|
standart Version der gewünschten Farbe wird genutzt oder man gibt die RGB Werte einer Farbe an um
|
|
|
|
|
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>
|
|
|
|
|
@ -110,9 +110,9 @@
|
|
|
|
|
Schrift stylen
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Zusätzlich kann man mit hilfe der "font-styles" Anweisung das aussehen der Schrift verändern um
|
|
|
|
|
gewisse Anschnitte eines textes hervor zu heben.
|
|
|
|
|
Dafür kann man entweder den italic oder den onlique stle verwenden in dem man sie wie die anderern
|
|
|
|
|
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">
|
|
|
|
|
@ -144,8 +144,8 @@
|
|
|
|
|
</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 vorgefährtigten Werte von CSS oder man gibt den Wert in einer Zahl an.
|
|
|
|
|
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.
|
|
|
|
|
@ -178,9 +178,8 @@
|
|
|
|
|
Schrift Variante ändern
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Mit der Anweisung "font-variant" kann man die art der Schrift zwischen normal und small-caps
|
|
|
|
|
Mit der Anweisung "font-variant" kann man die Art der Schrift zwischen normal und small-caps
|
|
|
|
|
verändern.
|
|
|
|
|
Die Anweisung ist wie die anderen Anweisungen.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
@ -208,9 +207,8 @@
|
|
|
|
|
Textausrichtung ändern
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig,
|
|
|
|
|
Rechtsseitig und Blocksats ändern.
|
|
|
|
|
Die Anweisung ist wie die anderen Anzuwenden.
|
|
|
|
|
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>
|
|
|
|
|
@ -244,9 +242,8 @@
|
|
|
|
|
Textgestaltung
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift
|
|
|
|
|
Hinzufügen.
|
|
|
|
|
Die Anweisung wird ausgeführt wie die Vorherigen.
|
|
|
|
|
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>
|
|
|
|
|
@ -277,10 +274,10 @@
|
|
|
|
|
Wort- und Zeichenabstände verändern
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die
|
|
|
|
|
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 sozusagen identisch, außer das
|
|
|
|
|
man den abstand nicht in Prozenten(%)
|
|
|
|
|
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">
|
|
|
|
|
@ -318,7 +315,7 @@
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Über die Anweisung "text-indent" kann der Nutzer Zeilen einrücken.
|
|
|
|
|
Die einheiten zum eingebn sind hierbei die gleichen wie beim word- und letter-spacing.
|
|
|
|
|
Die Einheiten zum eingeben sind hierbei die gleichen wie beim word- und letter-spacing.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
<code>
|
|
|
|
|
@ -361,7 +358,7 @@
|
|
|
|
|
</ol>
|
|
|
|
|
<p>
|
|
|
|
|
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der
|
|
|
|
|
rechtschreibung für Leute,
|
|
|
|
|
Rechtschreibung für Leute,
|
|
|
|
|
mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="code-example">
|
|
|
|
|
@ -392,7 +389,7 @@
|
|
|
|
|
</ol>
|
|
|
|
|
</section>
|
|
|
|
|
<p>
|
|
|
|
|
Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt.
|
|
|
|
|
Nun weißt du alles was es über das Gestalten eines Textes mit CSS zu wissen gibt.
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
|
|
|
|
</main>
|
|
|
|
|
|
