Compare commits
2 Commits
614733ef64
...
b775686777
| Author | SHA1 | Date | |
|---|---|---|---|
| b775686777 | |||
| a0b133679b |
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
/* ---------------Beispiel auf der Startseite--------------*/
|
||||
#beispiel{
|
||||
#beispiel {
|
||||
background-color: aqua;
|
||||
color: black;
|
||||
border: 3px solid rgb(255, 0, 0);
|
||||
@ -26,12 +26,12 @@
|
||||
@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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
|
||||
62
css/position.css
Normal file
62
css/position.css
Normal 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;
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -11,22 +11,22 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Animationen</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="animations.html">Animation Einführung</a>
|
||||
<a href="keyframes.html">Animations Funktionen</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<section>
|
||||
<h2>
|
||||
@ -105,10 +105,10 @@
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Leon Ehricht</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,22 +11,22 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Animationen</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="animations.html">Animation Einführung</a>
|
||||
<a href="keyframes.html">Animations Funktionen</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<section>
|
||||
<h2>
|
||||
@ -243,10 +243,10 @@
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p> Erstellt von: Leon Ehricht</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,23 +11,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Flexbox-Layout</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="eigenschaften.html">Eigenschaften</a>
|
||||
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="anchor10">Allgemeines</h2>
|
||||
<p>
|
||||
@ -75,10 +75,10 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Niklas Minkowitsch</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,23 +11,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Flexbox-Layout</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="eigenschaften.html">Eigenschaften</a>
|
||||
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="anchor20">Eigenschaften</h2>
|
||||
<p>
|
||||
@ -37,7 +37,8 @@
|
||||
<h3 id="anchor21">flex-wrap</h3>
|
||||
<h4>Mit horizontaler Anordnung</h4>
|
||||
<div class="code-example">
|
||||
<code>#example3 { <br>   display: flex; <br>   flex-direction: row; <br>   flex-wrap: wrap; <br> }</code>
|
||||
<code>#example3 { <br>   display: flex; <br>   flex-direction: row; <br>   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>   display: flex; <br>   flex-direction: column; <br>   flex-wrap: wrap; <br>   max-height: 600px; <br> }</code>
|
||||
<code>#example4 { <br>   display: flex; <br>   flex-direction: column; <br>   flex-wrap:
|
||||
wrap; <br>   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>   display: flex; <br>   flex-flow: column wrap; <br>   max-height: 600px; <br> }</code>
|
||||
<code>#example4 { <br>   display: flex; <br>   flex-flow: column wrap; <br>   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>   display: flex; <br>   flex-flow: row wrap; <br>   justify-content: center; <br> }</code>
|
||||
<code>#example5 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
||||
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>   display: flex; <br>   flex-flow: row wrap; <br>   justify-content: flex-end; <br> }</code>
|
||||
<code>#example6 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
||||
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>   display: flex; <br>   flex-flow: row wrap; <br>   justify-content: flex-end; <br>   align-content: space-between; <br> }</code>
|
||||
<code>#example7 { <br>   display: flex; <br>   flex-flow: row wrap; <br>  
|
||||
justify-content: flex-end; <br>   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>   display: flex; <br>   flex-flow: row nowrap; <br>   overflow-x: scroll; <br> }</code>
|
||||
<code>#example8 { <br>   display: flex; <br>   flex-flow: row nowrap; <br>   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>   display: flex; <br>   flex-flow: column nowrap; <br>   max-height: 600px; <br>   overflow-y: scroll; <br> }</code>
|
||||
<code>#example9 { <br>   display: flex; <br>   flex-flow: column nowrap; <br>  
|
||||
max-height: 600px; <br>   overflow-y: scroll; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example9">
|
||||
<p>p1</p>
|
||||
@ -186,10 +194,10 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Niklas Minkowitsch</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,23 +11,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Flexbox-Layout</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="eigenschaften.html">Eigenschaften</a>
|
||||
<a href="unterelemente.html">Eigenschaften der Unterelemente</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="anchor30">Eigenschaften der Unterelemente</h2>
|
||||
<p>
|
||||
@ -36,7 +36,8 @@
|
||||
<section>
|
||||
<h3 id="anchor31">flex-grow</h3>
|
||||
<div class="code-example">
|
||||
<code>#example10 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example10 > p { <br>   flex-grow: 1; <br> }</code>
|
||||
<code>#example10 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example10 > p { <br>   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>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example11 > p { <br>   flex-basis: 100px; <br> }</code>
|
||||
<code>#example11 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example11 > p { <br>   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>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example12 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 0; <br> }</code>
|
||||
<code>#example12 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example12 > p { <br>   flex-basis: 40px; <br>   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>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br> #example13 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 1; <br> }</code>
|
||||
<code>#example13 { <br>   display: flex; <br>   flex-flow: row nowrap; <br> } <br> <br>
|
||||
#example13 > p { <br>   flex-basis: 40px; <br>   flex-shrink: 1; <br> }</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example13">
|
||||
<p>p1</p>
|
||||
@ -92,10 +96,10 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Niklas Minkowitsch</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,23 +11,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Grid-Layout</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="container.html">Container</a>
|
||||
<a href="items.html">Items</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Allgemeines</h2>
|
||||
<p>
|
||||
@ -111,10 +111,10 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Lukas Pfau</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,23 +11,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Grid-Layout</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="container.html">Container</a>
|
||||
<a href="items.html">Items</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Grid Container</h2>
|
||||
<p>
|
||||
@ -48,7 +48,8 @@
|
||||
</p>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>   gap: 10px;<br>}
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>
|
||||
  gap: 10px;<br>}
