adb.study
/
webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9d2bb4b860'
${ noResults }
webdesign-Becker_Ehricht_Fl.../screens/text_styling/beispiele.html

396 lines
18 KiB
HTML
Raw Normal View History Unescape Escape

init
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-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="../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>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 Option zur Einstellung der
größe eine Auswahl verschiedener schrifftarten gibt.
Die Schriftarten sind hierbei die selben, wie bei den Standartmäß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>
&ltstyle&gt <br>
&emsp;#Text1{font-family: Arial;}<br>
&emsp;#Text2{font-family: Helvetica;}<br>
&emsp;#Text3{font-family: sans-serif;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtArial&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtGeorgia&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtLucida Handwriting&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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 CSS verändern. Dafür steht dem Nutzer ein großteil des
sichtbaren Farbspektrum zur Verfügung.
Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der
Website.
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
einen genauen Farbton zur erhalten.
Danach bendet man die Anweisung wieder mit einem Semikolon.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Farbe1{color: Rot;}<br>
&emsp;#Farbe2{color: rgb(81, 132, 109);}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Farbe1"&gtRot&lt/li&gt<br>
&emsp;&emsp;&ltli id="Farbe2"&gtRGB&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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 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
font Anweisungen anwendet.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Style1{font-style: italic}<br>
&emsp;#Style2{font-style: onlique}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Style1"&gtitalic&lt/li&gt<br>
&emsp;&emsp;&ltli id="Style2"&gtoblique&lt/li&gt<br>
&emsp;&emsp;&ltli&gtnormal&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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 vorgefährtigten 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>
&ltstyle&gt <br>
&emsp;#Text1{font-weight: bold}<br>
&emsp;#Text2{font-weight: 700}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Style1"&gtitalic&lt/li&gt<br>
&emsp;&emsp;&ltli id="Style2"&gtoblique&lt/li&gt<br>
&emsp;&emsp;&ltli&gtnormal&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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.
Die Anweisung ist wie die anderen Anweisungen.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{font-variant: normal}<br>
&emsp;#Text2{font-variant: small-cap}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Style1"&gtnormal&lt/li&gt<br>
&emsp;&emsp;&ltli id="Style2"&gtsmall-cap&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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 kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern.
Die Anweisung ist wie die anderen Anzuwenden.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Align1{text-align: left}<br>
&emsp;#Align2{text-align: right}<br>
&emsp;#Align3{text-align: center}<br>
&emsp;#Align4{text-align: justify}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Align1"&gtleft&lt/li&gt<br>
&emsp;&emsp;&ltli id="Align2"&gtright&lt/li&gt<br>
&emsp;&emsp;&ltli id="Align3"&gtcenter&lt/li&gt<br>
&emsp;&emsp;&ltli id="Align4"&gtjustify&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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.
Die Anweisung wird ausgeführt wie die Vorherigen.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{text-decoration: underline;}<br>
&emsp;#Text2{text-decoration: overline;}<br>
&emsp;#Text3{text-decoration:: line-trough;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtunderline&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtoverline&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtline-trough&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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 Grund wie die "font-size" Anweisung nur anstatt das 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(%)
angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{word-spacing: 3mm;}<br>
&emsp;#Text2{word-spacing: 1px;}<br>
&emsp;#Text3{word-spacing: 1rem;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gt3 milimeter&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gt10 pixel&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gt1 root-Element&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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 eingebn sind hierbei die gleichen wie beim word- und letter-spacing.
</p>
<div class="code-example">
<code>
&ltstyle&gt <br>
&emsp;#Text1{text-indent: 10mm;}<br>
&emsp;#Text2{text-indent: 20px;}<br>
&emsp;#Text3{text-indent: 1rem;}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gt10 milimeter&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gt20 pixel&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gt1 root-Element&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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>
&ltstyle&gt <br>
&emsp;#Text1{text-transform: capitalize}<br>
&emsp;#Text2{text-transform: uppercase}<br>
&emsp;#Text3{text-transform: lowercase}<br>
&emsp;#Text4{text-transform: none}<br>
&lt/style&gt<br>
<br>
&ltbody&gt<br>
&emsp;&ltol&gt<br>
&emsp;&emsp;&ltli id="Text1"&gtcapitalize the letters&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text2"&gtuppercase&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtLowercase The Letters&lt/li&gt<br>
&emsp;&emsp;&ltli id="Text3"&gtno rules&lt/li&gt<br>
&emsp;&lt/ol&gt<br>
&lt/body&gt
</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>