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

Compare commits

base: adb.study:614733ef64f7449591b312a27e010237a093233f
Branches Tags
adb.study:master
...
compare: adb.study:b77568677752852f5d7c94552dfc9ba3e5ee660f
Branches Tags
adb.study:master

2 Commits
614733ef64 ... b775686777

Author SHA1 Message Date
adb-sh
b775686777 add positions
All checks were successful
continuous-integration/drone/push Build is passing
Details
2023-01-05 02:07:06 +01:00
adb-sh
a0b133679b fix style 2023-01-05 02:06:54 +01:00
18 changed files with 1996 additions and 1715 deletions
Show Stats Expand all files Collapse all files

89
css/animations.css
View File

@ -6,7 +6,7 @@
} }
/* ---------------Beispiel auf der Startseite--------------*/ /* ---------------Beispiel auf der Startseite--------------*/
#beispiel{ #beispiel {
background-color: aqua; background-color: aqua;
color: black; color: black;
border: 3px solid rgb(255, 0, 0); border: 3px solid rgb(255, 0, 0);
@ -26,12 +26,12 @@
@keyframes beispiel { @keyframes beispiel {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
left:var(--width2); left: var(--width2);
} }
25% { 25% {
transform: rotate(90deg); transform: rotate(90deg);
left:var(--width2); left: var(--width2);
background-color: blue; background-color: blue;
border-color: orange; border-color: orange;
@ -42,13 +42,13 @@
background-color: blueviolet; background-color: blueviolet;
border-color: green; border-color: green;
transform: rotate(180deg); transform: rotate(180deg);
left:var(--width1); left: var(--width1);
} }
75% { 75% {
transform: rotate(270deg); transform: rotate(270deg);
left:var(--width1); left: var(--width1);
background-color: red; background-color: red;
border-color: lightblue; border-color: lightblue;
} }
@ -57,13 +57,14 @@
background-color: yellow; background-color: yellow;
border-color: pink; border-color: pink;
transform: rotate(360deg); transform: rotate(360deg);
left:var(--width2); left: var(--width2);
} }
} }
/* -----------------Animationen Beispiele--------------------------- */ /* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/ /* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
#stempel1{ #stempel1 {
color: red; color: red;
border: 2px solid red; border: 2px solid red;
padding: 10px; padding: 10px;
@ -77,16 +78,15 @@
} }
@keyframes stempel1 { @keyframes stempel1 {
0%{ 0% {
transform: scale(1) rotate(10deg) transform: scale(1) rotate(10deg)
} }
50%{ 50% {
transform: scale(1.5) rotate(30deg); transform: scale(1.5) rotate(30deg);
} }
100% 100% {
{
transform: scale(1) rotate(10deg) transform: scale(1) rotate(10deg)
} }
} }
@ -107,20 +107,19 @@
} }
@keyframes beispiel6 { @keyframes beispiel6 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }
@ -140,20 +139,19 @@
} }
@keyframes beispiel7 { @keyframes beispiel7 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }
@ -175,16 +173,15 @@
} }
@keyframes beispiel4 { @keyframes beispiel4 {
0%{ 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{ 50% {
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
@ -206,22 +203,20 @@
} }
@keyframes beispiel5 { @keyframes beispiel5 {
0%{ 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
50%{ 50% {
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/ /*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 { #beispiel1 {
color: red; color: red;
@ -238,20 +233,19 @@
} }
@keyframes beispiel1 { @keyframes beispiel1 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }
@ -271,19 +265,18 @@
} }
@keyframes beispiel2 { @keyframes beispiel2 {
0%{ 0% {
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
50%{ 50% {
transform: scale(1.5); transform: scale(1.5);
left:var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left:var(--width2); left: var(--width2);
} }
} }

16
css/layout.css
View File

@ -1,4 +1,3 @@
/* ---------- Farben ---------- */ /* ---------- Farben ---------- */
:root { :root {
--primary: #1D2026; --primary: #1D2026;
@ -49,7 +48,7 @@ footer {
align-items: center; align-items: center;
} }
.navigationbar a{ .navigationbar a {
color: aliceblue; color: aliceblue;
padding: 10px; padding: 10px;
margin-left: 5px; margin-left: 5px;
@ -59,7 +58,7 @@ footer {
flex-grow: 1; flex-grow: 1;
} }
.navigationbar a:hover{ .navigationbar a:hover {
background: darkgray; background: darkgray;
} }
@ -70,6 +69,12 @@ 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;
@ -78,6 +83,11 @@ footer {
max-width: 550px; max-width: 550px;
} }
.code-example code {
padding: 0;
background-color: rgba(40, 40, 40, 0.8);
}
.visual-example { .visual-example {
background-color: gray; background-color: gray;
border: 2px solid; border: 2px solid;

62
css/position.css Normal file
View File

@ -0,0 +1,62 @@
section.examples .example-box {
background-color: #3268aa;
border: 3px solid #88ff9c;
height: 3rem;
width: 3rem;
border-radius: .3rem;
margin: .5rem;
display: flex;
justify-content: center;
align-items: center;
flex: 0 0 auto;
}
section.examples .example-box.active {
border: 3px solid #d73f3f;
}
.visual-example {
display: flex;
flex-direction: row;
position: relative;
padding: .5rem;
}
#example1 .active {
position: static;
top: 1rem;
left: 1rem;
}
#example2 .active {
position: relative;
top: 1rem;
left: 1rem;
}
#example3 .active {
position: absolute;
top: 1rem;
left: 1rem;
}
#example4 .active {
position: fixed;
top: 1rem;
left: 1rem;
}
#example5 {
overflow: scroll;
}
#example5 .active {
position: sticky;
left: 1rem;
right: 1rem;
}
#example5 .wrapper {
display: flex;
border: 2px solid #d73f3f;
}

