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


Freitag, 24. März 2023

04:15

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 die Formatierungen möglichst nicht 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: direkte bzw. unkomfortable Formatierung

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

<html>
<head>
<title>So ist es unkomfortabel</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: komfortable bzw. ausgelagerte 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 komfortabler</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 1. Beispiel ist der Html-Text regelrecht aufgebläht, wogegen er im 2. Beispiel deutlich schlanker ist und doch sind beide bei Ansicht im Browserfenster identisch.

Änderungen sollten also möglichst nur über die externe CSS-Datei erfolgen, die sich in unseren Homepagevorlagen im Ordner 'css' befindet. Die direkte Formatierung im Html-Dokument funktioniert zwar, sie wurde aber durch Einsatz der modernen CSS-Technik längstens 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 aufgezeigt, wie die Meta Tags im Head eines Html-Dokuments anzupassen sind.

zurück
 weiter



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 20:16 aktualisiert.