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

fix style

Browse Source
This commit is contained in:
adb-sh 2023-01-05 02:06:54 +01:00
parent 614733ef64
commit a0b133679b
17 changed files with 1826 additions and 1715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/animations.css
View File

@ -61,6 +61,7 @@
} }
} }
/* -----------------Animationen Beispiele--------------------------- */ /* -----------------Animationen Beispiele--------------------------- */
/* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/ /* -------Das Stempel Beispiel als Beispiel für die @keyframes-------*/
#stempel1 { #stempel1 {
@ -85,8 +86,7 @@
transform: scale(1.5) rotate(30deg); transform: scale(1.5) rotate(30deg);
} }
100% 100% {
{
transform: scale(1) rotate(10deg) transform: scale(1) rotate(10deg)
} }
} }
@ -117,8 +117,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }
@ -150,8 +149,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }
@ -183,8 +181,7 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
@ -214,14 +211,12 @@
transform: rotate(180deg); transform: rotate(180deg);
} }
100% 100% {
{
transform: rotate(360deg) transform: rotate(360deg)
} }
} }
/*--------------- Beispiel 1 für die animation timing funktion ---------------*/ /*--------------- Beispiel 1 für die animation timing funktion ---------------*/
#beispiel1 { #beispiel1 {
color: red; color: red;
@ -248,8 +243,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }
@ -281,8 +275,7 @@
left: var(--width3); left: var(--width3);
} }
100% 100% {
{
transform: scale(1); transform: scale(1);
left: var(--width2); left: var(--width2);
} }

12
css/layout.css
View File

@ -1,4 +1,3 @@
/* ---------- Farben ---------- */ /* ---------- Farben ---------- */
:root { :root {
--primary: #1D2026; --primary: #1D2026;
@ -70,6 +69,12 @@ footer {
border-bottom: 4px solid var(--primary); border-bottom: 4px solid var(--primary);
} }
code {
padding: .25rem .75rem;
border-radius: .35rem;
background-color: rgba(40, 40, 40, 0.8);
}
.code-example { .code-example {
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
@ -78,6 +83,11 @@ footer {
max-width: 550px; max-width: 550px;
} }
.code-example code {
padding: 0;
background-color: rgba(40, 40, 40, 0.8);
}
.visual-example { .visual-example {
background-color: gray; background-color: gray;
border: 2px solid; border: 2px solid;

62
css/position.css Normal file
View File

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

24
css/text_styling.css
View File

@ -2,35 +2,45 @@
#font-sizePX { #font-sizePX {
font-size: 20px; font-size: 20px;
} }
#font-sizePR { #font-sizePR {
font-size: 120%; font-size: 120%;
} }
#font-sizeCM { #font-sizeCM {
font-size: 1cm; font-size: 1cm;
} }
#font-sizeS { #font-sizeS {
font-size: smaller; font-size: smaller;
} }
#font-sizeM { #font-sizeM {
font-size: medium; font-size: medium;
} }
#font-sizeL { #font-sizeL {
font-size: larger; font-size: larger;
} }
/*--------------Veränderung der Textart--------------*/ /*--------------Veränderung der Textart--------------*/
#font-familyA { #font-familyA {
font-family: Arial; font-family: Arial;
} }
#font-familyG { #font-familyG {
font-family: Georgia; font-family: Georgia;
} }
#font-familyLH { #font-familyLH {
font-family: Lucida Handwriting; font-family: Lucida Handwriting;
} }
/*--------------Schriftfarbe ändern--------------*/ /*--------------Schriftfarbe ändern--------------*/
#colorW { #colorW {
color: red; color: red;
} }
#colorZ { #colorZ {
color: rgb(81, 132, 109); color: rgb(81, 132, 109);
} }
@ -39,6 +49,7 @@
#font-styleI { #font-styleI {
font-style: italic; font-style: italic;
} }
#font-styleO { #font-styleO {
font-style: oblique; font-style: oblique;
} }
@ -47,6 +58,7 @@
#font-weightB { #font-weightB {
font-weight: bold; font-weight: bold;
} }
#font-weightZ { #font-weightZ {
font-weight: 700; font-weight: 700;
} }
@ -60,12 +72,15 @@
#text-alignL { #text-alignL {
text-align: left; text-align: left;
} }
#text-alignR { #text-alignR {
text-align: right; text-align: right;
} }
#text-alignC { #text-alignC {
text-align: center; text-align: center;
} }
#text-alignJ { #text-alignJ {
text-align: justify; text-align: justify;
} }
@ -74,10 +89,12 @@
#text-decorationU { #text-decorationU {
text-decoration: underline; text-decoration: underline;
} }
#text-decorationO { #text-decorationO {
text-decoration: overline; text-decoration: overline;
margin: 4px;; margin: 4px;;
} }
#text-decorationLT { #text-decorationLT {
text-decoration: line-through; text-decoration: line-through;
} }
@ -86,9 +103,11 @@
#word-spacingMM { #word-spacingMM {
word-spacing: 3mm; word-spacing: 3mm;
} }
#word-spacingPX { #word-spacingPX {
word-spacing: 10px; word-spacing: 10px;
} }
#word-spacingREM { #word-spacingREM {
word-spacing: 1rem; word-spacing: 1rem;
} }
@ -97,9 +116,11 @@
#text-indentMM { #text-indentMM {
text-indent: 10mm text-indent: 10mm
} }
#text-indentPX { #text-indentPX {
text-indent: 20px; text-indent: 20px;
} }
#text-indentREM { #text-indentREM {
text-indent: 1rem; text-indent: 1rem;
} }
@ -108,12 +129,15 @@
#text-transformC { #text-transformC {
text-transform: capitalize text-transform: capitalize
} }
#text-transformU { #text-transformU {
text-transform: uppercase text-transform: uppercase
} }
#text-transformL { #text-transformL {
text-transform: lowercase text-transform: lowercase
} }
#text-transformN { #text-transformN {
text-transform: none text-transform: none
} }