90
css/text_styling.css
View File

@ -1,119 +1,143 @@
/*--------------Veränderung der Textgröße--------------*/ /*--------------Veränderung der Textgröße--------------*/
#font-sizePX{ #font-sizePX {
font-size: 20px; font-size: 20px;
} }
#font-sizePR{
#font-sizePR {
font-size: 120%; font-size: 120%;
} }
#font-sizeCM{
#font-sizeCM {
font-size: 1cm; font-size: 1cm;
} }
#font-sizeS{
#font-sizeS {
font-size: smaller; font-size: smaller;
} }
#font-sizeM{
#font-sizeM {
font-size: medium; font-size: medium;
} }
#font-sizeL{
#font-sizeL {
font-size: larger; font-size: larger;
} }
/*--------------Veränderung der Textart--------------*/ /*--------------Veränderung der Textart--------------*/
#font-familyA{ #font-familyA {
font-family: Arial; font-family: Arial;
} }
#font-familyG{
#font-familyG {
font-family: Georgia; font-family: Georgia;
} }
#font-familyLH{
#font-familyLH {
font-family: Lucida Handwriting; font-family: Lucida Handwriting;
} }
/*--------------Schriftfarbe ändern--------------*/ /*--------------Schriftfarbe ändern--------------*/
#colorW{ #colorW {
color: red; color: red;
} }
#colorZ{
#colorZ {
color: rgb(81, 132, 109); color: rgb(81, 132, 109);
} }
/*--------------Schrift stylen--------------*/ /*--------------Schrift stylen--------------*/
#font-styleI{ #font-styleI {
font-style: italic; font-style: italic;
} }
#font-styleO{
#font-styleO {
font-style: oblique; font-style: oblique;
} }
/*--------------Schriftdicke verändern--------------*/ /*--------------Schriftdicke verändern--------------*/
#font-weightB{ #font-weightB {
font-weight: bold; font-weight: bold;
} }
#font-weightZ{
#font-weightZ {
font-weight: 700; font-weight: 700;
} }
/*--------------Schrift Variante ändern--------------*/ /*--------------Schrift Variante ändern--------------*/
#font-variant{ #font-variant {
font-variant: small-caps; font-variant: small-caps;
} }
/*--------------Textausrichtung ändern--------------*/ /*--------------Textausrichtung ändern--------------*/
#text-alignL{ #text-alignL {
text-align: left; text-align: left;
} }
#text-alignR{
#text-alignR {
text-align: right; text-align: right;
} }
#text-alignC{
#text-alignC {
text-align: center; text-align: center;
} }
#text-alignJ{
#text-alignJ {
text-align: justify; text-align: justify;
} }
/*--------------Textgestaltung--------------*/ /*--------------Textgestaltung--------------*/
#text-decorationU{ #text-decorationU {
text-decoration: underline; text-decoration: underline;
} }
#text-decorationO{
#text-decorationO {
text-decoration: overline; text-decoration: overline;
margin: 4px;; margin: 4px;;
} }
#text-decorationLT{
#text-decorationLT {
text-decoration: line-through; text-decoration: line-through;
} }
/*--------------Wort- und Zeichenabstände verändern--------------*/ /*--------------Wort- und Zeichenabstände verändern--------------*/
#word-spacingMM{ #word-spacingMM {
word-spacing: 3mm; word-spacing: 3mm;
} }
#word-spacingPX{
#word-spacingPX {
word-spacing: 10px; word-spacing: 10px;
} }
#word-spacingREM{
#word-spacingREM {
word-spacing: 1rem; word-spacing: 1rem;
} }
/*--------------Texte einrücken--------------*/ /*--------------Texte einrücken--------------*/
#text-indentMM{ #text-indentMM {
text-indent: 10mm text-indent: 10mm
} }
#text-indentPX{
#text-indentPX {
text-indent: 20px; text-indent: 20px;
} }
#text-indentREM{
#text-indentREM {
text-indent: 1rem; text-indent: 1rem;
} }
/*--------------Texte transvormieren--------------*/ /*--------------Texte transvormieren--------------*/
#text-transformC{ #text-transformC {
text-transform: capitalize text-transform: capitalize
} }
#text-transformU{
#text-transformU {
text-transform: uppercase text-transform: uppercase
} }
#text-transformL{
#text-transformL {
text-transform: lowercase text-transform: lowercase
} }
#text-transformN{
#text-transformN {
text-transform: none text-transform: none
} }

