commit 9d2bb4b8602f6a505dadcf0404e56490a3b7dde2 Author: adb-sh Date: Wed Jan 4 22:21:15 2023 +0100 init diff --git a/Gruppenmitglieder.txt b/Gruppenmitglieder.txt new file mode 100644 index 0000000..9b5c3c9 --- /dev/null +++ b/Gruppenmitglieder.txt @@ -0,0 +1,5 @@ +Alban Becker +Leon Ehricht +Luca Nicolas Fleck +Niklas Minkowitsch +Lukas Pfau (730134) diff --git a/css/animations.css b/css/animations.css new file mode 100644 index 0000000..10eadfa --- /dev/null +++ b/css/animations.css @@ -0,0 +1,289 @@ +/* ---------------Animationen Startseite----------------- */ +:root { + --width1: calc(100% - 100px); + --width2: 0px; + --width3: calc(100% - 200px); +} + +/* ---------------Beispiel auf der Startseite--------------*/ +#beispiel{ + background-color: aqua; + color: black; + border: 3px solid rgb(255, 0, 0); + border-radius: 0.4em; + animation-timing-function: ease; + width: 100px; + height: 100px; + animation-name: beispiel; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: alternate; + text-align: center; + align-self: end; + position: relative; +} + +@keyframes beispiel { + 0% { + transform: rotate(0deg); + left:var(--width2); + } + + 25% { + transform: rotate(90deg); + left:var(--width2); + background-color: blue; + border-color: orange; + + } + + 50% { + transform: scale(1.5); + background-color: blueviolet; + border-color: green; + transform: rotate(180deg); + left:var(--width1); + + } + + 75% { + transform: rotate(270deg); + left:var(--width1); + background-color: red; + border-color: lightblue; + } + + 100% { + background-color: yellow; + border-color: pink; + transform: rotate(360deg); + left:var(--width2); + } + +} +/* -----------------Animationen Beispiele--------------------------- */ +/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/ +#stempel1{ + color: red; + border: 2px solid red; + padding: 10px; + width: 120px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: stempel1; + animation-duration: 5s; + animation-fill-mode: forwards; +} + +@keyframes stempel1 { + 0%{ + transform: scale(1) rotate(10deg) + } + + 50%{ + transform: scale(1.5) rotate(30deg); + } + + 100% + { + transform: scale(1) rotate(10deg) + } +} + +/* ---------------Beispiel 1 für die animation duration--------------- */ +#beispiel6 { + color: red; + border: 2px solid yellow; + padding: 10px; + width: 100px; + height: px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: beispiel6; + animation-duration: 5s; + animation-iteration-count: infinite; +} + +@keyframes beispiel6 { + 0%{ + transform: scale(1); + left:var(--width2); + } + + 50%{ + transform: scale(1.5); + left:var(--width3); + } + + 100% + { + transform: scale(1); + left:var(--width2); + } +} + +/* ---------------Beispiel 1 für die animation duration ---------------*/ +#beispiel7 { + color: red; + border: 2px solid yellow; + padding: 10px; + width: 100px; + height: px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: beispiel7; + animation-duration: 10s; + animation-iteration-count: infinite; +} + +@keyframes beispiel7 { + 0%{ + transform: scale(1); + left:var(--width2); + } + + 50%{ + transform: scale(1.5); + left:var(--width3); + } + + 100% + { + transform: scale(1); + left:var(--width2); + } +} + +/*--------------- Beispiel 1 für die animation direction ---------------*/ +#beispiel4 { + color: red; + border: 2px solid yellow; + border-radius: 0.4em; + padding: 10px; + width: 100px; + height: px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: beispiel4; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: normal; +} + +@keyframes beispiel4 { + 0%{ + transform: rotate(0deg); + } + + 50%{ + transform: rotate(180deg); + } + + 100% + { + transform: rotate(360deg) + } +} + +/*--------------- Beispiel 2 für die animation direction ---------------*/ +#beispiel5 { + color: red; + border: 2px solid yellow; + border-radius: 0.4em; + padding: 10px; + width: 100px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: beispiel5; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-direction: reverse; +} + +@keyframes beispiel5 { + 0%{ + transform: rotate(0deg); + } + + 50%{ + transform: rotate(180deg); + } + + 100% + { + transform: rotate(360deg) + } +} + + + +/*--------------- Beispiel 1 für die animation timing funktion ---------------*/ +#beispiel1 { + color: red; + border: 2px solid yellow; + padding: 10px; + width: 100px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: beispiel1; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes beispiel1 { + 0%{ + transform: scale(1); + left:var(--width2); + } + + 50%{ + transform: scale(1.5); + left:var(--width3); + } + + 100% + { + transform: scale(1); + left:var(--width2); + } +} + +/*--------------- Beispiel 2 für die animation timing funktion ---------------*/ +#beispiel2 { + color: red; + border: 2px solid yellow; + padding: 10px; + width: 100px; + text-align: center; + font-size: 25px; + position: relative; + animation-name: beispiel2; + animation-duration: 5s; + animation-iteration-count: infinite; + animation-timing-function: ease; +} + +@keyframes beispiel2 { + 0%{ + transform: scale(1); + left:var(--width2); + } + + 50%{ + transform: scale(1.5); + left:var(--width3); + } + + 100% + { + transform: scale(1); + left:var(--width2); + } +} \ No newline at end of file diff --git a/css/flexbox.css b/css/flexbox.css new file mode 100644 index 0000000..ca4df57 --- /dev/null +++ b/css/flexbox.css @@ -0,0 +1,95 @@ +/*--------------allgemeines-Screen-------------------*/ +#example1 { + display: flex; +} + +#example2 { + display: flex; + flex-direction: column; +} + +/*--------------eigenschaften-Screen-------------------*/ +#example3 { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#example4 { + display: flex; + flex-direction: column; + flex-wrap: wrap; + max-height: 600px; +} + +#example5 { + display: flex; + flex-flow: row wrap; + justify-content: center; +} + +#example6 { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; +} + +#example7 { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + align-content: space-between; + min-height: 300px; +} + +#example8 { + display: flex; + flex-flow: row nowrap; + overflow-x: scroll; +} + +#example9 { + display: flex; + flex-flow: column nowrap; + max-height: 600px; + overflow-y: scroll; +} + +/*--------------unterelemente-Screen-------------------*/ +#example10 { + display: flex; + flex-flow: row nowrap; +} + +#example10 > p { + flex-grow: 1; +} + +#example11 { + display: flex; + flex-flow: row nowrap; +} + +#example11 > p { + flex-basis: 100px; +} + +#example12 { + display: flex; + flex-flow: row nowrap; +} + +#example12 > p { + flex-basis: 40px; + flex-shrink: 0; +} + +#example13 { + display: flex; + flex-flow: row nowrap; +} + +#example13 > p { + flex-basis: 40px; + flex-shrink: 1; +} \ No newline at end of file diff --git a/css/grid.css b/css/grid.css new file mode 100644 index 0000000..e57bcbd --- /dev/null +++ b/css/grid.css @@ -0,0 +1,102 @@ +/*--------------allgemeines-Screen-------------------*/ +#example1 { + display: grid; + grid-template-columns: repeat(5, 1fr); +} + +#example2 { + display: grid; + grid-template-columns: auto; +} + +#example3 { + display: grid; + grid-template-columns: auto auto auto; + gap: 10px; +} + +#item1 { + grid-column-start: 1; + grid-column-end: 3; +} + +/*--------------container-Screen-------------------*/ + +#example4 { + display: grid; + grid-template-columns: auto auto auto; + gap: 10px; +} + +#example5 { + display: grid; + grid-template-columns: auto auto auto; + grid-template-rows: 150px 100px 200px; +} + +#example6 { + display: grid; + grid-template-columns: 50px 50px 50px; + justify-content: space-evenly; +} + +#example7 { + display: grid; + grid-template-columns: 50px 50px 50px; + justify-content: center; +} + +#example8 { + display: grid; + grid-template-columns: auto auto auto; +} + +#item2 { + grid-column-start: 1; + grid-column-end: 3; + grid-row-start: 1; + grid-row-end: 3; +} + +#item3 { + grid-column: 1 / span 3; +} + +/*--------------items-Screen-------------------*/ +#example9 { + display: grid; + grid-template-columns: auto auto auto auto; +} + +#item4 { + grid-area: 1 / 2 / 4 / 4; +} + +#example10 { + display: grid; + grid-template-areas: + 'header header header header header header' + 'nav main main main aside aside' + 'nav footer footer footer footer footer'; + gap: 10px; +} + +#item5 { + grid-area: header; +} + +#item6 { + grid-area: nav; +} + +#item7 { + grid-area: main; +} + +#item8 { + grid-area: aside; +} + +#item9 { + grid-area: footer; +} \ No newline at end of file diff --git a/css/layout.css b/css/layout.css new file mode 100644 index 0000000..1e30bdf --- /dev/null +++ b/css/layout.css @@ -0,0 +1,117 @@ + +/* ---------- Farben ---------- */ +:root { + --primary: #1D2026; + --secondary: #2e3137; + --accent: darkslategrey; +} + +/* ---------- Basic Layout ---------- */ +body { + background-color: var(--primary); + color: aliceblue; + font-family: Montserrat, sans-serif; + margin: 0; + font-size: 18px; + display: grid; + gap: 0em; + grid-template-columns: 10% 1fr 10%; + grid-template-rows: 1fr 1fr 1fr 1fr 80px; + height: 100vh; +} + +header { + grid-row: 1; + grid-column: 2/3; +} + +main { + grid-row: 4; + grid-column: 2/3; + padding: 8px 100px 8px 100px; + background-color: var(--secondary); +} + +footer { + padding: 15px; + background-color: var(--accent); + grid-row: 5/6; + grid-column: 1/4; +} + +/* ----- Classes ----- */ +.navigationbar { + grid-row: 2; + grid-column: 1/4; + background-color: var(--accent); + padding: 5px; + display: flex; + align-items: center; +} + +.navigationbar a{ + color: aliceblue; + padding: 10px; + margin-left: 5px; + text-decoration: none; + transition: 400ms; + text-align: center; + flex-grow: 1; +} + +.navigationbar a:hover{ + background: darkgray; +} + +.navigationbar:nth-of-type(2) { + grid-row: 3; + grid-column: 2/3; + background-color: var(--secondary); + border-bottom: 4px solid var(--primary); +} + +.code-example { + margin: 4px; + padding: 8px; + border-radius: 0.4em; + background-color: rgba(40, 40, 40, 0.8); + max-width: 550px; +} + +.visual-example { + background-color: gray; + border: 2px solid; + margin: 4px; + max-width: 400px; +} + +.visual-example > p { + background-color: darkolivegreen; + padding: 20px; + border: 2px solid aliceblue; + text-align: center; +} + +.explanation { + background-color: rgba(28, 33, 38, 0.8); + padding: 8px; + margin: 4px; + border-left: 6px solid aliceblue; + border-radius: 0.4em; +} + +/* ----- Responsivnes der Seite ----- */ +@media (max-width: 600px) { + main { + grid-column: 1/5; + padding: 8px; + } + + .navigationbar { + flex-direction: column; + } + + .navigationbar:nth-of-type(2) { + grid-column: 1/5; + } +} \ No newline at end of file diff --git a/css/text_styling.css b/css/text_styling.css new file mode 100644 index 0000000..3f294c8 --- /dev/null +++ b/css/text_styling.css @@ -0,0 +1,119 @@ +/*--------------Veränderung der Textgröße--------------*/ +#font-sizePX{ + font-size: 20px; +} +#font-sizePR{ + font-size: 120%; +} +#font-sizeCM{ + font-size: 1cm; +} +#font-sizeS{ + font-size: smaller; +} +#font-sizeM{ + font-size: medium; +} +#font-sizeL{ + font-size: larger; +} +/*--------------Veränderung der Textart--------------*/ +#font-familyA{ + font-family: Arial; +} +#font-familyG{ + font-family: Georgia; +} +#font-familyLH{ + font-family: Lucida Handwriting; +} +/*--------------Schriftfarbe ändern--------------*/ +#colorW{ + color: red; +} +#colorZ{ + color: rgb(81, 132, 109); +} + +/*--------------Schrift stylen--------------*/ +#font-styleI{ + font-style: italic; +} +#font-styleO{ + font-style: oblique; +} + +/*--------------Schriftdicke verändern--------------*/ +#font-weightB{ + font-weight: bold; +} +#font-weightZ{ + font-weight: 700; +} + +/*--------------Schrift Variante ändern--------------*/ +#font-variant{ + font-variant: small-caps; +} + +/*--------------Textausrichtung ändern--------------*/ +#text-alignL{ + text-align: left; +} +#text-alignR{ + text-align: right; +} +#text-alignC{ + text-align: center; +} +#text-alignJ{ + text-align: justify; +} + +/*--------------Textgestaltung--------------*/ +#text-decorationU{ + text-decoration: underline; +} +#text-decorationO{ + text-decoration: overline; + margin: 4px;; +} +#text-decorationLT{ + text-decoration: line-through; +} + +/*--------------Wort- und Zeichenabstände verändern--------------*/ +#word-spacingMM{ + word-spacing: 3mm; +} +#word-spacingPX{ + word-spacing: 10px; +} +#word-spacingREM{ + word-spacing: 1rem; +} + +/*--------------Texte einrücken--------------*/ +#text-indentMM{ + text-indent: 10mm +} +#text-indentPX{ + text-indent: 20px; +} +#text-indentREM{ + text-indent: 1rem; +} + +/*--------------Texte transvormieren--------------*/ +#text-transformC{ + text-transform: capitalize +} +#text-transformU{ + text-transform: uppercase +} +#text-transformL{ + text-transform: lowercase +} +#text-transformN{ + text-transform: none +} \ No newline at end of file diff --git a/screens/animation/animations.html b/screens/animation/animations.html new file mode 100644 index 0000000..f686fef --- /dev/null +++ b/screens/animation/animations.html @@ -0,0 +1,114 @@ + + + + + + + + Animationen + + + + + +
+

