adb.study/webdesign-Becker_Ehricht_Fleck_Minkowitsch_Pfau
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

apparently they did some changes
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
adb-sh 2023-01-05 19:37:00 +01:00
parent 32605ed267
commit 7e42dfe295
14 changed files with 98 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Gruppenmitglieder.txt
View File

@ -1,5 +1,5 @@
Alban Becker Alban Becker 710985
Leon Ehricht Leon Ehricht 730492
Luca Nicolas Fleck Luca Nicolas Fleck 730096
Niklas Minkowitsch Niklas Minkowitsch 730329
Lukas Pfau (730134) Lukas Pfau 730134

4
src/animation/animations.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animationen</title> <title>Animationen-Einführung</title>
<link rel="stylesheet" href="../css/layout.css"> <link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/animations.css"> <link rel="stylesheet" href="../css/animations.css">
</head> </head>
@ -15,7 +15,7 @@
<h1>Animationen</h1> <h1>Animationen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>

27
src/animation/keyframes.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyframes</title> <title>Animationen-Funktionen</title>
<link rel="stylesheet" href="../css/layout.css"> <link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/animations.css"> <link rel="stylesheet" href="../css/animations.css">
</head> </head>
@ -15,7 +15,7 @@
<h1>Animationen</h1> <h1>Animationen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -142,6 +142,10 @@
} }
</code> </code>
</div> </div>
<p class="explanation">
Durch den Wert "infinit" wir die Animation unendlich oft ausgeführ.
Um die Anzahl zu begrenzen kann ansonsten einfach eine Zahl angegeben werden.
</p>
</section> </section>
</article> </article>
<article> <article>
@ -176,7 +180,10 @@
</p> </p>
<p class="explanation"> <p class="explanation">
Hier dreht sich die erste Animation nach rechts Hier dreht sich die erste Animation nach rechts
(normal) und die zweite nach links (reverse). (normal) und die zweite nach links (reverse). <br> <br>
Als Möglichkeiten gäbe es noch zur Auswahl:
<br> &emsp; - alternate - erst Vorwärts, dann Rückwärts
<br> &emsp; - alternate-reverse - erst Rückwärts und dann Vorwärts
</p> </p>
</section> </section>
</article> </article>
@ -212,7 +219,12 @@
</p> </p>
<p class="explanation"> <p class="explanation">
Die erste Animation bewegt sich immer gleich schnell (linear) Die erste Animation bewegt sich immer gleich schnell (linear)
und die zweite am Anfang und am Ende schneller als in der Mitte (ease). und die zweite am Anfang und am Ende schneller als in der Mitte (ease). <br> <br>
Andere Möglichkeiten wären: <br>
&emsp; - ease-in - die Animation startet langsam <br>
&emsp; - ease-out - die Animation endet langsam <br>
&emsp; - ease-in-out startet und endet langsam <br>
&emsp; - cubic-bezier(n,n,n,n) - für eigene Angaben
</p> </p>
</section> </section>
</article> </article>
@ -241,6 +253,13 @@
} }
</code> </code>
</div> </div>
<p class="explanation">
Weitere Möglichkeiten zum Einsetzten sind: <br>
&emsp; - none - Standard <br>
&emsp; - forwards - Style vom letzten keyframe <br>
&emsp; - backwards - Style vom letzten keyframe <br>
&emsp; - both - beide Styles werden verwendet
</p>
</section> </section>
</article> </article>
</main> </main>

6
src/css/layout.css
View File