22
screens/animation/animations.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Animationen</h1> <h1>Animationen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="animations.html">Animation Einführung</a> <a href="animations.html">Animation Einführung</a>
<a href="keyframes.html">Animations Funktionen</a> <a href="keyframes.html">Animations Funktionen</a>
</nav> </nav>
<main> <main>
<article> <article>
<section> <section>
<h2> <h2>
@ -105,10 +105,10 @@
</div> </div>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Leon Ehricht</p> <p>Erstellt von: Leon Ehricht</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/animation/keyframes.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Animationen</h1> <h1>Animationen</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="animations.html">Animation Einführung</a> <a href="animations.html">Animation Einführung</a>
<a href="keyframes.html">Animations Funktionen</a> <a href="keyframes.html">Animations Funktionen</a>
</nav> </nav>
<main> <main>
<article> <article>
<section> <section>
<h2> <h2>
@ -243,10 +243,10 @@
</div> </div>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p> Erstellt von: Leon Ehricht</p> <p> Erstellt von: Leon Ehricht</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/flexbox/allgemeines.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a> <a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a> <a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor10">Allgemeines</h2> <h2 id="anchor10">Allgemeines</h2>
<p> <p>
@ -75,10 +75,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Niklas Minkowitsch</p> <p>Erstellt von: Niklas Minkowitsch</p>
</footer> </footer>
</body> </body>
</html> </html>

46
screens/flexbox/eigenschaften.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a> <a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a> <a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor20">Eigenschaften</h2> <h2 id="anchor20">Eigenschaften</h2>
<p> <p>
@ -37,7 +37,8 @@
<h3 id="anchor21">flex-wrap</h3> <h3 id="anchor21">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: wrap; <br> }</code> <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
wrap; <br> }</code>
</div> </div>
<div class="visual-example" id="example3"> <div class="visual-example" id="example3">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
</div> </div>
<h4>Mit vertikaler Anordnung</h4> <h4>Mit vertikaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap: wrap; <br> &emsp; max-height: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap:
wrap; <br> &emsp; max-height: 600px; <br> }</code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
<p>p1</p> <p>p1</p>
@ -70,7 +72,8 @@
</p> </p>
<h3 id="anchor22">flex-flow</h3> <h3 id="anchor22">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: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
600px; <br> }</code>
</div> </div>
<p class="explanation"> <p class="explanation">
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und <code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
@ -80,7 +83,8 @@
<section> <section>
<h3 id="anchor23">justify-content</h3> <h3 id="anchor23">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; justify-content: center; <br> }</code> <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: center; <br> }</code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
<p>p1</p> <p>p1</p>
@ -89,7 +93,8 @@
<p>p4</p> <p>p4</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> }</code> <code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> }</code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">
<p>p1</p> <p>p1</p>
@ -114,7 +119,8 @@
<section> <section>
<h3 id="anchor24">align-content</h3> <h3 id="anchor24">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; justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code> <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>
</div> </div>
<div class="visual-example" id="example7"> <div class="visual-example" id="example7">
<p>p1</p> <p>p1</p>
@ -144,7 +150,8 @@
<section> <section>
<h3 id="anchor25">overflow</h3> <h3 id="anchor25">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: scroll; <br> }</code> <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example8"> <div class="visual-example" id="example8">
<p>p1</p> <p>p1</p>
@ -161,7 +168,8 @@
<p>p12</p> <p>p12</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp; max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code> <code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp;
max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example9"> <div class="visual-example" id="example9">
<p>p1</p> <p>p1</p>
@ -186,10 +194,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Niklas Minkowitsch</p> <p>Erstellt von: Niklas Minkowitsch</p>
</footer> </footer>
</body> </body>
</html> </html>