|
||||
</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example4">
|
||||
@ -70,7 +71,8 @@
|
||||
<br>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>   grid-template-rows: 150px 100px 200px;<br>}
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: auto auto auto; <br>
|
||||
  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>   display: grid; <br>   grid-template-columns: 50px 50px 50px;<br>   justify-content: space-evenly <br>}
|
||||
.grid-container { <br>   display: grid; <br>   grid-template-columns: 50px 50px 50px;<br>
|
||||
  justify-content: space-evenly <br>}
|
||||
</code>
|
||||
</div>
|
||||
<div class="visual-example" id="example6">
|
||||
@ -138,10 +141,10 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Lukas Pfau</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,23 +11,23 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Grid-Layout</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="container.html">Container</a>
|
||||
<a href="items.html">Items</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Grid Item</h2>
|
||||
<p>
|
||||
@ -148,10 +148,10 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Lukas Pfau</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -8,18 +8,18 @@
|
||||
<link rel="stylesheet" href="../css/layout.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Home</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="home.html">Home</a>
|
||||
<a href="flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="position.html">Position-Eigenschaft</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2>
|
||||
Prüfungsleistung WebDesigne WiSe 2022/2023
|
||||
@ -93,9 +93,9 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<code>Abgabe zum 05.01.2023</code>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
170
screens/position/allgemeines.html
Normal file
170
screens/position/allgemeines.html
Normal file
@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Animationen</title>
|
||||
<link rel="stylesheet" href="../../css/layout.css">
|
||||
<link rel="stylesheet" href="../../css/position.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Animationen</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="../text_styling/allgemeines.html">Text-Styling</a>
|
||||
<a href="../position/allgemeines.html">Position-Eigenschaft</a>
|
||||
<a href="../animation/animations.html">Animationen</a>
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="./">Positionen</a>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<section>
|
||||
<h2>
|
||||
Positionen mit CSS
|
||||
</h2>
|
||||
<p>
|
||||
Mit den verschiedenen Positions-Eigenschaften wird definiert wie sich die Position
|
||||
eines Elementes relativ zum Parent-Element verhaelt. Das hat auswirkungen darauf, wie die Eigenschaften
|
||||
<code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code> interpretiert werden.
|
||||
Das kann zum Beispiel praktisch sein, wenn man auf einer Website einen fixierten Header setzen moechte.
|
||||
</p>
|
||||
</section>
|
||||
<section class="examples">
|
||||
<h3>Static</h3>
|
||||
<div class="visual-example" id="example1">
|
||||
<div class="example-box">1</div>
|
||||
<div class="example-box active">2</div>
|
||||
<div class="example-box">3</div>
|
||||
<div class="example-box">4</div>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
#example1 .active {<br>
|
||||
 position: static;<br>
|
||||
 top: 1rem;<br>
|
||||
 left: 1rem;<br>
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
<p>
|
||||
Obwohl die Eigenschaften <code>top</code> und <code>left</code> gesetzt sind, haben diese keine
|
||||
Auswirkung, da die Positions-Eigenschaft auf <code>static</code> gesetzt ist.
|
||||
</p>
|
||||
</section>
|
||||
<section class="examples">
|
||||
<h3>Relative</h3>
|
||||
<div class="visual-example" id="example2">
|
||||
<div class="example-box">1</div>
|
||||
<div class="example-box active">2</div>
|
||||
<div class="example-box">3</div>
|
||||
<div class="example-box">4</div>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
#example2 .active {<br>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 left: 1rem;<br>
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
<p>
|
||||
Relativ zum normalen Dokument-flow wird das Element mit den Attributen <code>top</code> und
|
||||
<code>left</code> verschoben.
|
||||
</p>
|
||||
</section>
|
||||
<section class="examples">
|
||||
<h3>Absolute</h3>
|
||||
<div class="visual-example" id="example3">
|
||||
<div class="example-box">1</div>
|
||||
<div class="example-box active">2</div>
|
||||
<div class="example-box">3</div>
|
||||
<div class="example-box">4</div>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
#example3 .active {<br>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 left: 1rem;<br>
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
<p>
|
||||
Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum naechtsen
|
||||
Eltern-Elements mit positions-Attribut <code>relative</code>, <code>absolute</code>, <code>fixed</code>
|
||||
oder <code>static</code> platziert.
|
||||
</p>
|
||||
</section>
|
||||
<section class="examples">
|
||||
<h3>Fixed</h3>
|
||||
<div class="visual-example" id="example4">
|
||||
<div class="example-box">1</div>
|
||||
<div class="example-box active">2</div>
|
||||
<div class="example-box">3</div>
|
||||
<div class="example-box">4</div>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
#example4 .active {<br>
|
||||
 position: relative;<br>