@ -69,12 +69,6 @@ footer {
border-bottom: 4px solid var(--primary); border-bottom: 4px solid var(--primary);
} }
code {
padding: .25rem .75rem;
border-radius: .35rem;
background-color: rgba(40, 40, 40, 0.8);
}
.code-example { .code-example {
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;

8
src/flexbox/allgemeines.html
View File

@ -15,7 +15,7 @@
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -29,13 +29,13 @@
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor10">Allgemeines</h2> <h2>Allgemeines</h2>
<p> <p>
Die Flexbox ist eine Styling-Option, mit der das Layout der Seite angepasst wird. Die Flexbox ordnet Die Flexbox ist eine Styling-Option, mit der das Layout der Seite angepasst wird. Die Flexbox ordnet
alle Unterelemente eines Bereichs in einer Reihe an. alle Unterelemente eines Bereichs in einer Reihe an.
</p> </p>
<section> <section>
<h3 id="anchor11">Eine Flexbox erzeugen</h3> <h3>Eine Flexbox erzeugen</h3>
<div class="code-example"> <div class="code-example">
<code> <code>
#example1 { <br> &emsp; display: flex; <br> } #example1 { <br> &emsp; display: flex; <br> }
@ -54,7 +54,7 @@
</p> </p>
</section> </section>
<section> <section>
<h3 id="anchor12">flex-direction</h3> <h3>flex-direction</h3>
<div class="code-example"> <div class="code-example">
<code> <code>
#example2 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> } #example2 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> }

14
src/flexbox/eigenschaften.html
View File

@ -15,7 +15,7 @@
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -29,12 +29,12 @@
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor20">Eigenschaften</h2> <h2>Eigenschaften</h2>
<p> <p>
Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können. Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können.
</p> </p>
<section> <section>
<h3 id="anchor21">flex-wrap</h3> <h3>flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4> <h4>Mit horizontaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap: <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
@ -70,7 +70,7 @@
hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen. hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen.
Der Standard-Wert ist <code>nowrap</code>, <code>wrap</code> aktiviert das Wrapping. Der Standard-Wert ist <code>nowrap</code>, <code>wrap</code> aktiviert das Wrapping.
</p> </p>
<h3 id="anchor22">flex-flow</h3> <h3>flex-flow</h3>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height: <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
600px; <br> }</code> 600px; <br> }</code>
@ -81,7 +81,7 @@
</p> </p>
</section> </section>
<section> <section>
<h3 id="anchor23">justify-content</h3> <h3>justify-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: center; <br> }</code> justify-content: center; <br> }</code>
@ -117,7 +117,7 @@
</p> </p>
</section> </section>
<section> <section>
<h3 id="anchor24">align-content</h3> <h3>align-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; <code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code> justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
@ -148,7 +148,7 @@
</p> </p>
</section> </section>
<section> <section>
<h3 id="anchor25">overflow</h3> <h3>overflow</h3>
<div class="code-example"> <div class="code-example">
<code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x: <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
scroll; <br> }</code> scroll; <br> }</code>

10
src/flexbox/unterelemente.html
View File

@ -15,7 +15,7 @@
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -29,12 +29,12 @@
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor30">Eigenschaften der Unterelemente</h2> <h2>Eigenschaften der Unterelemente</h2>
<p> <p>
Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet. Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet.
</p> </p>
<section> <section>
<h3 id="anchor31">flex-grow</h3> <h3>flex-grow</h3>
<div class="code-example"> <div class="code-example">
<code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> <code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example10 > p { <br> &emsp; flex-grow: 1; <br> }</code> #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
@ -50,7 +50,7 @@
</p> </p>
</section> </section>
<section> <section>
<h3 id="anchor32">flex-basis</h3> <h3>flex-basis</h3>
<div class="code-example"> <div class="code-example">
<code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> <code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code> #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
@ -65,7 +65,7 @@
</p> </p>
</section> </section>
<section> <section>
<h3 id="anchor33">flex-shrink</h3> <h3>flex-shrink</h3>
<div class="code-example"> <div class="code-example">
<code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> <code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code> #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>

2
src/grid/allgemeines.html
View File

@ -15,7 +15,7 @@
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>

2
src/grid/container.html
View File

@ -15,7 +15,7 @@
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>

2
src/grid/items.html
View File

@ -15,7 +15,7 @@
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>

4
src/index.html
View File

@ -12,7 +12,7 @@
<h1>Home</h1> <h1>Home</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="">Home</a> <a href="index.html">Home</a>
<a href="flexbox/allgemeines.html">Flexbox-Layout</a> <a href="flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="grid/allgemeines.html">Grid-Layout</a> <a href="grid/allgemeines.html">Grid-Layout</a>
<a href="text_styling/allgemeines.html">Text-Styling</a> <a href="text_styling/allgemeines.html">Text-Styling</a>
@ -95,7 +95,7 @@
</article> </article>
</main> </main>
<footer> <footer>
<code>Abgabe zum 05.01.2023</code> <p>Abgabe zum 05.01.2023</p>
</footer> </footer>
</body> </body>
</html> </html>

8
src/position/allgemeines.html
View File

