Freitag, 10. Februar 2012

06:37

 

Anleitung Kapitel IV.: Formatieren über die externe CSS-Datei

CSS-Formatierung (Beispiele)

Falls Sie eine andere Schriftart, -farbe, -größe, Hintergrundfarbe o.a. für die von Ihnen gewählte Homepagevorlage verwenden möchten, so notieren Sie das keinesfalls direkt im Html-Text der Seite. In diesem Kapitel werden wir Ihnen anhand von zwei Beispielen beweisen, dass es im Prinzip viel einfacher und komfortabler ist, Formatierungen über eine extern ausgelagerte CSS-Datei vorzunehmen.

1. Beispiel: falsche Formatierung

Anweisungen im HTML-Dokument mit direkter Formatierung ohne extern ausgelagerte CSS-Datei:

<html>
<head>
<title>So ist es falsch</title>
</head>
<body bgcolor="#C42460">
<h1><font face="Arial" size="5" color="#FFFF00">Ich bin
die größte Überschrift</font></h1>
<h2><font face="Arial" size="4" color="#00FF00">Ich bin
die zweitgrößte Überschrift</font></h2>
<p><font face="Arial" size="2" color="#C0C0C0">Ich bin
ein Absatz.</font></p>
</body>
</html>

Beispiel ansehen

2. Beispiel: korrekte Formatierung

Anweisungen in der extern ausgelagerten CSS-Datei:

body         { background-color: #C42460 }
h1, h2       { font-family: Arial }
h1           { font-size: 24px; color: #FFFF00 }
h2           { font-size: 18px; color: #00FF00 }
p            { font-family: Arial; font-size: 13px; color: #C0C0C0 }

Anweisungen im HTML-Dokument:

<html>
<head>
<title>So ist es richtig</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Ich bin die größte Überschrift</h1>
<h2>Ich bin die zweitgrößte Überschrift</h2>
<p>Ich bin ein Absatz.</p>
</body>
</html>

Beispiel ansehen

Haben Sie den Unterschied bemerkt? Im nicht korrekt dargestellten Beispiel ist der Html-Text regelrecht aufgebläht, wogegen er im korrekt dargestellten deutlich schlanker ist und doch sind beide bei Ansicht im Browserfenster identisch.

Änderungen sollten also nur über die externe CSS-Datei erfolgen, die sich in unseren Homepagevorlagen im Ordner 'css' befindet. Die direkte Formatierung im Html-Dokument funktioniert zwar, aber sie wurde durch Einsatz der modernen CSS-Technik abgelöst. Eine CSS-Datei kann optional auch mit einfachen Windowsbordmitteln wie Texteditor oder WordPad bearbeitet und damit ebenso erstellt werden.

Die Vorteile durch den Einsatz der CSS-Technik:

1. Die Seiten müssen nicht einzeln bearbeitet werden, da sich die Änderungen auf alle Seiten des Projekts auswirken, die im <Head> (Kopf eines Html-Dokuments) folgendenden Befehl enthalten: 

<link rel="stylesheet" type="text/css" href="css/style.css">

2. Alle Seiten werden bzgl. der Formatierung identisch dargestellt.

3. Der Html-Text ist dadurch deutlich schlanker und übersichtlicher.

4. Die Ladezeit verkürzt sich erheblich ...
a) durch geringeren Html-Text
b) weil sich die CSS-Datei beim ersten Seitenaufruf in den temporären Cache des Clienten lädt, die dort während der ganzen Sitzung verbleibt, wodurch ein erneutes Laden der selben Informationen verhindert wird.

5. Große Zeitersparnis beim Formatieren eines größeren Projekts

6. Bestimmte Html-Elemente (z. B. Div-Boxen etc.) können frei positioniert werden.

7. Effektvolle Navigations-Menüs sind auch ohne Javascript möglich (Vorteil: auch bei deaktiviertem Javascript bleibt die Navigation vollständig erhalten).

8. Formatierungen lassen sich also viel bequemer und komfortabler in der extern ausgelagerten CSS-Datei verwalten!

Tipp: Wählen Sie für Ihre Homepage keine ausgefallenen Schriftarten, die möglicherweise nur auf Ihrem Rechner installiert sind. Besucher, die Ihre Webseite ansurfen und die entsprechende Schriftart nicht selbst installiert haben, können diese auch nicht angezeigt bekommen. Allerdings können Sie in der CSS-Datei dem gewünschten HTML-Tag gleich auch mehrere Schriftarten zuweisen, z. B. so:
p { font-family: Bauhaus, Tahoma, Arial }
In diesem Fall würde dann der Browser zuerst versuchen die Schriftart auszugeben, die als erstes definiert wurde (also Bauhaus); sollte diese beim Surfer jedoch nicht vorhanden sein, so interpretiert der Browser die zweite bzw. die dritte Schriftart.

In diesem Abschnitt haben Sie die Vorteile der Einbindung externer CSS-Dateien kennen und schätzen gelernt. Im nächsten Kapitel wird Ihnen gezeigt, wie die Meta Tags im Head Ihres Html-Dokuments anzupassen sind.

  zurück | weiter 
Diese Seite wurde zuletzt am 30.07.2009 12:28 aktualisiert.
© 2007 - 2012 Copyright by www.homepage-vorlagen-webdesign.de | Hosted by 1&1

Anzeigen

Marktplatz

Eigene Homepage mit Jimdo - schnell & einfach selbst erstellt incl. eigener Domain für nur EUR 5 / Monat [ mehr Infos ]

Millionen Kontakte - unendliche Chancen: Jetzt bei XING [ kostenlos anmelden ]

Mehr als 120.000 Deutsche verdienen mittlerweile Geld im Internet. Wollen auch Sie online Geld verdienen? Hier erfahren Sie, wo Sie Produkte besonders günstig einkaufen können, um diese anschließend bei eBay oder im eigenen Online-Shop mit hohem Gewinn zu verkaufen.
[ Leseprobe gratis anfordern ]

E-Shops von Host Europe: Professionell & zuverlässig online verkaufen! Schon ab EUR 9,99* im Monat!
[ mehr Infos ]

Langeweile war gestern: Mit dem Spreadshirt Designer kann man schnell und einfach Shirts und Accessoires online gestalten und bestellen! Einfach Motiv hochladen oder Wunschtext eintippen, das Ganze ausrichten, fertig ist das Wunsch-Shirt.
[ mehr Infos ]

WebPack® S 3.0: 500 MB Webspace * Traffic-Flatrate * 100 Subdomains * 200 E-Mail-Adressen * 50 E-Mail-Konten * 5 FTP-Zugänge * Webmailer - für nur EUR 1,49* im Monat.
[ mehr Infos ]

Nutzen Sie jetzt eine der letzten wirklich kostenlosen Webmasterdienste und tragen Sie Ihr Projekt mit Linklisteneintrag.de in über 10.000 Linklisten ein. Garantiert kostenlos!
[ mehr Infos ]