From a0b133679bc3788b7c12c58541cdba50553df26b Mon Sep 17 00:00:00 2001 From: adb-sh Date: Thu, 5 Jan 2023 02:06:54 +0100 Subject: [PATCH] fix style --- css/animations.css | 95 ++-- css/flexbox.css | 2 +- css/grid.css | 2 +- css/layout.css | 18 +- css/position.css | 62 +++ css/text_styling.css | 94 ++-- screens/animation/animations.html | 198 +++---- screens/animation/keyframes.html | 474 ++++++++-------- screens/flexbox/allgemeines.html | 136 ++--- screens/flexbox/eigenschaften.html | 364 ++++++------ screens/flexbox/unterelemente.html | 174 +++--- screens/grid/allgemeines.html | 206 +++---- screens/grid/container.html | 263 ++++----- screens/grid/items.html | 280 +++++----- screens/home.html | 180 +++--- screens/text_styling/allgemeines.html | 228 ++++---- screens/text_styling/beispiele.html | 765 +++++++++++++------------- 17 files changed, 1826 insertions(+), 1715 deletions(-) create mode 100644 css/position.css diff --git a/css/animations.css b/css/animations.css index 10eadfa..7d6f8bd 100644 --- a/css/animations.css +++ b/css/animations.css @@ -6,7 +6,7 @@ } /* ---------------Beispiel auf der Startseite--------------*/ -#beispiel{ +#beispiel { background-color: aqua; color: black; border: 3px solid rgb(255, 0, 0); @@ -26,15 +26,15 @@ @keyframes beispiel { 0% { transform: rotate(0deg); - left:var(--width2); + left: var(--width2); } 25% { transform: rotate(90deg); - left:var(--width2); + left: var(--width2); background-color: blue; border-color: orange; - + } 50% { @@ -42,13 +42,13 @@ background-color: blueviolet; border-color: green; transform: rotate(180deg); - left:var(--width1); + left: var(--width1); } 75% { transform: rotate(270deg); - left:var(--width1); + left: var(--width1); background-color: red; border-color: lightblue; } @@ -57,13 +57,14 @@ background-color: yellow; border-color: pink; transform: rotate(360deg); - left:var(--width2); + left: var(--width2); } - + } + /* -----------------Animationen Beispiele--------------------------- */ /* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/ -#stempel1{ +#stempel1 { color: red; border: 2px solid red; padding: 10px; @@ -77,16 +78,15 @@ } @keyframes stempel1 { - 0%{ + 0% { transform: scale(1) rotate(10deg) } - 50%{ + 50% { transform: scale(1.5) rotate(30deg); } - 100% - { + 100% { transform: scale(1) rotate(10deg) } } @@ -107,20 +107,19 @@ } @keyframes beispiel6 { - 0%{ + 0% { transform: scale(1); - left:var(--width2); + left: var(--width2); } - 50%{ + 50% { transform: scale(1.5); - left:var(--width3); + left: var(--width3); } - 100% - { + 100% { transform: scale(1); - left:var(--width2); + left: var(--width2); } } @@ -140,20 +139,19 @@ } @keyframes beispiel7 { - 0%{ + 0% { transform: scale(1); - left:var(--width2); + left: var(--width2); } - 50%{ + 50% { transform: scale(1.5); - left:var(--width3); + left: var(--width3); } - 100% - { + 100% { transform: scale(1); - left:var(--width2); + left: var(--width2); } } @@ -175,16 +173,15 @@ } @keyframes beispiel4 { - 0%{ + 0% { transform: rotate(0deg); } - 50%{ + 50% { transform: rotate(180deg); } - 100% - { + 100% { transform: rotate(360deg) } } @@ -206,22 +203,20 @@ } @keyframes beispiel5 { - 0%{ + 0% { transform: rotate(0deg); } - 50%{ + 50% { transform: rotate(180deg); } - 100% - { + 100% { transform: rotate(360deg) } } - /*--------------- Beispiel 1 für die animation timing funktion ---------------*/ #beispiel1 { color: red; @@ -238,20 +233,19 @@ } @keyframes beispiel1 { - 0%{ + 0% { transform: scale(1); - left:var(--width2); + left: var(--width2); } - 50%{ + 50% { transform: scale(1.5); - left:var(--width3); + left: var(--width3); } - 100% - { + 100% { transform: scale(1); - left:var(--width2); + left: var(--width2); } } @@ -271,19 +265,18 @@ } @keyframes beispiel2 { - 0%{ + 0% { transform: scale(1); - left:var(--width2); + left: var(--width2); } - 50%{ + 50% { transform: scale(1.5); - left:var(--width3); + left: var(--width3); } - 100% - { + 100% { transform: scale(1); - left:var(--width2); + left: var(--width2); } -} \ No newline at end of file +} diff --git a/css/flexbox.css b/css/flexbox.css index ca4df57..0902eea 100644 --- a/css/flexbox.css +++ b/css/flexbox.css @@ -92,4 +92,4 @@ #example13 > p { flex-basis: 40px; flex-shrink: 1; -} \ No newline at end of file +} diff --git a/css/grid.css b/css/grid.css index e57bcbd..43d58d2 100644 --- a/css/grid.css +++ b/css/grid.css @@ -99,4 +99,4 @@ #item9 { grid-area: footer; -} \ No newline at end of file +} diff --git a/css/layout.css b/css/layout.css index 1e30bdf..ecc4410 100644 --- a/css/layout.css +++ b/css/layout.css @@ -1,4 +1,3 @@ - /* ---------- Farben ---------- */ :root { --primary: #1D2026; @@ -49,7 +48,7 @@ footer { align-items: center; } -.navigationbar a{ +.navigationbar a { color: aliceblue; padding: 10px; margin-left: 5px; @@ -59,7 +58,7 @@ footer { flex-grow: 1; } -.navigationbar a:hover{ +.navigationbar a:hover { background: darkgray; } @@ -70,6 +69,12 @@ footer { border-bottom: 4px solid var(--primary); } +code { + padding: .25rem .75rem; + border-radius: .35rem; + background-color: rgba(40, 40, 40, 0.8); +} + .code-example { margin: 4px; padding: 8px; @@ -78,6 +83,11 @@ footer { max-width: 550px; } +.code-example code { + padding: 0; + background-color: rgba(40, 40, 40, 0.8); +} + .visual-example { background-color: gray; border: 2px solid; @@ -114,4 +124,4 @@ footer { .navigationbar:nth-of-type(2) { grid-column: 1/5; } -} \ No newline at end of file +} diff --git a/css/position.css b/css/position.css new file mode 100644 index 0000000..01ada15 --- /dev/null +++ b/css/position.css @@ -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; +} diff --git a/css/text_styling.css b/css/text_styling.css index 3f294c8..4b29ce6 100644 --- a/css/text_styling.css +++ b/css/text_styling.css @@ -1,119 +1,143 @@ /*--------------Veränderung der Textgröße--------------*/ -#font-sizePX{ +#font-sizePX { font-size: 20px; } -#font-sizePR{ + +#font-sizePR { font-size: 120%; } -#font-sizeCM{ + +#font-sizeCM { font-size: 1cm; } -#font-sizeS{ + +#font-sizeS { font-size: smaller; } -#font-sizeM{ + +#font-sizeM { font-size: medium; } -#font-sizeL{ + +#font-sizeL { font-size: larger; } + /*--------------Veränderung der Textart--------------*/ -#font-familyA{ +#font-familyA { font-family: Arial; } -#font-familyG{ + +#font-familyG { font-family: Georgia; } -#font-familyLH{ + +#font-familyLH { font-family: Lucida Handwriting; } + /*--------------Schriftfarbe ändern--------------*/ -#colorW{ +#colorW { color: red; } -#colorZ{ + +#colorZ { color: rgb(81, 132, 109); } /*--------------Schrift stylen--------------*/ -#font-styleI{ +#font-styleI { font-style: italic; } -#font-styleO{ + +#font-styleO { font-style: oblique; } /*--------------Schriftdicke verändern--------------*/ -#font-weightB{ +#font-weightB { font-weight: bold; } -#font-weightZ{ + +#font-weightZ { font-weight: 700; } /*--------------Schrift Variante ändern--------------*/ -#font-variant{ +#font-variant { font-variant: small-caps; } /*--------------Textausrichtung ändern--------------*/ -#text-alignL{ +#text-alignL { text-align: left; } -#text-alignR{ + +#text-alignR { text-align: right; } -#text-alignC{ + +#text-alignC { text-align: center; } -#text-alignJ{ + +#text-alignJ { text-align: justify; } /*--------------Textgestaltung--------------*/ -#text-decorationU{ +#text-decorationU { text-decoration: underline; } -#text-decorationO{ + +#text-decorationO { text-decoration: overline; margin: 4px;; } -#text-decorationLT{ + +#text-decorationLT { text-decoration: line-through; } /*--------------Wort- und Zeichenabstände verändern--------------*/ -#word-spacingMM{ +#word-spacingMM { word-spacing: 3mm; } -#word-spacingPX{ + +#word-spacingPX { word-spacing: 10px; } -#word-spacingREM{ + +#word-spacingREM { word-spacing: 1rem; } /*--------------Texte einrücken--------------*/ -#text-indentMM{ +#text-indentMM { text-indent: 10mm -} -#text-indentPX{ +} + +#text-indentPX { text-indent: 20px; } -#text-indentREM{ + +#text-indentREM { text-indent: 1rem; } /*--------------Texte transvormieren--------------*/ -#text-transformC{ +#text-transformC { text-transform: capitalize } -#text-transformU{ + +#text-transformU { text-transform: uppercase } -#text-transformL{ + +#text-transformL { text-transform: lowercase } -#text-transformN{ + +#text-transformN { text-transform: none -} \ No newline at end of file +} diff --git a/screens/animation/animations.html b/screens/animation/animations.html index f686fef..5faa858 100644 --- a/screens/animation/animations.html +++ b/screens/animation/animations.html @@ -11,104 +11,104 @@ -
-

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);
-   }
-  }
- } - -
-
-
-
- +
+

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 index 41a8b20..8f80e4d 100644 --- a/screens/animation/keyframes.html +++ b/screens/animation/keyframes.html @@ -11,242 +11,242 @@ -
-

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;
-  }
- } - -
-
-
-
- +
+

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 index db01c49..44ca5ac 100644 --- a/screens/flexbox/allgemeines.html +++ b/screens/flexbox/allgemeines.html @@ -11,74 +11,74 @@ -
-

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