Animationen

+
+ + +
+
+
+

+ Animationen mit CSS +

+

+ Mit Animationen und den dazugehörenden Funktionen wie zum Beispiel @keyframes + lassen sich relativ einfach Objekte erstellen, + die sich über die Webseite bewegen. +

+

+ Schrift kann außerdem gedreht und verschoben werden.
+ Dadurch erscheint eine Webseite viel dynamischer und visuel ansprechender. +

+
+
+
+
+
+ + #example2 {
+  #beispiel{
+   background-color: aqua;
+   color: black;
+   border: 3px solid rgb(255, 0, 0);
+   border-radius: 0.4em;
+   animation-timing-function: ease;
+   width: 100px;
+   height: 100px;
+   animation-name: beispiel;
+   animation-duration: 5s;
+   animation-iteration-count: infinite;
+   animation-direction: alternate;
+   text-align: center;
+   align-self: end;
+   &position: relative;
+  }
+
+  @keyframes beispiel {
+   0% {
+    transform: rotate(0deg);
+    left:var(--width2);
+   }
+
+   25% {
+    transform: rotate(90deg);
+    left:var(--width2);
+    background-color: blue;
+    border-color: orange;
+   }
+
+   50% {
+    transform: scale(1.5);
+    background-color: blueviolet;
+    border-color: green;
+    transform: rotate(180deg);
+    left:var(--width1);
+   }
+
+   75% {
+    transform: rotate(270deg);
+    left:var(--width1);
+    background-color: red;
+    border-color: lightblue;
+   }
+
+   100% {
+    background-color: yellow;
+    border-color: pink;
+    transform: rotate(360deg);
+    left:var(--width2);
+   }
+  }
+ } + +
+
+
+
+ + + + \ No newline at end of file diff --git a/screens/animation/keyframes.html b/screens/animation/keyframes.html new file mode 100644 index 0000000..41a8b20 --- /dev/null +++ b/screens/animation/keyframes.html @@ -0,0 +1,252 @@ + + + + + + + + Keyframes + + + + + +
+

Animationen

+
+ + +
+
+
+

+ CSS @Keyframes +

+

+ Mit der Funktion @Keyframes lassen sich Objekte + auf einer Webseite Animieren. Diese Objekte können sich dann wie gewünscht + auf der Seite bewegen, drehen und blinken. +

+
+
+
+ + #example1 {
 @keyframes stempel1 {
+   0%{
+    transform: scale(1) rotate(10deg)
+   }
+ +   50%{
+    transform: scale(1.5) rotate(30deg);
+   }
+ +   100%{
+    transform: scale(1) rotate(10deg)
+   }
+  }
+ } + +
+

Genehmigt

+
+
+
+
+

+ Animation Delay +

+

+ Mit der Funktion "animation-delay" wird die Verzögerung angegeben, nach der die Animation beginnen + soll, + nachdem zum Beispiel die Webseite geladen wurde.
+ Die Zeit wird hierbei in Sekunden angegeben. +

+
+
+
+ + #example2 {
+  #beispiel {
+   position: relative;
+   animation-name: stempel1;
+   animation-delay: 5s;
+  }
+ } + +
+
+
+
+
+

+ Animation Duration +

+

+ Mit der Funktion "animation-duration" kann die Zeitspanne angegeben werden, + die die Animation laufen soll.
+ Auch hier wird die Zeit in Sekunden angegeben. +