34
screens/flexbox/unterelemente.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Flexbox-Layout</h1> <h1>Flexbox-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="eigenschaften.html">Eigenschaften</a> <a href="eigenschaften.html">Eigenschaften</a>
<a href="unterelemente.html">Eigenschaften der Unterelemente</a> <a href="unterelemente.html">Eigenschaften der Unterelemente</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2 id="anchor30">Eigenschaften der Unterelemente</h2> <h2 id="anchor30">Eigenschaften der Unterelemente</h2>
<p> <p>
@ -36,7 +36,8 @@
<section> <section>
<h3 id="anchor31">flex-grow</h3> <h3 id="anchor31">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> #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code> <code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
</div> </div>
<div class="visual-example" id="example10"> <div class="visual-example" id="example10">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
<section> <section>
<h3 id="anchor32">flex-basis</h3> <h3 id="anchor32">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> #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code> <code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
</div> </div>
<div class="visual-example" id="example11"> <div class="visual-example" id="example11">
<p>p1</p> <p>p1</p>
@ -65,7 +67,8 @@
<section> <section>
<h3 id="anchor33">flex-shrink</h3> <h3 id="anchor33">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> #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code> <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>
</div> </div>
<div class="visual-example" id="example12"> <div class="visual-example" id="example12">
<p>p1</p> <p>p1</p>
@ -76,7 +79,8 @@
<p>p6</p> <p>p6</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code> <code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code>
</div> </div>
<div class="visual-example" id="example13"> <div class="visual-example" id="example13">
<p>p1</p> <p>p1</p>
@ -92,10 +96,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Niklas Minkowitsch</p> <p>Erstellt von: Niklas Minkowitsch</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/grid/allgemeines.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a> <a href="container.html">Container</a>
<a href="items.html">Items</a> <a href="items.html">Items</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Allgemeines</h2> <h2>Allgemeines</h2>
<p> <p>
@ -111,10 +111,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Lukas Pfau</p> <p>Erstellt von: Lukas Pfau</p>
</footer> </footer>
</body> </body>
</html> </html>

31
screens/grid/container.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a> <a href="container.html">Container</a>
<a href="items.html">Items</a> <a href="items.html">Items</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Grid Container</h2> <h2>Grid Container</h2>
<p> <p>
@ -48,7 +48,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; gap: 10px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
@ -70,7 +71,8 @@
<br> <br>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; grid-template-rows: 150px 100px 200px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
@ -99,7 +101,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br>
&emsp; justify-content: space-evenly <br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">
@ -138,10 +141,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Lukas Pfau</p> <p>Erstellt von: Lukas Pfau</p>
</footer> </footer>
</body> </body>
</html> </html>

22
screens/grid/items.html
View File

@ -11,23 +11,23 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Grid-Layout</h1> <h1>Grid-Layout</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="container.html">Container</a> <a href="container.html">Container</a>
<a href="items.html">Items</a> <a href="items.html">Items</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Grid Item</h2> <h2>Grid Item</h2>
<p> <p>
@ -148,10 +148,10 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Lukas Pfau</p> <p>Erstellt von: Lukas Pfau</p>
</footer> </footer>
</body> </body>
</html> </html>

18
screens/home.html
View File