2
screens/animation/animations.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

2
screens/animation/keyframes.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animations.html">Animationen</a> <a href="animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

2
screens/flexbox/allgemeines.html
View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

26
screens/flexbox/eigenschaften.html
View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -37,7 +37,8 @@
<h3 id="anchor21">flex-wrap</h3> <h3 id="anchor21">flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4> <h4>Mit horizontaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap: wrap; <br> }</code> <code>#example3 { <br> &emsp; display: flex; <br> &emsp; flex-direction: row; <br> &emsp; flex-wrap:
wrap; <br> }</code>
</div> </div>
<div class="visual-example" id="example3"> <div class="visual-example" id="example3">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
</div> </div>
<h4>Mit vertikaler Anordnung</h4> <h4>Mit vertikaler Anordnung</h4>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap: wrap; <br> &emsp; max-height: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-direction: column; <br> &emsp; flex-wrap:
wrap; <br> &emsp; max-height: 600px; <br> }</code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
<p>p1</p> <p>p1</p>
@ -70,7 +72,8 @@
</p> </p>
<h3 id="anchor22">flex-flow</h3> <h3 id="anchor22">flex-flow</h3>
<div class="code-example"> <div class="code-example">
<code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height: 600px; <br> }</code> <code>#example4 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column wrap; <br> &emsp; max-height:
600px; <br> }</code>
</div> </div>
<p class="explanation"> <p class="explanation">
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und <code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
@ -80,7 +83,8 @@
<section> <section>
<h3 id="anchor23">justify-content</h3> <h3 id="anchor23">justify-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: center; <br> }</code> <code>#example5 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: center; <br> }</code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
<p>p1</p> <p>p1</p>
@ -89,7 +93,8 @@
<p>p4</p> <p>p4</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> }</code> <code>#example6 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> }</code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">
<p>p1</p> <p>p1</p>
@ -114,7 +119,8 @@
<section> <section>
<h3 id="anchor24">align-content</h3> <h3 id="anchor24">align-content</h3>
<div class="code-example"> <div class="code-example">
<code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp; justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code> <code>#example7 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row wrap; <br> &emsp;
justify-content: flex-end; <br> &emsp; align-content: space-between; <br> }</code>
</div> </div>
<div class="visual-example" id="example7"> <div class="visual-example" id="example7">
<p>p1</p> <p>p1</p>
@ -144,7 +150,8 @@
<section> <section>
<h3 id="anchor25">overflow</h3> <h3 id="anchor25">overflow</h3>
<div class="code-example"> <div class="code-example">
<code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x: scroll; <br> }</code> <code>#example8 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> &emsp; overflow-x:
scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example8"> <div class="visual-example" id="example8">
<p>p1</p> <p>p1</p>
@ -161,7 +168,8 @@
<p>p12</p> <p>p12</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp; max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code> <code>#example9 { <br> &emsp; display: flex; <br> &emsp; flex-flow: column nowrap; <br> &emsp;
max-height: 600px; <br> &emsp; overflow-y: scroll; <br> }</code>
</div> </div>
<div class="visual-example" id="example9"> <div class="visual-example" id="example9">
<p>p1</p> <p>p1</p>

