• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage CSS Vererbung Anfänger

Y

Yurek

Neues Mitglied
Hi,

ich hab seit paar Wochen Html und CSS an der Uni. Arbeite gerade an einer Übung und wollte mal nachfragen ob das so richtig wäre. (Bis ich den Prof wieder sehe dauerst ne Woche)

Hier die Aufgabe:

Bildschirmfoto 2015-11-06 um 01.25.37.png

Meine Lösung:

Html:

HTML: 
<!Doctype html>
<html lang="de">
    <head>
        <title>Aufgabe_3.4</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">   
    </head>
    <body>
 
        <div> Hier ein <h1 class="green">erster</h1> <strong class="green">Text</strong> </div>
     
        <h1>Hier ein zweiter <strong class="green">Text</strong> </h1>
     
        <div>Hier ein <div class="green">dritter</div> <h2 class="green">Text</h2> </div>

    </body>

</html>

CSS:

HTML: 
body {color:blue;}
.green{color:green;}

Ausgabe funktioniert aber vor allem im HTML Code überall die Klasse green bei jedem Tag der grün sein soll rein hmm kommt mir doch irgendwie falsch vor. Vll gehts ja noch allgemeiner! Danke schon einmal für die Hilfe!
 
So vielleicht? Nachfahrselektoren
Code: 
<!Doctype html>
<html lang="de">
<head>
<title>Aufgabe_3.4</title>
<meta charset="utf-8">
<style>

body {
color:blue;
}
h1 strong,
div strong,
div h1,
div h2,
div div {
color:green;
}

/* Oder kürzer
h1 strong ,
div *
{
color:green;
}
*/
</style>
</head>
<body>
<div>DIV (1)<h1>H1 (2)</h1><strong> STRONG (2)</strong> </div>
<h1>H1 (1)<strong> STRONG (2)</strong></h1>
<div>DIV (1)<div>DIV (2)</div> <h2>H2 (2)</h2></div>
</body>
</html>
 
Zuletzt bearbeitet:
Hallo,

kommt mir doch irgendwie falsch vor
Zum Vergrößern anklicken....

Sehe ich auch so. Bei der Fragestellung geht es eindeutig um CSS-Vererbung. Deine Lösung enthält aber
keine CSS-Vererbung sondern "nur" Klassen. Die sollen nach der Überschrift aber grade nicht verwendet werden.

Zudem soll die Lösung nur CSS-Regeln enthalten: "Definieren Sie CSS-Regeln so, ..."

Ich gehe davon aus dass ihr aktuelles HTML5 und CSS3 lernt.

Da es offensichtlich nur um die Vererbung geht und nur nach dem CSS gefragt wird sehe ich nach der Fragestellung folgende Lösung:

Code: 
body > * {
color: blue;
}
body > *  > * {
color: green;
}

Unklar in der Fragestellung ist die Formulierung

... Elemente ... in blau erscheinen ...
Zum Vergrößern anklicken....

In CSS gibt es unterschiedliche Farben, zum Beispiel color, background-color, border-color. Da müsstest du schauen ob diese Formulierung im vorherigen Text oder in Beispielen genauer definiert wurde.

Es wäre nett wenn du uns die offizielle Lösung später zeigen würdest.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hi, danke für die Antworten. Vorher in der Aufgabe ging es um Texte mit CSS. Es geht hier auch um Texte, den html Code hatte ich nur zur Prüfung erstellt.

Code: 
/* Oder kürzer
h1 strong ,
div *
{
color:green;
}

Code: 
body > * {
color: blue;
}
body > *  > * {
color: green;
}

Ich denke mal beide Lösungen könnten richtig sein. Die Frage stellt sich mir aber nur welche Bedeutung haben die * Zeichen? Oder sogar die > mit * kombiniert? Ja wir lernen HTML5 und CSS3
 
Hallo

Das Asterisk * ist ein Platzhalter und steht in CSS für ein beliebiges Element.

Die spitze schließende Klammer > bedeutet in diesem Zusammenhang: Genau eine Ebene tiefer.

body > *
Zum Vergrößern anklicken....

selektiert also alle Elemente direkt unterhalb des body-Elements.

body > * > *
Zum Vergrößern anklicken....

selektiert alle Ebenen unterhalb aller Ebenen des body-Elements. Aber weder das body-Element noch die Elemente direkt unterhalb des body-Elements.

So können, wie in der Aufgabenstellung gefordert, gezielt mittels Vererbung die beiden geforderten Ebenen ausgewählt und mit CSS-Eigenschaften versehen werden.

Gruss

MrMurphy
 
Und denke daran, dass ein Div-Conteiner als Behälter dient.. Also, dass einzige was blau sein darf ist H1, der Rest ist grün.
Code: 
<!Doctype html>
<html lang="de">
<head>
<title>Aufgabe_3.4</title>
<meta charset="utf-8">
<style>

body {
color:blue;
}
h1 strong,
div strong,
div h1,
div h2,
div div {
color:green;
}

/* Oder kürzer
h1 strong ,
div *
{
color:green;
}
*/
</style>
</head>
<body>
<div><h1>H1 (2)</h1><strong> STRONG (2)</strong> </div>
<h1>H1 (1)<strong> STRONG (2)</strong></h1>
<div>
  <div> </div>
    <h2>H2 (2)</h2>
</div>
</body>
</html>
Ach, ja der Vorschlag von MrMurphy ist natürlich die bessere Wahl.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben