Verschachtelte Elemente
Code Sources Icon Code Sources Icon

HTML-Elemente werden ineinander veschachtelt. Zusammehängende Elemente werden mit einem Rahmen <div>, so kann das HTML-Element mitsamt seinem Inhalt positioniert und gestaltet werden.
Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente
​x
 
1
<!doctype html>
2
<html lang="de">
3
<head>
4
        <meta charset=utf-8>
5
        <title>HTML5 / CSS - Verschachtelte Elemente</title>
6
        <style>
7
                body {
8
                        background-color:silver;
9
                        color: blue;
10
                }
11
                div.container {
12
                        display:flex;
13
                }
14
                div.box {
15
                        border: 1px solid black;
16
                        margin:6px;
17
                        padding:12px;
18
                }
19
                .links {
20
​
21
                }
22
                .rechts {
23
​
24
                }
25
        </style>
26
</head>
27
<body>
28
        <div class="container">
29
                <div class="box rechts">
30
                        <h3>Untertitel</h3>
31
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam ex doloremque, esse laudantium cum ducimus neque cumque quae quo, at ab earum provident voluptatem obcaecati error dolore, modi. Fuga, quo.</p>
32
                </div>
33
                <div class="box links">
34
                        <h3>Untertitel</h3>
35
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam ex doloremque, esse laudantium cum ducimus neque cumque quae quo, at ab earum provident voluptatem obcaecati error dolore, modi. Fuga, quo.</p>
36
                </div>
37
        </div>
38
        <p>Ich bin ein Text der direkt im "body"-Element und zeige alle Eigenschaften die in dieser Regel formatiert wurden.</p>
39
</body>
40
</html>
41
​

Aufgabe 6 > weiter

CSS vererbt seine definierten Eigenschaften an seine Child-Elemente. Dadurch müssen oft nur wenige, aber geziehlte Regeln erstellt werden, um viele Elemente anzusprechen. Um die Zusammenhänge zu verstehen, musst du die Verschachtelung der HTML-Elemente kennen lernen. Meist hängt die Art der Vreschachtelung von der gestalterischen Absicht ab. Es gibt also sehr viele Möglichkeiten CSSRegeln auf HTML-Elemente anzuwenden.

  1. Untersuche die HTML-Elemente im Editor rechts: 
    <body>
       <div class="container">
                  <div class="box rechts">
                         <h3></h3>
                         <p></p>
                  </div>
          </div>
    </body>
  2. Verändere Farbe und Hintergrund von <body>
  3. Erkenne, wie sich das auf die Child-Elemente innerhalb auswirkt
  4. Wirf einen Blick auf die CSS-Regeln für "container" und "box rechts", sowie "box links"
    Die CSS-Eigenschaften für Position und Abstände werden wir später untersuchen!
  5. Erstelle CSS-Eigenschaften für Farbe und Hintergrund in den beiden vorbereiteten Regeln .links {  } und .rechts {  } 
  6. Untersuche die Auswirkungen, erkenne die Abhängikeit der Verebung
  7. Erstelle in der body-Regel eine zusätzliche Eigenschaft um die Schriftgrösse anzupassen, Beispiel:
            body {
                background-color:silver;
                color: blue;
                font-size: 24px;
            }
  8. Untersuche die Auswirkungen in der HTML-Ausgabe
    (Wird die Schriftgrösse von "body" verändert, wirkt sich das auf alle Elemente aus, die innerhalb liegen. Ausser für diese Element wurde eine eigene Schriftgrösse definiert.)
DB-Table: cssbasic6