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

den können Sie dies unterbinden, indem Sie für das erste Auftreten des h1 -Tags eine
andere Definition festlegen und den Abstand auf 0 Pixel setzen:

2

h1:first-child {
margin-top: 0px;
}

Während mit :first-child das erste Element angesprochen wird, erreichen Sie mit
:last-child das letzte Element innerhalb eines Elternelements. Beachten Sie, dass es
mehrere erste und letzte Elemente auf einer HTML-Seite geben kann, wenn es meh-
rere Elternelemente gibt.

Elemente mit einem bestimmten Attribut ansprechen

Eingabefelder realisieren Sie mit dem input -Element. Das gilt aber nicht nur für Text-
eingabefelder, sondern auch für Checkboxen oder Radiobuttons. Die Art des Einga-
befeldes legen Sie über das Attribut type fest. Dieses können Sie ebenfalls in CSS
adressieren:

input[type=text] {
margin: 0px;
}
input[type=checkbox] {
margin-right: 20px;
}

Damit bekommen alle input -Elemente, die vom Typ checkbox sind, einen kleinen
Abstand an der rechten Seite.

Redundante Klassennamen

Versuchen Sie, Klassen zu vermeiden, wenn sie keinen Mehrwert gegenüber einem
Tag aufweisen. Konkretes Beispiel: Fließtext. Im Normalfall ist eine Klasse mit der
Bezeichnung fliesstext redundant, da das Element <p> letztendlich ein Synonym
für Absätze und somit Fließtext darstellt. Nutzen Sie in diesem Fall die Definition
über <p> , und erstellen Sie für alle Ausnahmesituationen, wie z. B. der der blauen
Überschrift in der Sharky-WebApp, eine Klasse.

Wiederverwendung von häufig genutzten Klassen

Wenn Sie bestimmte visuelle Eigenschaften häufig verwenden, legen Sie eine Klasse
an, die nur diesen Stil beinhaltet. Wollen Sie z. B. eine Überschrift durch eine Blaufär-
bung markieren und zusätzlich noch bestimmte Stellen im Text, die Sharky an sich