+
+
+
+ + #example3 {
+  #beispiel {
+   position: relative;
+   animation-name: stempel1;
+   animation-druration: 5s;
+  }
+ } + +
+

+ Example +

+

+ Example +

+

+ Bei diesem Beispiel dauert die erste Animation 5 Sekunden und die zweite 10 Sekunden. +

+
+
+
+
+

+ Animation Iteration Count +

+

+ Durch die Funktion "animation-iteration-count" lässt sich die Anzahl an Durchläufen angeben. + Dadurch läuft die Animation eine bestimmte Anzahl Malen. +

+
+
+
+ + #example4 {
+  #beispiel {
+   position: relative;
+   animation-name: stempel1;
+   animation-iteration-count: infinit;
+  }
+ } + +
+
+
+
+
+

+ Animation Direction +

+

+ Die "animation-direction" Funktion bringt die Möglichkeit mit sich, + die Animation vorwärts oder Rückwärts abzuspielen. + Es ist auch Möglich die Animation erst Vorwärts + und dann Rückwärts oder andres herum abzuspielen. +

+
+
+
+ + #example5 {
+  #beispiel {
+   position: relative;
+   animation-name: stempel1;
+   animation-direction: normal;
+  }
+ } + +
+

+ Example +

+

+ Example +

+

+ Hier dreht sich die erste Animation nach rechts + (normal) und die zweite nach links (reverse). +

+
+
+
+
+

+ Animation Timing-Function +

+

+ Mit "animation-timing-function" lässt sich bestimmen, + ob sich die Animation am Anfang, am Ende oder in der Mitte schneller + oder langsamer bewegt. + Außerdem kann die Animation auch immer gleichschnell durchlaufen. +

+
+
+
+ + #example6 {
+  #beispiel {
+   position: relative;
+   animation-name: stempel1;
+   animation-timing-function: linear;
+  }
+ } + +
+

+ Example +

+

+ Example +

+

+ Die erste Animation bewegt sich immer gleich schnell (linear) + und die zweite am Anfang und am Ende schneller als in der Mitte (ease). +

+
+
+
+
+

+ Animation Fill-Mode +

+

+ Durch die "animation-fill-mode" Funktion kann + die Animation einen Style bekommen + ohne das die Animation abgespielt wird. Es ist möglich zum Beispiel + das erste oder letzte Bild als dauerhaften Style + für die stillstehende Animation zu nehmen. +

+
+
+
+ + #example7 {
+  #beispiel {
+   position: relative;
+   animation-name: stempel1;
+   animation-fill-mode: forwards;
+  }
+ } + +
+
+
+
+ + + + \ No newline at end of file diff --git a/screens/flexbox/allgemeines.html b/screens/flexbox/allgemeines.html new file mode 100644 index 0000000..db01c49 --- /dev/null +++ b/screens/flexbox/allgemeines.html @@ -0,0 +1,84 @@ + + + + + + + + Flexbox-Allgemein + + + + + +
+

Flexbox-Layout

+
+ + +
+
+

Allgemeines

+

+ 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. +

+
+

Eine Flexbox erzeugen

+
+ + #example1 {
  display: flex;
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+
+

+ Dieser Code erstellt eine Flexbox für das Div-Element mit der ID example1. Die p-Elemente innerhalb + des Divs werden in einer Reihe angezeigt. +

+
+
+

flex-direction

+
+ + #example2 {
  display: flex;
  flex-direction: column;
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+
+

+ Die flex-direction gibt an, in welche Richtung die Elemente in der Flexbox angeordnet werden. + column ordnet Elemente untereinander an, row nebeneinander. + column-reverse und row-reverse + bewirken das gleiche mit umgekehrter reihenfolge der Elemente. +

+
+
+
+ + + + \ No newline at end of file diff --git a/screens/flexbox/eigenschaften.html b/screens/flexbox/eigenschaften.html new file mode 100644 index 0000000..13ed8fe --- /dev/null +++ b/screens/flexbox/eigenschaften.html @@ -0,0 +1,195 @@ + + + + + + + + Flexbox-Eigenschaften + + + + + +
+

Flexbox-Layout

+
+ + +
+
+

Eigenschaften

+

+ Es gibt verschiedene Eigenschaften, mit denen Flexboxen angepasst werden können. +

+
+

flex-wrap

+

Mit horizontaler Anordnung

+
+ #example3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+
+

Mit vertikaler Anordnung

+
+ #example4 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 600px;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+
+

+ Die Eigenschaft flex-wrap bestimmt, ob Elemente die über den Platz in der Hauptrichtung + hinaus gehen in einer neuen Zeile / Spalte platziert werden sollen. + Der Standard-Wert ist nowrap, wrap aktiviert das Wrapping. +

+

flex-flow

+
+ #example4 {
  display: flex;
  flex-flow: column wrap;
  max-height: 600px;
} +
+

+ flex-flow ist ein Shortcut, welcher die Eigenschaften flex-direction und + flex-wrap in einer Zeile zusammenfasst. +

