HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 27

Mal vorkommen darf. Klassen hingegen dürfen mehrfach in einem HTML-Doku-
ment verwendet werden. Einem Element eine id zuzuordnen ist leicht:

2

<h1 id="app-name"><h1>

Die Ansprache via CSS erfolgt mit einer vorangestellten Raute:

#app-name {
font-size: 45px;
}

Versuchen Sie primär, mit Tag- und Klassendefinitionen zu arbeiten. Nur wenn Sie
Ihren Code mit JavaScript erweitern, macht die Definition über eine id Sinn.

Verschachtelte Klassen und Elemente ansprechen

Sie können dieselbe Klasse oder dasselbe Tag unterschiedlich ansprechen, wenn sich
das übergeordnete Element (auch Elternelement genannt) unterscheidet. Ergänzen
Sie die Sharky-WebApp im body um folgenden Code:

<header>
<h1>Sharky's Überschrift im Kopfbereich</h1>
</header>

<footer>
<h1>Sharky's Überschrift im Fußbereich</h1>
</footer>

Listing 2.4 Die Kopf- und Fußzeile der Sharky-App

Die Darstellungen der ersten Überschrift in Kopf- und Fußzeile sollen sich unter-
scheiden (Abbildung 2.4). In der CSS-Datei sprechen Sie die Elemente folgenderma-
ßen an:

header h1 {
font-size: 20px;
}

footer h1 {
font-size: 10px;
}

Sie legen die Größe der Überschriften in diesem Fall abhängig vom Elternelement
( header und footer ) fest.