 C02 externe CSS-Datei - Vorlagen und Demo
Alle Beispiele (die HTML-Seiten) haben grundsätzlich den gleichen Aufbau. Lediglich die CSS-Angaben in den externen CSS-Dateien sind unterschiedlich. Dazu gehört auch die über CSS eingebundene Hintergrundgrafik, die am rechten Fensterrand ausgerichtet ist.
|
|
Beispielseiten mit externer CSS-Datei.
Mit CSS festglegte Formatierungen:
Body, Hintergrundgrafik, Scrollbar, Innenabstand, Links, Tabellenzellen, Absätze, Überschriften, eigene Klassen, Hintergrundfarben, kleine Schriften, farbige Texte.
Vorschau und Download der CSS und HTML-Dateien
Zur Ansicht der CSS-Datei klicken Sie das Dateisymbol 'CSS' an. Mit welchem Programm die Ansicht einer CSS-Datei geöffnet wird, bestimmt Ihr Browser. In der Regel ist das ein Texteditor.
Zur Vorschau der HTML-Datei (in einem neuen Browserfenster) klicken Sie auf das Dateisymbol 'HTML'.
Zur Ansicht (in einem neuen Browserfenster) und zum Abspeichern der Hintergrundgrafik klicken Sie auf das Dateisymbol 'GIF'. Die in einem neuen Browserfenster angzeigte (möglicherweise verkleinerte) Ansicht der Grafik klicken Sie dann RECHTS (rechte Maustaste) an und wählen 'Grafik speichern unter' (FF) bzw. 'Bild speichern unter' (IE).
(Ziel speichern unter ...)
Alle hier dargestellten Beispiele haben identische HTML-Codes. Es wurde lediglich jedesmal eine andere CSS-Datei eingebunden, in denen völlig unterschiedliche Anweisungen für Text- und Hintergrundfarbe, und Hintergrundgrafik eingetragen wurden.
| Beispiele | Text  | Demo | Hintergrund |
Beispiel 01 externe CSS-Datei
|
 |
 |
 |
Beispiel 02 externe CSS-Datei
|
|
|
|
Beispiel 03 externe CSS-Datei
|
|
|
|
Beispiel 04 externe CSS-Datei
|
|
|
|
Beispiel 05 externe CSS-Datei
|
|
|
|
Die Seiten beinhalten Beispiele zu: Basisanweisungen, Hintergrundgrafik, Scrollbar, erweiterte Anweisungen, Margins, Zeilenhöhe, Zeichenabstand, Tabellenränder, Listen, Einrückung, Blocksatz, Unterklassen für Texte und PseudoKlassen für Links.
Inhaltsbereich wurde in <div>-Tags eingeschlossen
In meinen Beispielseiten steht der gesamte Inhalt des HTML-Dokuments innerhalb von <div>-Tags, für die ich mit dem Universal-Attribut ID (id="content") generelle Formatierungen festgelegt habe. Bedeutend ist hier die festgelegte Breite, der rechte Rand von einem Pixel, die Hintergrundfarbe und Innenabstand (40px). So kann ich grundsätzliche Formatierungen (wie Breite und Hintergrundfarbe) für den eigentlichen Inhaltsbereich vorab bestimmen und nachträglich an ganz zentraler Stelle für alle Seiten ändern.
der HTML-Code
<body ..... >
<div id="content">
gesamter Inhalt
</div>
</body>
|
|
Die CSS-Anweisungen dazu:
#content
{
width:700px;
margin:0px;
padding:40px;
background-color:#FFFFFF;
border-right:1px solid #9F9F9F;
line-height:130%;
}
|
Nur zur Erinnerung:
Ein Style-Sheet wird normalerweise im HEAD-Bereich definiert. Einmal festgelegt, gelten die Anweisungen für das gesamte HTML-Dokument. Um nun jedoch diese Definitionen nicht in jede HTML-Datei einkopieren zu müssen, ist es vorteilhaft die CSS-Anweisungen in eine externe Datei auszulagern. Diese kann dann in alle / mehrere HTML-Dokumente ihres Web-Projekts eingebunden werden.
 Ausführliche Informationen zu externen CSS-Dateien ansehen
Die Vorteile:
Styles müssen nur einmal (für alle HTML-Dokumente) festgelegt werden.
Nachträgliche Änderungen kann man ganz zentral vornehmen.
Absolut gleiches Erscheinungsbild aller Seiten
externe CSS-Datei einbinden
Der Bezug zu dieser externen CSS-Datei wird im HEAD-Bereich durch einen Link hergestellt:
<link rel="stylesheet" type="text/css" href="meinestyles.css">
oder mit Pfadangaben
<link rel="stylesheet" type="text/css" href="verzeichnis/meinestyles.css">
- Im rel-Attribut teilt man dem Browser mit,
dass eine CSS-Datei eingebunden wird.
- Im href-Attribut steht der Speicherort.
- Das type-Attribut zeigt den Mime-Typ / die
verwendete Stylesheet-Sprache an.
|
Home • Downloads • CSS • Startseite
Beispiel 01 als DOWNLOAD (ZIP)