+
+
+

justify-content

+
+ #example5 {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
} +
+
+

p1

+

p2

+

p3

+

p4

+
+
+ #example6 {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
} +
+
+

p1

+

p2

+

p3

+

p4

+
+

+ Über justify-content lässt sich die Ausrichtung der Elemente entlang der Hauptachse der + Flexbox einstellen.

+ Diese Werte können gesetzt werden:
+ +   - flex-start
+   - flex-end
+   - center
+   - space-around
+   - space-between
+   - space-evenly
+ +

+
+
+

align-content

+
+ #example7 {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-content: space-between;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+
+

+ align-content funktioniert wie justify-content, bestimmt allerdings die + nicht-Hauptachse (z.B. wenn Wrapping stattfindet).

+ Diese Werte können gesetzt werden:
+ +   - stretch
+   - center
+   - flex-start
+   - flex-end
+   - space-around
+   - space-between
+   - space-evenly
+ +

+
+
+

overflow

+
+ #example8 {
  display: flex;
  flex-flow: row nowrap;
  overflow-x: scroll;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+

p9

+

p10

+

p11

+

p12

+
+
+ #example9 {
  display: flex;
  flex-flow: column nowrap;
  max-height: 600px;
  overflow-y: scroll;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+

p9

+

p10

+

p11

+

p12

+
+

+ Die overflow-Eigenschaft beschreibt, was passiert wenn Elemente den Rahmen der Flexbox + überschreiten. visible ist die Standard-option, scroll + erzeugt eine Scroll-leiste und hidden versteckt Elemente die nicht mehr in die Box + passen. + +

+
+
+
+ + + + \ No newline at end of file diff --git a/screens/flexbox/unterelemente.html b/screens/flexbox/unterelemente.html new file mode 100644 index 0000000..4853317 --- /dev/null +++ b/screens/flexbox/unterelemente.html @@ -0,0 +1,101 @@ + + + + + + + + Flexbox-Unterelemente + + + + + +
+

Flexbox-Layout

+
+ + +
+
+

Eigenschaften der Unterelemente

+

+ Diese Eigenschaften werden auf die Elemente innerhalb der Flexbox angewendet. +

+
+

flex-grow

+
+ #example10 {
  display: flex;
  flex-flow: row nowrap;
}

#example10 > p {
  flex-grow: 1;
} +
+
+

p1

+

p2

+

p3

+
+

+ Mit flex-grow wird bestimmt, ob die Elemente in der Box auf den zur verfügung stehenden + Platz anwachsen sollen. 1 = ja, 0 = nein. +

+
+
+

flex-basis

+
+ #example11 {
  display: flex;
  flex-flow: row nowrap;
}

#example11 > p {
  flex-basis: 100px;
} +
+
+

p1

+

p2

+
+

+ Diese Eigenschaft stellt die feste Größe der Elemente ein, sollten flex-grow und + flex-shrink nicht gesetzt sein. +

+
+
+

flex-shrink

+
+ #example12 {
  display: flex;
  flex-flow: row nowrap;
}

#example12 > p {
  flex-basis: 40px;
  flex-shrink: 0;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+
+
+ #example13 {
  display: flex;
  flex-flow: row nowrap;
}

#example13 > p {
  flex-basis: 40px;
  flex-shrink: 1;
} +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+
+

+ flex-shrink stellt ein, ob die Elemente nach möglichkeit schrumpfen sollen, um den + Rahmen der Flexbox nicht zu überschreiten. 1 = ja, 0 = nein. +

+
+
+
+ + + + \ No newline at end of file diff --git a/screens/grid/allgemeines.html b/screens/grid/allgemeines.html new file mode 100644 index 0000000..ee0a96f --- /dev/null +++ b/screens/grid/allgemeines.html @@ -0,0 +1,120 @@ + + + + + + + + Grid-Allgemein + + + + + +
+

Grid-Layout

+
+ + +
+
+

Allgemeines

+

+ Das Grid-Layout ermöglicht es Websiten einfacher zu gestalten, indem Reihen und Spalten genutzt und + ineinander verschachtelt werden können, + um die Objeket der Seite so anzuordnen, wie es gewünscht wird. +

+
+

Display Eigenschaft

+

+ Ein HTML element wird zu einem Grid-Container, wenn die "display"-Eigenschaft auf "grid" oder + "inline-grid" gesetzt ist. + Alle untergeordneten Elemente des Containers, werden automatisch "grid items". +

+
+ + .grid-container {
  display: grid;
} + +
+
+
+ + .grid-container {
  display: inline-grid;
} + +
+
+
+

Grid Reihen und Spalten

+

+ Die Vertikalen Linien eines grid items nennt man Spalten und die horizontalen Linien nennt man + Reihen. +

+
+

p1

+

p2

+

p3

+

p4

+

p5

+
+

+ Eine optisch angeordnete Reihe von P-Elementen. +

+
+
+

p1

+

p2

+

p3

+

p4

+

p5

+
+

+ Eine optisch angeordnete Spalte von P-Elementen. +

+
+
+

Grid Linien

+

+ Die sogenannten "grid lines" sind die Linien zwischen den grid items im grid container. + Die Linien zwischen Reihen nennt man "row lines" und die Linien zwischen Spalten nennt man "column + lines". + Man kann die Linien ansprechen um items im Grid-Container gezielt zu platzieren. +