14
screens/flexbox/unterelemente.html
View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a> <a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -36,7 +36,8 @@
<section> <section>
<h3 id="anchor31">flex-grow</h3> <h3 id="anchor31">flex-grow</h3>
<div class="code-example"> <div class="code-example">
<code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example10 > p { <br> &emsp; flex-grow: 1; <br> }</code> <code>#example10 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example10 > p { <br> &emsp; flex-grow: 1; <br> }</code>
</div> </div>
<div class="visual-example" id="example10"> <div class="visual-example" id="example10">
<p>p1</p> <p>p1</p>
@ -51,7 +52,8 @@
<section> <section>
<h3 id="anchor32">flex-basis</h3> <h3 id="anchor32">flex-basis</h3>
<div class="code-example"> <div class="code-example">
<code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code> <code>#example11 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example11 > p { <br> &emsp; flex-basis: 100px; <br> }</code>
</div> </div>
<div class="visual-example" id="example11"> <div class="visual-example" id="example11">
<p>p1</p> <p>p1</p>
@ -65,7 +67,8 @@
<section> <section>
<h3 id="anchor33">flex-shrink</h3> <h3 id="anchor33">flex-shrink</h3>
<div class="code-example"> <div class="code-example">
<code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code> <code>#example12 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example12 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 0; <br> }</code>
</div> </div>
<div class="visual-example" id="example12"> <div class="visual-example" id="example12">
<p>p1</p> <p>p1</p>
@ -76,7 +79,8 @@
<p>p6</p> <p>p6</p>
</div> </div>
<div class="code-example"> <div class="code-example">
<code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code> <code>#example13 { <br> &emsp; display: flex; <br> &emsp; flex-flow: row nowrap; <br> } <br> <br>
#example13 > p { <br> &emsp; flex-basis: 40px; <br> &emsp; flex-shrink: 1; <br> }</code>
</div> </div>
<div class="visual-example" id="example13"> <div class="visual-example" id="example13">
<p>p1</p> <p>p1</p>

2
screens/grid/allgemeines.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

11
screens/grid/container.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">
@ -48,7 +48,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; gap: 10px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; gap: 10px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example4"> <div class="visual-example" id="example4">
@ -70,7 +71,8 @@
<br> <br>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br> &emsp; grid-template-rows: 150px 100px 200px;<br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: auto auto auto; <br>
&emsp; grid-template-rows: 150px 100px 200px;<br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example5"> <div class="visual-example" id="example5">
@ -99,7 +101,8 @@
</p> </p>
<div class="code-example"> <div class="code-example">
<code> <code>
.grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br> &emsp; justify-content: space-evenly <br>} .grid-container { <br> &emsp; display: grid; <br> &emsp; grid-template-columns: 50px 50px 50px;<br>
&emsp; justify-content: space-evenly <br>}
</code> </code>
</div> </div>
<div class="visual-example" id="example6"> <div class="visual-example" id="example6">

2
screens/grid/items.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</a> <a href="allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a> <a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

2
screens/home.html
View File

@ -16,7 +16,7 @@
<a href="flexbox/allgemeines.html">Flexbox-Layout</a> <a href="flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="grid/allgemeines.html">Grid-Layout</a> <a href="grid/allgemeines.html">Grid-Layout</a>
<a href="text_styling/allgemeines.html">Text-Styling</a> <a href="text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="animation/animations.html">Animationen</a> <a href="animation/animations.html">Animationen</a>
</nav> </nav>
<main> <main>

2
screens/text_styling/allgemeines.html
View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a> <a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a> <a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="allgemeines.html">Text-Styling</a> <a href="allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a> <a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a> <a href="../animation/animations.html">Animationen</a>
</nav> </nav>
<nav class="navigationbar"> <nav class="navigationbar">

23
screens/text_styling/beispiele.html
View File

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