@ -5,17 +5,17 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animationen</title> <title>Positionen</title>
<link rel="stylesheet" href="../css/layout.css"> <link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/position.css"> <link rel="stylesheet" href="../css/position.css">
</head> </head>
<body> <body>
<header> <header>
<h1>Animationen</h1> <h1>Positionen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
@ -116,7 +116,7 @@
<div class="code-example"> <div class="code-example">
<code> <code>
#example4 .active {<br> #example4 .active {<br>
&emsp;position: relative;<br> &emsp;position: fixed;<br>
&emsp;top: 1rem;<br> &emsp;top: 1rem;<br>
&emsp;left: 1rem;<br> &emsp;left: 1rem;<br>
} }

28
src/text_styling/allgemeines.html
View File

@ -15,7 +15,7 @@
<h1>Text-Styling</h1> <h1>Text-Styling</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
@ -33,31 +33,31 @@
Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb
des des
Programmes in dem die Webseite erstellt wird Programmes in dem die Webseite erstellt wird
gegebennen Möglichkeiten bearbeitet um den Wünschen des Webssitenbesitzers zu entsprechen. Heutzutage gegebenen Möglichkeiten bearbeitet um den Wünschen des Webseitenbesitzers zu entsprechen. Heutzutage
ist diese ist diese
Methode jedoch stark veralltet. Die gängigste Methode jedoch stark veraltet. Die gängigste
arte eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu Art eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu
erstellen und erstellen und
die Textoptik dann mithilfe eines zusätzlichen die Textoptik dann mithilfe eines zusätzlichen
CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten. CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten.
Diese sind Diese sind
in form der Größe, der Schriftart und in form der Größe, der Schriftart und
der Textfarbe und so funktionieren die drei verschiedenen bearbeitungsfunktionen: der Textfarbe und so funktionieren die drei verschiedenen Bearbeitungsfunktionen:
</p> </p>
<section> <section>
<h3> <h3>
Veränderung der Textgröße Veränderung der Textgröße
</h3> </h3>
<p> <p>
Mit hilf von Css lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften Mit hilfe von CSS lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften
verändern. verändern.
Einige Beispiele für Einige Beispiele für
die verschiedenen Mäßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der die verschiedenen Maßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der
standart standard
Schriftgröße(%) oder sogar Centimeter(cm).<br> Schriftgröße(%) oder Zentimeter(cm).<br>
Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern
möchte und möchte und
nutz dann den befehl "font-size". nutz dann den Befehl "font-size".
Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert
auf welchen auf welchen
man sie verändern. Danach endet man den CSS befehl mit einem Semikolon. man sie verändern. Danach endet man den CSS befehl mit einem Semikolon.
@ -86,9 +86,9 @@
<li id="font-sizeCM">Prozent</li> <li id="font-sizeCM">Prozent</li>
</ol> </ol>
<p class="explanation"> <p class="explanation">
Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene größen. Hierfür nutzt man dann Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene Größen. Hierfür nutzt man dann
statt einem statt einem
Parameter mit Wert einfach eine der Vorgegeben Größenstufen, Parameter mit Wert einfach eine der vorgegeben Größenstufen,
indem man sie als Wort hinschreibt. indem man sie als Wort hinschreibt.
</p> </p>
<br> <br>
@ -116,8 +116,8 @@
<li id="font-sizeL">Prozent</li> <li id="font-sizeL">Prozent</li>
</ol> </ol>
<p class="explanation"> <p class="explanation">
So lässt sich grob und schnell die Schrifgröße des textes auf des So lässt sich grob und schnell die Schrifgröße des Textes auf der
webseite auf die passende Größe einstellen. Webseite auf die passende Größe einstellen.
</p> </p>
<br> <br>
</section> </section>

57
src/text_styling/beispiele.html
View File

