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
master
adb-sh 2 years ago
parent 614733ef64
commit a0b133679b
17 changed files with 1826 additions and 1715 deletions
Show Stats Download Patch File Download Diff File

23
css/animations.css
Unescape Escape View File

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

12
css/layout.css
Unescape Escape View File

@ -1,4 +1,3 @@
/* ---------- Farben ---------- */
:root {
--primary: #1D2026;
@ -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;

62
css/position.css
Unescape Escape 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
Unescape Escape View File

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

2
screens/animation/animations.html
Unescape Escape View File

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

2
screens/animation/keyframes.html
Unescape Escape View File

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

2
screens/flexbox/allgemeines.html
Unescape Escape View File

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

26
screens/flexbox/eigenschaften.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
@ -37,7 +37,8 @@
<h3 id="anchor21">flex-wrap</h3>
<h4>Mit horizontaler Anordnung</h4>
<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 class="visual-example" id="example3">
<p>p1</p>
@ -51,7 +52,8 @@
</div>
<h4>Mit vertikaler Anordnung</h4>
<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 class="visual-example" id="example4">
<p>p1</p>
@ -70,7 +72,8 @@
</p>
<h3 id="anchor22">flex-flow</h3>
<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>
<p class="explanation">
<code>flex-flow</code> ist ein Shortcut, welcher die Eigenschaften <code>flex-direction</code> und
@ -80,7 +83,8 @@
<section>
<h3 id="anchor23">justify-content</h3>
<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 class="visual-example" id="example5">
<p>p1</p>
@ -89,7 +93,8 @@
<p>p4</p>
</div>
<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 class="visual-example" id="example6">
<p>p1</p>
@ -114,7 +119,8 @@
<section>
<h3 id="anchor24">align-content</h3>
<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 class="visual-example" id="example7">
<p>p1</p>
@ -144,7 +150,8 @@
<section>
<h3 id="anchor25">overflow</h3>
<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 class="visual-example" id="example8">
<p>p1</p>
@ -161,7 +168,8 @@
<p>p12</p>
</div>
<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 class="visual-example" id="example9">
<p>p1</p>

14
screens/flexbox/unterelemente.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</a>
<a href="../text_styling/allgemeines.html">Text-Styling</a>
<a href="position.html">Position-Eigenschaft</a>
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
<a href="../animation/animations.html">Animationen</a>
</nav>
<nav class="navigationbar">
@ -36,7 +36,8 @@
<section>
<h3 id="anchor31">flex-grow</h3>
<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 class="visual-example" id="example10">
<p>p1</p>
@ -51,7 +52,8 @@
<section>
<h3 id="anchor32">flex-basis</h3>
<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 class="visual-example" id="example11">
<p>p1</p>
@ -65,7 +67,8 @@
<section>
<h3 id="anchor33">flex-shrink</h3>
<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 class="visual-example" id="example12">
<p>p1</p>
@ -76,7 +79,8 @@
<p>p6</p>
</div>
<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 class="visual-example" id="example13">
<p>p1</p>

2
screens/grid/allgemeines.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</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>
</nav>
<nav class="navigationbar">

11
screens/grid/container.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</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>
</nav>
<nav class="navigationbar">
@ -48,7 +48,8 @@
</p>
<div class="code-example">
<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>
</div>
<div class="visual-example" id="example4">
@ -70,7 +71,8 @@
<br>
<div class="code-example">
<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>
</div>
<div class="visual-example" id="example5">
@ -99,7 +101,8 @@
</p>
<div class="code-example">
<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>
</div>
<div class="visual-example" id="example6">

2
screens/grid/items.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="allgemeines.html">Grid-Layout</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>
</nav>
<nav class="navigationbar">

2
screens/home.html
Unescape Escape View File

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

2
screens/text_styling/allgemeines.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</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>
</nav>
<nav class="navigationbar">

23
screens/text_styling/beispiele.html
Unescape Escape View File

@ -19,7 +19,7 @@
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
<a href="../grid/allgemeines.html">Grid-Layout</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>
</nav>
<nav class="navigationbar">
@ -208,7 +208,8 @@
Textausrichtung ändern
</h3>
<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.
</p>
<div class="code-example">
@ -243,7 +244,8 @@
Textgestaltung
</h3>
<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.
</p>
<div class="code-example">
@ -275,8 +277,10 @@
Wort- und Zeichenabstände verändern
</h3>
<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
erhöht oder veringert man den zwischen den einzelnen Worten. Der rest ist sozusagen identisch, außer das man den abstand nicht in Prozenten(%)
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).
</p>
<div class="code-example">
@ -303,7 +307,8 @@
<li id="word-spacingREM">1 root-Element</li>
</ol>
<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.
</p>
</section>
@ -344,7 +349,8 @@
Texte transvormieren
</h3>
<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:
</p>
<ol>
@ -354,7 +360,8 @@
<li>None: Regeln werden aufgehoben.</li>
</ol>
<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.
</p>
<div class="code-example">

Write Preview
Loading…
Cancel
Save