Vererbung und em-Einheiten in CSS
Nehmen wir an, wir haben nun eine tiefere Verschachtelung:
html<main>
<div>
<p>
text
</p>
</div>
</main>
Nehmen wir an, das main-Tag hat die folgende Schriftgröße:
cssmain {
font-size: 10px;
}
Setzen wir die Schriftgröße für das div-Tag in
em:
cssdiv {
font-size: 2em; /* entspricht 20px */
}
Setzen wir auch für den Absatz die Schriftgröße in em.
In diesem Fall wird es seine Größe
relativ zur bereits berechneten Schriftgröße
der Div berechnen:
cssp {
font-size: 2em; /* entspricht 40px */
}
Praktische Aufgaben
Nehmen wir an, wir haben den HTML-Code, für den wir Aufgaben lösen werden:
html<section>
<div>
<p>
text
</p>
</div>
</section>
Bestimmen Sie, welche Schriftgröße in px
die Divs als Ergebnis der Ausführung des
folgenden Codes haben werden:
csssection {
font-size: 10px;
}
div {
font-size: 2em;
}
Bestimmen Sie, welche Schriftgröße in px
die Absätze als Ergebnis der Ausführung des
folgenden Codes haben werden:
csssection {
font-size: 10px;
}
div {
font-size: 2em;
}
p {
font-size: 1.5em;
}
Bestimmen Sie, welche Schriftgröße in px
die Absätze als Ergebnis der Ausführung des
folgenden Codes haben werden:
csssection {
font-size: 40px;
}
div {
font-size: 0.5em;
}
p {
font-size: 0.5em;
}