WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 299

text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
text-align:center;
}

[data-role=content] p, [data-role=content] li {
font-family: 'Noticia Text', serif;
}

Listing 8.5 Überschrift und Fließtext mit den Webfonts gestalteten

8

Beachten Sie auch hier die Definition über data-role=content . In jQuery Mobile fin-
den Überschriften und Fließtexte nicht nur im Inhaltsbereich Verwendung. Deswe-
gen sollten Sie die Gestaltung auf diesen Bereich beschränken. Neben der Schriftart
legen Sie noch andere Eigenschaften wie Schriftfarbe und Schatten fest.

Abbildung 8.4 Die Startseite mit den Google-Webfont-Schriftarten

Kopf- und Fußzeilen

jQuery Mobile bietet die Möglichkeit, Kopf- (dazu später mehr) und Fußzeilen zu
definieren. Diese werden dabei automatisch immer am oberen oder unteren Bild-
schirmrand fixiert. Für die Startseite benötigen Sie eine Fußzeile, die nicht mitscrollt,
immer an derselben Stelle steht und die Navigation beinhaltet. Sie definieren eine
Fußzeile ebenfalls über das data-role -Attribut. Da die Fußzeile Bestandteil einer Seite
ist, legen Sie diese unterhalb des content -Containers, aber innerhalb des page -Contai-
ners an.