+

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.

-
-

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

-
-
-
-
-

Erstellt von: Niklas Minkowitsch

-
+ +
+

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 index 13ed8fe..f30d739 100644 --- a/screens/flexbox/eigenschaften.html +++ b/screens/flexbox/eigenschaften.html @@ -11,185 +11,193 @@ -
-

Flexbox-Layout

-
- - -
-
-

Eigenschaften

-

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

+

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

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

-
-
-
-
-

Erstellt von: Niklas Minkowitsch

-
+

+ +
+
+ - \ No newline at end of file + diff --git a/screens/flexbox/unterelemente.html b/screens/flexbox/unterelemente.html index 4853317..e644dc6 100644 --- a/screens/flexbox/unterelemente.html +++ b/screens/flexbox/unterelemente.html @@ -11,91 +11,95 @@ -
-

Flexbox-Layout

-
- - -
-
-

Eigenschaften der Unterelemente

-

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

+

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

-
-
-
-
-

Erstellt von: Niklas Minkowitsch

-
+ +
+

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 index ee0a96f..af75efa 100644 --- a/screens/grid/allgemeines.html +++ b/screens/grid/allgemeines.html @@ -11,110 +11,110 @@ -
-

Grid-Layout

-
- - -
-
-

Allgemeines

+
+

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

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

