fix style
This commit is contained in:
parent
614733ef64
commit
a0b133679b
@ -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);
|
||||
}
|
||||
|
||||
@ -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
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;
|
||||
}
|
||||
@ -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
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>   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>
|
||||
|
||||
@ -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>   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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>   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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user