+
+ + .p1 {
  grid-column-start: 1;
  grid-column-end: 3;
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+
+

+ Der p1 Container fängt hier bei der "column line" 1 ganz links an und hört bei der "column line" 3 + auf. +

+
+
+
+ + + + \ No newline at end of file diff --git a/screens/grid/container.html b/screens/grid/container.html new file mode 100644 index 0000000..3e592b7 --- /dev/null +++ b/screens/grid/container.html @@ -0,0 +1,147 @@ + + + + + + + + Grid-Container + + + + + +
+

Grid-Layout

+
+ + +
+
+

Grid Container

+

+ Grid Container sind der fundamentale Bestandteil des Grid-Layouts. Sie sind das übergeordnete Element + über den Grid items. + Der Contaienr gibt an, wie die Items angeordnet werden sollen. +

+
+

Grid-Templates

+

+ Die grid-template eigenschaften können als "grid-template-columns" und als "grid-template-rows" + verwendet werden. + Die Anzahl der zur Eigenschaft hinzugefügten werten zeigt an, wie viele Reihen/Spalten gewünscht + sind. Man kann diese auch spezifiezieren + um so die Breite/Höhe zu bestimmen. Bei Dem Wert "auto" wird der Wert automatisch angepasst. Wenn + alle den Wert "auto" besitzen + teilen sich alle Spalten/Reihen gleichmäßig auf. +

+
+ + .grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+

p9

+
+

+ Dieses Beispiel erstellt ein grid mit 3 Spalten. Wenn zu der "grid-template-columns" Eigenschaft + noch weitere Werte hinzugefügt werden würden, + könnte man weitere Spalten erstellen. +

+
+
+ + .grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 150px 100px 200px;
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+

p9

+
+

+ Hier wird die "grid-template-rows" Eigenschaft verwendet um die Höhe der jeweiligen Reihen + anzupassen. +

+
+
+

Align/Justify Content

+

+ Die justify-content und align-content Eigenschafften sind dazu da, die grid items im grid container + anzuordnen. + Dabei ist justify-content dazu da, das gesammte grid auszurichten. Während align-content nur + vertikal das grid anordnet +

+
+ + .grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px;
  justify-content: space-evenly
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+
+

+ Hier wird die "justify-content" Eigenschaft verwendet um die grid items gleichmäßig zu verteilen. +

+
+
+ + .grid-container {
+   display: grid;
+   grid-template-columns: 50px 50px 50px;
+   justify-content: center
} + +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+

p9

+
+

+ Hier wird die "justify-content" Eigenschaft verwendet um die grid items zu zentrieren. +

+
+
+
+ + + + \ No newline at end of file diff --git a/screens/grid/items.html b/screens/grid/items.html new file mode 100644 index 0000000..d923b86 --- /dev/null +++ b/screens/grid/items.html @@ -0,0 +1,157 @@ + + + + + + + + Grid-Items + + + + + +
+

Grid-Layout

+
+ + +
+
+

Grid Item

+

+ Ein grid item ist ein objekt in einem grid container. Standartgemäß ist ein grid item genau über eine + Spalte und Reihe breit. + Man kann die grid items aber so gestalten, dass sie auch mehrere Spalten und Reihen breit/hoch sind. +

+
+

Grid-column/row Eigenschaft

+

+ Mit der grid-row/grid-column Eigenschaft kann man genau bestimmen wie sich die grid items verhalten. + Start und endpunkte mit grid-(column/row)-(start/end) festlegen. Oder aber den Anfanspunkt festlegen + und bestimmenwie weit + sich das bestimmte element ausbreiten darf. +

+
+ + .grid-container {
+   display: grid;
+   grid-template-columns: auto auto auto;
+ }
+
+ .p1 {
+   grid-column-start: 1;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+ }
+
+ .p4 {
+   grid-column: 1 / span 3;
+ } + +
+
+

p1

+

p2

+

p3

+

p4

+
+

+ Hier werden p1 und p4 jeweils so gestaltet das sie sich jeweils über mehrere Spalten/Reihen + ausbreiten. +

+
+
+

Grid-area Eigenschaft

+

+ Grid area kann als Shortcut für grid-row-start/end und grid-column-start/end genutzt werden. +

+
+ + .grid-container {
+   display: grid;
+   grid-template-columns: auto auto auto auto;
+ }
+
+ .p1 {
+   grid-area: 1 / 2 / 4 / 4
+ }
+
+ +
+
+

p1

+

p2

+

p3

+

p4

+

p5

+

p6

+

p7

+

p8

+

p9

+

p10

+

p11

+
+

+ Bei diesem Beispiel nutzt p2 grid-area, um sich den Platz von eigentlich 5 weiteren p Elementen zu + nehmen. +

+
+
+

Grid Areas benennen

+

+ Es ist auch möglich die einzelnen Bereiche zu benennen und einzeln zuzuordnen, mit der + "grid-template-areas" Eigenschaft. +

+
+ + #item5 { grid-area: header; }
+ #item6 { grid-area: nav; }
+ #item7 { grid-area: main; }
+ #item8 { grid-area: aside; }
+ #item9 { grid-area: footer; }
+
+ .grid-container {
+   display: grid;
+   grid-template-areas:
+   'header header header header header header'
+   'nav main main main aside aside'
+   'nav footer footer footer footer footer';
+   gap: 10px;
+ }
+
+ +
+
+

header

+

nav

+

main

+

aside

+

footer

+
+

+ Hier wird mit Hilfe von grid-template-areas, direkt Bereiche erzeugt indem die Items in den + Bereichen aufgerufen werden, + in denen sie auftauchen sollen. +

+
+
+
+ + + + \ No newline at end of file diff --git a/screens/home.html b/screens/home.html new file mode 100644 index 0000000..fee0e2c --- /dev/null +++ b/screens/home.html @@ -0,0 +1,101 @@ + + + + + + + Home + + + +
+

Home

+
+ +
+
+

+ Prüfungsleistung WebDesigne WiSe 2022/2023 +

+
+

+ Gruppenmitglieder +

+
    +
  • Niklas Minkowitsch
    • +
  • Leon Ehricht
    • +
  • Lukas Pfau
    • +
  • Luca Fleck
    • +
  • Alban Becker
    • +
+
+
+

+ Aufgabenstellung +

+

+ Erstellt ein Webprojekt mit Informationen zu den folgenden Themen:
+

+
    +
  • Flexbox-Layout
    • +
  • Grid-Layout
    • +
  • Text-Styling mit CSS
    • +
  • CSS position-Eigenschaft
    • +
  • Animationen mit CSS
    • +
+
+
+

+ Anforderungen an die technische Umsetzung +

+
    +
  • Korrekter Aufbau der HTML-Strukturen
    • +
  • Nutzung passender semantischer HTML-Tags
    • +
  • Nutzung passender CSS-Selektoren und aussagekräftiger CSS-Klassennamen in IDs
    • +
  • In den Beispielen: Nutzung der CSS-Eigenschaften, die beschrieben werden
    • +
  • Saubere, einheitliche Formatierung des HTMLs (Einrückungen)
    • +
+

+ Für jede dieser fünf Anforderungen gibt es maximal acht Punkte, so dass damit insg. 40 Punkte von + 100 erreicht werden können. +

+
+
+

Präsentation der Ergbenisse

+

+ Vorstellung 15 - 20 min am 06.01.2023 zwischen 8:15 und 15:30 (d.h. in den Zeitslots der Vorlesung und + der Labore an dem Freitag). Alle Gruppenteilnehmer*innen müssen sich an der Vorstellung beteiligen; + geht auch über Discord. +

+

+ In der Präsentation soll mit Folien (z.B. mit Powerpoint, Keynote, Open/Libre-Office oder auch mit + HTML erstellt) vorgestellt werden was ihr erarbeitet habt. Geht dabei auf die Inhalte und die technische + Umsetzung ein. +

+

+ Es gibt jeweils max 5 Punkte für: +

+
    +
  • Einhaltung des Zeitkontingents
    • +
  • Visuelle Präsentation
    • +
  • Aufbau der Präsentation
    • +
  • Inhalt
    • +
+

+ So können für die Präsentation maximal 20 Punkte von 100 erreicht werden. +

+
+
+
+ + + \ No newline at end of file diff --git a/screens/text_styling/allgemeines.html b/screens/text_styling/allgemeines.html new file mode 100644 index 0000000..4c5ea6c --- /dev/null +++ b/screens/text_styling/allgemeines.html @@ -0,0 +1,129 @@ + + + + + + + + Styling-Allgemein + + + + + +
+

Text-Styling

+
+ + +
+
+

Allgemeines

+

+ Zu beginn des Zeitalters des Internets wurden die Texte auf Webseiten zunächst nur über die innerhalb + des + Programmes in dem die Webseite erstellt wird + gegebennen Möglichkeiten bearbeitet um den Wünschen des Webssitenbesitzers zu entsprechen. Heutzutage + ist diese + Methode jedoch stark veralltet. Die gängigste + arte eine Webseite zu erstellen ist den Hauptkörper der Webseite in der Programmiersprache HTML zu + erstellen und + die Textoptik dann mithilfe eines zusätzlichen + CSS Protokolls zu überarbeiten. Dabei gibt es drei verschiedene Möglichkeiten den Text zu bearbeiten. + Diese sind + in form der Größe, der Schriftart und + der Textfarbe und so funktionieren die drei verschiedenen bearbeitungsfunktionen: +

+
+

+ Veränderung der Textgröße +

+

+ Mit hilf von Css lässt sich ganz einfach über verschiedene Wertekategorien die Größe von Schriften + verändern. + Einige Beispiele für + die verschiedenen Mäßeinheiten sind Pixel(px), root-Element(rem), Elemente(em), Prozente der + standart + Schriftgröße(%) oder sogar Centimeter(cm).
+ Zum ändern der Schriftgröße definiert man hierfür den Abschnitt bei dem man die Schriftart ändern + möchte und + nutz dann den befehl "font-size". + Anschließend gibt man ein in welcher Parameterform man die Schriftgröße veränder will und einen Wert + auf welchen + man sie verändern. Danach endet man den CSS befehl mit einem Semikolon. +

+
+ + <style>
+  #Text1{font-size: 20px;}
+  #Text2{font-size: 120%;}
+  #Text3{font-size: 1cm;}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">Pixel </li>
+   <li id="Text2">Vorgegebene Größen</li>
+   <li id="Text3">Prozent</li>
+  </ol>
+ </body> + +
+
+
    +
  1. Pixel
    2. +
  2. Vorgegebene Größen
    3. +
  3. Prozent
    4. +
+

+ Neben diesen Größenenheiten gibt es auch noch von CSS vorgegebene größen. Hierfür nutzt man dann + statt einem + Parameter mit Wert einfach eine der Vorgegeben Größenstufen, + indem man sie als Wort hinschreibt. +

+
+
+ + <style>
+  #Text1{font-size: smaller;}
+  #Text2{font-size: medium;}
+  #Text3{font-size: large;}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">Pixel </li>
+   <li id="Text2">Vorgegebene Größen</li>
+   <li id="Text3">Prozent</li>
+  </ol>
+ </body> + +
+
+
    +
  1. Pixel
    2. +
  2. Vorgegebene Größen
    3. +
  3. Prozent
    4. +
+

+ So lässt sich grob und schnell die Schrifgröße des textes auf des + webseite auf die passende Größe einstellen. +

+
+
+
+
+ + \ No newline at end of file diff --git a/screens/text_styling/beispiele.html b/screens/text_styling/beispiele.html new file mode 100644 index 0000000..1af1888 --- /dev/null +++ b/screens/text_styling/beispiele.html @@ -0,0 +1,395 @@ + + + + + + + + Styling-Beispiele + + + + + +
+

Text-Styling

+
+ + +
+
+

Weitere Beispiele

+
+

+ Veränderung der Textart +

+

+ 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. +

+
+ + <style>
+  #Text1{font-family: Arial;}
+  #Text2{font-family: Helvetica;}
+  #Text3{font-family: sans-serif;}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">Arial</li>
+   <li id="Text2">Georgia</li>
+   <li id="Text3">Lucida Handwriting</li>
+  </ol>
+ </body> + +
+
+
    +
  1. Arial
    2. +
  2. Georgia
    3. +
  3. Lucida Handwriting
    4. +
+
+
+

+ Schriftfarbe ändern +

+

+ 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. +

+
+ + <style>
+  #Farbe1{color: Rot;}
+  #Farbe2{color: rgb(81, 132, 109);}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Farbe1">Rot</li>
+   <li id="Farbe2">RGB</li>
+  </ol>
+ </body> + +
+
+
    +
  1. Rot
    2. +
  2. RGB
    3. +
+
+
+

+ Schrift stylen +

+

+ 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. +

+
+ + <style>
+  #Style1{font-style: italic}
+  #Style2{font-style: onlique}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Style1">italic</li>
+   <li id="Style2">oblique</li>
+   <li>normal</li>
+  </ol>
+ </body> + +
+
+
    +
  1. italic
    2. +
  2. oblique
    3. +
  3. normal
    4. +
+
+
+

+ Schriftdicke verändern +

+

+ 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. +

+
+ + <style>
+  #Text1{font-weight: bold}
+  #Text2{font-weight: 700}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Style1">italic</li>
+   <li id="Style2">oblique</li>
+   <li>normal</li>
+  </ol>
+ </body> + +
+
+
    +
  1. bold
    2. +
  2. 700
    3. +
  3. normal
    4. +
+
+
+

+ Schrift Variante ändern +

+

+ 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. +

+
+ + <style>
+  #Text1{font-variant: normal}
+  #Text2{font-variant: small-cap}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Style1">normal</li>
+   <li id="Style2">small-cap</li>
+  </ol>
+ </body> + +
+
+
    +
  1. normal
    2. +
  2. small-cap
    3. +
+
+
+

+ Textausrichtung ä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. +

+
+ + <style>
+  #Align1{text-align: left}
+  #Align2{text-align: right}
+  #Align3{text-align: center}
+  #Align4{text-align: justify}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Align1">left</li>
+   <li id="Align2">right</li>
+   <li id="Align3">center</li>
+   <li id="Align4">justify</li>
+  </ol>
+ </body> + +
+
+
    +
  1. left
    2. +
  2. right
    3. +
  3. center
    4. +
  4. justify
    5. +
+
+
+

+ Textgestaltung +

+

+ 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. +

+
+ + <style>
+  #Text1{text-decoration: underline;}
+  #Text2{text-decoration: overline;}
+  #Text3{text-decoration:: line-trough;}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">underline</li>
+   <li id="Text2">overline</li>
+   <li id="Text3">line-trough</li>
+  </ol>
+ </body> + +
+
+
    +
  1. underline
    2. +
  2. overline
    3. +
  3. line trough
    4. +
+
+
+

+ Wort- und Zeichenabstände verändern +

+

+ 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). +