@ -15,7 +15,7 @@
<h1>Text-Styling</h1> <h1>Text-Styling</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../">Home</a> <a href="../index.html">Home</a>
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
@ -34,15 +34,15 @@
Veränderung der Textart Veränderung der Textart
</h3> </h3>
<p> <p>
Ebenfalls möglich, ist das ändern der Schriftart über CSS. Im Grunde verhält es sich hierbei Ebenfalls möglich, ist das Ändern der Schriftart über CSS. Im Grunde verhält es sich hierbei
ähnlich, wie das ändern der Schriftgröße. ähnlich, wie das Ändern der Schriftgröße.
Der unterschied liegt hierbei darin, dass es anstatt vieler verschiedener Option zur Einstellung der Der Unterschied liegt hierbei darin, dass es anstatt vieler verschiedener Optionen zur Einstellung der
größe eine Auswahl verschiedener schrifftarten gibt. größe eine Auswahl verschiedener Schriftarten gibt.
Die Schriftarten sind hierbei die selben, wie bei den Standartmäßig verwendeten Schreibprogrammen Die Schriftarten sind hierbei die selben, wie bei den Standardmäßig verwendeten Schreibprogrammen
wie Word oder Open Office. wie Word oder Open Office.
Zum ändern der Schriftart definiert man hierfür den Abschnitt, bei dem man die Schriftart ändern 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". 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. Zum Abschluss ein Semikolon und die Schriftart wurde erfolgreich geändert.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -74,13 +74,13 @@
Schriftfarbe ändern Schriftfarbe ändern
</h3> </h3>
<p> <p>
Auch die Farbe der Schrift lässt sich CSS verändern. Dafür steht dem Nutzer ein großteil des Auch die Farbe der Schrift lässt sich mit CSS verändern. Dafür steht dem Nutzer ein Großteil des
sichtbaren Farbspektrum zur Verfügung. sichtbaren Farbspektrums zur Verfügung.
Um die Farbe zu ändern nutzt man die "color" Anweisung auf einen vorherdefinierten Bereich der 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 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 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. einen genauen Farbton zur erhalten.
Danach bendet man die Anweisung wieder mit einem Semikolon. Danach bendet man die Anweisung wieder mit einem Semikolon.
</p> </p>
@ -110,9 +110,9 @@
Schrift stylen Schrift stylen
</h3> </h3>
<p> <p>
Zusätzlich kann man mit hilfe der "font-styles" Anweisung das aussehen der Schrift verändern um Zusätzlich kann man mit hilfe der "font-styles" Anweisung das Aussehen der Schrift verändern um
gewisse Anschnitte eines textes hervor zu heben. gewisse Ausschnitte eines Textes hervor zu heben.
Dafür kann man entweder den italic oder den onlique stle verwenden in dem man sie wie die anderern Dafür kann man entweder den italic oder den onlique style verwenden in dem man sie wie die andereren
font Anweisungen anwendet. font Anweisungen anwendet.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -144,8 +144,8 @@
</h3> </h3>
<p> <p>
Mit der Anweisung "font-weight" lässt sich lässt sich die Dicke des Schrift verstellen. Auch hierbei 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. 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. 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 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 während die Standart dicke der Schrift bei 400 liegt. Anzuwenden ist die Anweisung wie die
vorherigen Module. vorherigen Module.
@ -178,9 +178,8 @@
Schrift Variante ändern Schrift Variante ändern
</h3> </h3>
<p> <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. verändern.
Die Anweisung ist wie die anderen Anweisungen.
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
@ -208,9 +207,8 @@
Textausrichtung ändern Textausrichtung ändern
</h3> </h3>
<p> <p>
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Mit der Anweisung text-align lässt sich die Ausrichtung eines Textes zwischen Linksseitig, Mittig,
Rechtsseitig und Blocksats ändern. Rechtsseitig und Blocksatz ändern.
Die Anweisung ist wie die anderen Anzuwenden.
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
@ -244,9 +242,8 @@
Textgestaltung Textgestaltung
</h3> </h3>
<p> <p>
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift Mit hilfe der "text-decoration" Anweisung kann man der Schrift Linien über, unter und durch die Schrift
Hinzufügen. hinzufügen.
Die Anweisung wird ausgeführt wie die Vorherigen.
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
@ -277,10 +274,10 @@
Wort- und Zeichenabstände verändern Wort- und Zeichenabstände verändern
</h3> </h3>
<p> <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 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 erhöht oder veringert man den zwischen den einzelnen Worten. Der Rest ist identisch, außer dass
man den abstand nicht in Prozenten(%) man den Abstand nicht in Prozenten(%)
angeben kann, dafür aber in Milimetern(mm) und Punkten(pt). angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p> </p>
<div class="code-example"> <div class="code-example">
@ -318,7 +315,7 @@
</h3> </h3>
<p> <p>
Über die Anweisung "text-indent" kann der Nutzer Zeilen einrücken. Ü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> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
@ -361,7 +358,7 @@
</ol> </ol>
<p> <p>
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der 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. mit Problemen in der Groß- und Kleinschreibung übergehen, da es so zu einem Stilmittel wird.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -392,7 +389,7 @@
</ol> </ol>
</section> </section>
<p> <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> </p>
</article> </article>
</main> </main>