|
||||
 top: 1rem;<br>
|
||||
 left: 1rem;<br>
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
<p>
|
||||
Das Element wird aus dem normalen Dokument-flow entfernt und absolut zum viewport positioniert.
|
||||
Das Element ist nun oben links auf der Webseite zu finden.
|
||||
</p>
|
||||
</section>
|
||||
<section class="examples">
|
||||
<h3>Sticky</h3>
|
||||
<div class="visual-example" id="example5">
|
||||
<div class="example-box">1</div>
|
||||
<div class="wrapper">
|
||||
<div class="example-box active">2</div>
|
||||
<div class="example-box">3</div>
|
||||
</div>
|
||||
<div class="example-box">4</div>
|
||||
<div class="example-box">5</div>
|
||||
<div class="example-box active">6</div>
|
||||
<div class="example-box">7</div>
|
||||
<div class="example-box">8</div>
|
||||
<div class="example-box">9</div>
|
||||
<div class="example-box">10</div>
|
||||
</div>
|
||||
<div class="code-example">
|
||||
<code>
|
||||
#example5 .active {<br>
|
||||
 position: sticky;<br>
|
||||
 left: 1rem;<br>
|
||||
 right: 1rem;<br>
|
||||
}
|
||||
</code>
|
||||
</div>
|
||||
<p>
|
||||
Das Element is im normalen Dokument flow-platziert. Sobald das Element allerdings von einem
|
||||
uebergeordneten Element mit overflow-Eigenschaft die Kante erreicht, greift die entsprechende
|
||||
Eigenschaft <code>top</code>, <code>bottom</code>, <code>left</code> oder <code>right</code>.
|
||||
Das Element kann sich dabei nur im direkten Eltern-Element bewegen; Box 2 und Box 3 sind zur
|
||||
Veranschaulichung in einem extra div-Element.
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Alban Becker</p>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -11,22 +11,22 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Text-Styling</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="beispiele.html">Weitere Beispiele</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Allgemeines</h2>
|
||||
<p>
|
||||
@ -81,7 +81,7 @@
|
||||
</div>
|
||||
<br>
|
||||
<ol class="visual-example">
|
||||
<li id="font-sizePX">Pixel </li>
|
||||
<li id="font-sizePX">Pixel</li>
|
||||
<li id="font-sizePR">Vorgegebene Größen</li>
|
||||
<li id="font-sizeCM">Prozent</li>
|
||||
</ol>
|
||||
@ -111,7 +111,7 @@
|
||||
</div>
|
||||
<br>
|
||||
<ol class="visual-example">
|
||||
<li id="font-sizeS">Pixel </li>
|
||||
<li id="font-sizeS">Pixel</li>
|
||||
<li id="font-sizeM">Vorgegebene Größen</li>
|
||||
<li id="font-sizeL">Prozent</li>
|
||||
</ol>
|
||||
@ -122,8 +122,8 @@
|
||||
<br>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Luca Nicolas Fleck</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
@ -11,22 +11,22 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<header>
|
||||
<h1>Text-Styling</h1>
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
</header>
|
||||
<nav class="navigationbar">
|
||||
<a href="../home.html">Home</a>
|
||||
<a href="../flexbox/allgemeines.html">Flexbox-Layout</a>
|
||||
<a href="../grid/allgemeines.html">Grid-Layout</a>
|
||||
<a href="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">
|
||||
</nav>
|
||||
<nav class="navigationbar">
|
||||
<a href="allgemeines.html">Allgemeines</a>
|
||||
<a href="beispiele.html">Weitere Beispiele</a>
|
||||
</nav>
|
||||
<main>
|
||||
</nav>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Weitere Beispiele</h2>
|
||||
<section>
|
||||
@ -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">
|
||||
@ -388,8 +395,8 @@
|
||||
Nun weißt du alles was es über das Gestalten eines textes mit CSS zu wissen gibt.
|
||||
</p>
|
||||
</article>
|
||||
</main>
|
||||
<footer>
|
||||
</main>
|
||||
<footer>
|
||||
<p>Erstellt von: Luca Nicolas Fleck</p>
|
||||
</footer>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user