Depot43-Unterlagen - Verschachtelte Elemente

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Verschachtelte Elemente</title>
	<style>
		body {
			background-color:silver;
			color: blue;
		}
		div.container {
			display:flex;
		}
		div.box {
			border: 1px solid black;
			margin:6px;
			padding:12px;
		}
		.links {

		}
		.rechts {

		}
	</style>
</head>
<body>
	<div class="container">
		<div class="box rechts">
			<h3>Untertitel</h3>
			<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>
		</div>
		<div class="box links">
			<h3>Untertitel</h3>
			<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>
		</div>
	</div>
	<p>Ich bin ein Text der direkt im "body"-Element und zeige alle Eigenschaften die in dieser Regel formatiert wurden.</p>
</body>
</html>


 

            

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.

Untersuche die HTML-Elemente im Editor rechts:

<body>
       <div class="container">
              <div class="box rechts">
                     <h3></h3>
                     <p></p>
              </div>
      </div>
</body>

Verändere Farbe und Hintergrund von <body>
Erkenne, wie sich das auf die Child-Elemente innerhalb auswirkt
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!
Erstelle CSS-Eigenschaften für Farbe und Hintergrund in den beiden vorbereiteten Regeln .links { } und .rechts { }
Untersuche die Auswirkungen, erkenne die Abhängikeit der Verebung

Erstelle in der body-Regel eine zusätzliche Eigenschaft um die Schriftgrösse anzupassen, Beispiel:

        body {
            background-color:silver;
            color: blue;
            font-size: 24px;
        }

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.)