+
+ + <style>
+  #Text1{word-spacing: 3mm;}
+  #Text2{word-spacing: 1px;}
+  #Text3{word-spacing: 1rem;}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">3 milimeter</li>
+   <li id="Text2">10 pixel</li>
+   <li id="Text3">1 root-Element</li>
+  </ol>
+ </body> + +
+
+
    +
  1. 3 Milimeter
    2. +
  2. 10 Pixel
    3. +
  3. 1 root-Element
    4. +
+

+ 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. +

+
+
+

+ Texte 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. +

+
+ + <style>
+  #Text1{text-indent: 10mm;}
+  #Text2{text-indent: 20px;}
+  #Text3{text-indent: 1rem;}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">10 milimeter</li>
+   <li id="Text2">20 pixel</li>
+   <li id="Text3">1 root-Element</li>
+  </ol>
+ </body> + +
+
+
    +
  1. 10 Milimeter
    2. +
  2. 20 Pixel
    3. +
  3. 1 root-Element
    4. +
+
+
+

+ Texte transvormieren +

+

+ 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: +

+
    +
  1. Capitalize: Der erste Buchstabe jedes Wortes wir zu einem Großbuchstaben.
    2. +
  2. Uppercase: Alle Buchstaben werden Großbuchstaben
    3. +
  3. Lowercase: Alle Buchstaben werden Kleinbuchstaben
    4. +
  4. None: Regeln werden aufgehoben.
    5. +
+

+ 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. +

+
+ + <style>
+  #Text1{text-transform: capitalize}
+  #Text2{text-transform: uppercase}
+  #Text3{text-transform: lowercase}
+  #Text4{text-transform: none}
+ </style>
+
+ <body>
+  <ol>
+   <li id="Text1">capitalize the letters</li>
+   <li id="Text2">uppercase</li>
+   <li id="Text3">Lowercase The Letters</li>
+   <li id="Text3">no rules</li>
+  </ol>
+ </body> + +
+
+
    +
  1. capitalize the letters
    2. +
  2. uppercase
    3. +
  3. Lowercase The Letters
    4. +
  4. no rules
    5. +
+
+

+ Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt. +

+
+
+ +