@ -8,18 +8,18 @@
<link rel="stylesheet" href="../css/layout.css"> <link rel="stylesheet" href="../css/layout.css">
</head> </head>
<body> <body>
<header> <header>
<h1>Home</h1> <h1>Home</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="home.html">Home</a> <a href="home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animation/animations.html">Animationen</a> <a href="animation/animations.html">Animationen</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2> <h2>
Prüfungsleistung WebDesigne WiSe 2022/2023 Prüfungsleistung WebDesigne WiSe 2022/2023
@ -93,9 +93,9 @@
</p> </p>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<code>Abgabe zum 05.01.2023</code> <code>Abgabe zum 05.01.2023</code>
</footer> </footer>
</body> </body>
</html> </html>

170
screens/position/allgemeines.html Normal file
View File

@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="en">
<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>Animationen</title>
<link rel="stylesheet" href="../../css/layout.css">
<link rel="stylesheet" href="../../css/position.css">
</head>
<body>
<header>
<h1>Animationen</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="../text_styling/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="./">Positionen</a>
</nav>
<main>
<article>
<section>
<h2>
Positionen mit CSS
</h2>
<p>
Mit den verschiedenen Positions-Eigenschaften wird definiert wie sich die Position
eines Elementes relativ zum Parent-Element verhaelt. Das hat auswirkungen darauf, wie die Eigenschaften
<code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> interpretiert werden.
Das kann zum Beispiel praktisch sein, wenn man auf einer Website einen fixierten Header setzen moechte.
</p>
</section>
<section class="examples">
<h3>Static</h3>
<div class="visual-example" id="example1">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example1 .active {<br>
&emsp;position: static;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Obwohl die Eigenschaften <code>top</code> und <code>left</code> gesetzt sind, haben diese keine
Auswirkung, da die Positions-Eigenschaft auf <code>static</code> gesetzt ist.
</p>
</section>
<section class="examples">
<h3>Relative</h3>
<div class="visual-example" id="example2">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example2 .active {<br>
&emsp;position: relative;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Relativ zum normalen Dokument-flow wird das Element mit den Attributen <code>top</code> und
<code>left</code> verschoben.
</p>
</section>
<section class="examples">
<h3>Absolute</h3>
<div class="visual-example" id="example3">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example3 .active {<br>
&emsp;position: relative;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum naechtsen
Eltern-Elements mit positions-Attribut <code>relative</code>, <code>absolute</code>, <code>fixed</code>
oder <code>static</code> platziert.
</p>
</section>
<section class="examples">
<h3>Fixed</h3>
<div class="visual-example" id="example4">
<div class="example-box">1</div>
<div class="example-box active">2</div>
<div class="example-box">3</div>
<div class="example-box">4</div>
</div>
<div class="code-example">
<code>
#example4 .active {<br>
&emsp;position: relative;<br>
&emsp;top: 1rem;<br>
&emsp;left: 1rem;<br>
}
</code>
</div>
<p>
Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum viewport positioniert.
Das Element ist nun oben links auf der Webseite zu finden.
</p>
</section>
<section class="examples">
<h3>Sticky</h3>
<div class="visual-example" id="example5">
<div class="example-box">1</div>
<div class="wrapper">
<div class="example-box active">2</div>
<div class="example-box">3</div>
</div>
<div class="example-box">4</div>
<div class="example-box">5</div>
<div class="example-box active">6</div>
<div class="example-box">7</div>
<div class="example-box">8</div>
<div class="example-box">9</div>
<div class="example-box">10</div>
</div>
<div class="code-example">
<code>
#example5 .active {<br>
&emsp;position: sticky;<br>
&emsp;left: 1rem;<br>
&emsp;right: 1rem;<br>
}
</code>
</div>
<p>
Das Element is im normalen Dokument flow-platziert. Sobald das Element allerdings von einem
uebergeordneten Element mit overflow-Eigenschaft die Kante erreicht, greift die entsprechende
Eigenschaft <code>top</code>, <code>bottom</code>, <code>left</code> oder <code>right</code>.
Das Element kann sich dabei nur im direkten Eltern-Element bewegen; Box 2 und Box 3 sind zur
Veranschaulichung in einem extra div-Element.
</p>
</section>
</article>
</main>
<footer>
<p>Erstellt von: Alban Becker</p>
</footer>
</body>
</html>

26
screens/text_styling/allgemeines.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Text-Styling</h1> <h1>Text-Styling</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a> <a href="beispiele.html">Weitere Beispiele</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Allgemeines</h2> <h2>Allgemeines</h2>
<p> <p>
@ -81,7 +81,7 @@
</div> </div>
<br> <br>
<ol class="visual-example"> <ol class="visual-example">
<li id="font-sizePX">Pixel </li> <li id="font-sizePX">Pixel</li>
<li id="font-sizePR">Vorgegebene Größen</li> <li id="font-sizePR">Vorgegebene Größen</li>
<li id="font-sizeCM">Prozent</li> <li id="font-sizeCM">Prozent</li>
</ol> </ol>
@ -111,7 +111,7 @@
</div> </div>
<br> <br>
<ol class="visual-example"> <ol class="visual-example">
<li id="font-sizeS">Pixel </li> <li id="font-sizeS">Pixel</li>
<li id="font-sizeM">Vorgegebene Größen</li> <li id="font-sizeM">Vorgegebene Größen</li>
<li id="font-sizeL">Prozent</li> <li id="font-sizeL">Prozent</li>
</ol> </ol>
@ -122,8 +122,8 @@
<br> <br>
</section> </section>
</article> </article>
</main> </main>
<footer> <footer>
<p>Erstellt von: Luca Nicolas Fleck</p> <p>Erstellt von: Luca Nicolas Fleck</p>
</footer> </footer>
</body> </body>

43
screens/text_styling/beispiele.html
View File

@ -11,22 +11,22 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Text-Styling</h1> <h1>Text-Styling</h1>
</header> </header>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="../home.html">Home</a> <a href="../home.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>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
<a href="allgemeines.html">Allgemeines</a> <a href="allgemeines.html">Allgemeines</a>
<a href="beispiele.html">Weitere Beispiele</a> <a href="beispiele.html">Weitere Beispiele</a>
</nav> </nav>
<main> <main>
<article> <article>
<h2>Weitere Beispiele</h2> <h2>Weitere Beispiele</h2>
<section> <section>
@ -208,7 +208,8 @@
Textausrichtung ändern Textausrichtung ändern
</h3> </h3>
<p> <p>
Mit der Anweisung text-align kannst du die Ausrichtung eines textes zwischen Linksseitig, Mittig, Rechtsseitig und Blocksats ändern. 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. Die Anweisung ist wie die anderen Anzuwenden.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -243,7 +244,8 @@
Textgestaltung Textgestaltung
</h3> </h3>
<p> <p>
Mit hilfe der "text-decoration" Anweisung kann man der Schrift linien über, unter und durch die schrift Hinzufügen. 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. Die Anweisung wird ausgeführt wie die Vorherigen.
</p> </p>
<div class="code-example"> <div class="code-example">
@ -275,8 +277,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 Größe der Wörter verändert Die "word-spacing" Anweisung funktioniert im Grund wie die "font-size" Anweisung nur anstatt das man die
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das man den abstand nicht in Prozenten(%) 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). angeben kann, dafür aber in Milimetern(mm) und Punkten(pt).
</p> </p>
<div class="code-example"> <div class="code-example">
@ -303,7 +307,8 @@
<li id="word-spacingREM">1 root-Element</li> <li id="word-spacingREM">1 root-Element</li>
</ol> </ol>
<p class="explanation"> <p class="explanation">
Die Anweisung "letter-spacing" funktioniert genauso, nur dass sie den Abstand zwischen einzelnen Zeichen, 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. also jedem einzelnen Buchstaben, verändert anstatt zwischen den ganzen Wörtern.
</p> </p>
</section> </section>
@ -344,7 +349,8 @@
Texte transvormieren Texte transvormieren
</h3> </h3>
<p> <p>
Nun zur letzten Anweisung zum Stylen von Texten in CSS. Mit "text-transform" kann der Nutzer Regeln für den Text festlegen, 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: die dann für alle Wörter gelten. Die Regeln die angewendet werden können sind:
</p> </p>
<ol> <ol>
@ -354,7 +360,8 @@
<li>None: Regeln werden aufgehoben.</li> <li>None: Regeln werden aufgehoben.</li>
</ol> </ol>
<p> <p>
Damit lassen sich Text auf gewisse Situationen anpassen und vielleicht auch Probleme in der rechtschreibung für Leute, 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. 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">
@ -388,8 +395,8 @@
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>
<footer> <footer>
<p>Erstellt von: Luca Nicolas Fleck</p> <p>Erstellt von: Luca Nicolas Fleck</p>
</footer> </footer>
</body> </body>