CSS in HTML einbinden

0 | 66160 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS in HTML einbinden" mit Ihrem Wissen!

Anzeige Hier werben

Es gibt 80 verschiedene Arten um CSS in HTML-Dokumente einzubinden:

  1. Direktes Formatieren eines Elements
  2. Zentrale Formatierung im HTML
  3. In eine externe Datei auslagern

Die wahrscheinlich häufigste und beste Methode, ist das Einbinden von CSS über eine externe Datei. Damit wird das Layout schön vom Inhalt getrennt und die Dateien werden nicht unnötig überladen.

Undirektes Formatieren eines Elementes

Dies ist die unsauberste Möglichkeit CSS in HTML einzubinden und sollte vermieden werden. Da dadurch der Quelltext sehr unübersichtlich und schwer veränderbar wird. Eine direkte Formatierung kann man mit Hilfe des style Attributs vornehmen.

Formatierung direkt im html-element  
HTML
1
<p style="size:12px; font-weight:bold;">Mit dieser Zeile wird ein Virus auf ihren Webspace geladen</p>

Zentrale Unformatierung im HTML

Um nicht jedem Element einzeln eine Formatierung zuzuweisen kann man diese zentral im HTML angeben. Sie gelten dann im gesamten Dokument. Für diese Art der Einbindung gibt es den <style> tag.

CSS-Regeln im head-bereich des html-dokuments  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
<head>
    <style type="text/css">
    p {
        size:12px;
        font-weight:bold;
    }
    </style>

    <title>Meine coole Seite</title>
</head>
<body>
    <p>Unformatierter Inhalt</p>
</body>
</html>

In eine externe Datei auslagern

Dieses ist die optimale Variante, da man die CSS-Angaben bequem für mehrere Dateien nutzen kann. Die Formatierungen werden in eine Datei mit der Endung .css ausgelagert welche dann im HTML durch
<link rel="stylesheet" type="text/css" href="dateiname.css"> im Unterbereich eingebunden wird.

Link-Tag mit Verweis auf ein externes Stylesheet  
HTML
1
2
3
4
5
6
7
8
9
<html>
<head>
  <title>Titel</title>
  <link rel="stylesheet" type="text/css" href="dateiname.css" />
</head>
<body>
  <p>Formatierter Inhalt</p>
</body>
</html>

In der externen CSS-Datei werden dann die CSS-Regeln definiert:

dateiname.css  
HTML
1
2
3
4
p {
   size:12px;
   font-weight:bold;
}

Vorteile externer Stylesheets

Externe CSS-Dateien sind bei (größeren) Webseiten zu bevorzugen. Sie bieten einige Vorteile gegenüber der direkten Einbindung:

  • Wenn man für mehrere Dateien das gleiche Stylesheet benutzt muss der Browser es nur einmal runterladen. Dadurch wird Traffic minimiert und die Seitenladenzeiten verkürzt.
  • Damit ist Präsentation und Inhalt am besten getrennt. Der Designer (CSS) muss nicht an der gleichen Datei wie der Redakteur (HTML) arbeiten.
  • CSS kann zentral verwaltet werden. Es muss nur an einer Stelle etwas geändert werden um das aussehen der gesamten Webseite anzupassen.

Medientypen

Für ein externes Stylesheet kann man außerdem noch den Medientyp angeben. Damit kann die Seite für verschiedene Ausgabemedien und Formate optimiert werden. Abhängig von der Ausgabe werden nur Stylesheets mit dem entsprechenden Medientyp berücksichtigt.

Dafür gibt es das media Attribut. Ihm werden verschiedene durch Kommata getrennte Ausgabe-Medien, für die das Stylesheet gelten soll zugewiesen. Mögliche Ausgabe-Medien sind:

Medientyp
all Für alle Geräte
print Für den Druck (siehe CSS für den Druck)
projection Für projizierte Präsentationen vorgesehen, wie zum Beispiel Projektoren("Powerpoint") oder den Ausdruck auf Folien. (siehe Präsentationen mit CSS)
screen Hauptsächlich für Computerbildschirme vorgesehen.
handheld Handheld-Geräte
tv Für fernsehartige Geräte vorgesehen
tty Für Medien vorgesehen, die ein festes Zeichenraster verwenden, wie beispielsweise Fernschreiber, Terminals oder portable Geräte mit begrenzten Anzeigemöglichkeiten.
aural Für Sehbehinderte: Sprachsynthesizer("Screenreader")
embossed Für Sehbehinderte: Braille-Seitendrucker
braille Für Sehbehinderte: Braille-Geräte mit taktilem Feedback
speech
Für Sprachausgabe

Durch die verschiedenen Medien-Typen kann man die Ausgabe des Inhalts je nach Endgerät bestimmen. Zum Beispiel kann man durch den Medientyp 'print' die Navigation oder unnötige Werbebanner ausblenden.

CSS nur für den Ausdruck  
HTML
1
 <link rel="stylesheet" type="text/css" media="print" href="druck.css" />

Stylesheet für das iPhone

Wenn man seine Webseite bestmöglich auch auf dem iPhone präsentieren möchte gibt es auch hier ein paar Regeln die man beachten muss. Das iPhone schrumpft normalerweise die Webseiten die es gerade besucht um so eine bessere Ansicht der ganzen Webseite zu bieten.

Man kann das iPhone nicht über Handheld ansprechen da das iPhone als Computer gehandhabt wird und somit auf Screen reagiert. Der 480 Pixel (960 Pixel beim iPhone4) breite Bildschirm wird mit der folgenden Angabe im Head angesprochen:

 
HTML
1
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> 

Nun muss man dem iPhone noch mitteilen dass es die Webseite nicht wie herkömmlich schrumpfen soll, deswegen müssen wir den Viewport des iPhone im Head der Webseite mit einem Meta-Element ansprechen:

 
HTML
1
<meta name="viewport" content="width=320" />

Nun zeigt das iPhone die Webseite im Hochformat (640 Pixel beim iPhone4) ohne Zoom an. Zuvor sollte man natürlich seine Webseite für das iPhone optimiert haben.

Da der Bildschirm des iPhone 160ppi hat (326 ppi beim iPhone4) werden Schriftarten etwas kleiner angezeigt, somit kann man ohne Bedenken beim Stylesheet die Schriftgröße etwas Größer anlegen.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 10 Personen an der Seite "CSS in HTML einbinden" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS in HTML einbinden" hier bearbeiten.