-
-

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

-
-
-
-
-

Erstellt von: Lukas Pfau

-
+
+ + .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 index 3e592b7..1c7fdad 100644 --- a/screens/grid/container.html +++ b/screens/grid/container.html @@ -11,137 +11,140 @@ -
-

Grid-Layout

-
- - -
-
-

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

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

-
-
-
-
-

Erstellt von: Lukas Pfau

-
+
+ + .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 index d923b86..b609913 100644 --- a/screens/grid/items.html +++ b/screens/grid/items.html @@ -11,147 +11,147 @@ -
-

Grid-Layout

-
- - -
-
-

Grid Item

+
+

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

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

-
-
-
-
-

Erstellt von: Lukas Pfau

-
+
+ + .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 index fee0e2c..716e576 100644 --- a/screens/home.html +++ b/screens/home.html @@ -8,94 +8,94 @@ -
-

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

-
-
-
- +
+

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 index 4c5ea6c..590aae4 100644 --- a/screens/text_styling/allgemeines.html +++ b/screens/text_styling/allgemeines.html @@ -11,119 +11,119 @@ -
-

Text-Styling

-
- - -
-
-

Allgemeines

+
+

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 +

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

-
-

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

-
-
-
-
-
-

Erstellt von: Luca Nicolas Fleck

-
- \ No newline at end of file +
+ + <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. +

+
+ +
+
+ + diff --git a/screens/text_styling/beispiele.html b/screens/text_styling/beispiele.html index 1af1888..b542fcb 100644 --- a/screens/text_styling/beispiele.html +++ b/screens/text_styling/beispiele.html @@ -11,385 +11,392 @@ -
-

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

Text-Styling

+
+ + +
+
+

Weitere Beispiele

+
+

+ Veränderung der Textart +

- Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt. + 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.

-
-
-
-

Erstellt von: Luca Nicolas Fleck

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

+
+
+