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

Verwenden von mehreren Klassen
Weisen Sie Elementen mehrere Klassen zu, um verschiedene visuelle Stile anzuwen-
den und gegebenenfalls Klassen wiederverwenden zu können. Der HTML-Code im
Folgenden:
<p class="sharky">Ich bin ein Text über Sharky und deswegen Blau.</p>
<p class="wichtig">Ich bin ein riesiger Text.</p>
<p class="sharky wichtig">Ich bin ein Text über Sharky, besonders wichtig
daher blau und riesig.</p>
In der CSS-Datei definieren Sie über zwei Klassen das Erscheinungsbild:
.sharky {
color: #FF2200;
}
.wichtig {
font-size: 30px;
}
Mehrere CSS-Dateien
Ordnen Sie Ihre Definition in mehreren CSS-Dateien an, um die Übersichtlichkeit der
einzelnen Dateien zu erhöhen. Sie können eine weitere CSS-Datei einfach über das
link -Tag in die HTML-Datei einfügen:
<link href="styles/struktur.css" rel="stylesheet" type="text/css" />
<link href="styles/typographie.css" rel="stylesheet" type="text/css" />
Alternativ binden Sie weitere CSS-Dateien auch direkt via CSS ein. Diese Zeile, plat-
ziert in struktur.css , lädt alle Definitionen aus typographie.css :
@import url('typographie.css');
Doch Vorsicht
In beiden Fällen spielt die Ladereihenfolge der Definitionen und CSS-Dateien eine
Rolle. Was zuerst aufgerufen wird, kann gegebenenfalls durch nachfolgende Zuwei-
sungen überschrieben werden. Gehen Sie sparsam mit der Anzahl der CSS-Dateien
um, damit Sie den Überblick nicht verlieren. Glauben Sie uns, das geht schneller, als
Sie denken.