 C02 externe CSS-Datei 7 Vorlagen / Demos
Alle HTML-Seiten der Vorlage 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.
|
|
7 Beispielseiten mit externer CSS-Datei zum Download
UPDATE 29.01.2011 weitere Beispiele, alle auch als ZIP-Datei
|
Hier finden Sie 7 Vorlagen für Ihre Experimente mit ausgelagerten CSS-Anweisungen (CSS in einer externen Datei). Der Content der Seiten ist links angeordnet. Für den frei bleibenden rechten Bereich wurde eine Hintergrundgrafik festgelegt.
|
|
Mit CSS festglegte Formatierungen:
Body, Hintergrundgrafik, Scrollbar, Innenabstand, Links, Tabellenzellen, Absätze, Überschriften, Hintergrundfarben, eigene Klassen für: kleine Schriften, farbige Texte.
Die Breite für den Content-Bereich ist zur Zeit mit 'width:700px;' festgelegt. Ändern Sie die Breitenangaben z.B. auf "width:900px;" um den Inhaltsbereich zu verbreitern.
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 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).
Die ZIP-Datei zu den Beispielen enthält sämtliche Dateien: 1 HTML, 1 CSS, 1 Grafik
(Ziel speichern unter ...)
Alle hier dargestellten Seiten haben identische HTML-Codes. Es wurde lediglich jedesmal eine andere CSS-Datei eingebunden, in denen völlig unterschiedliche Anweisungen für Textformatierungen und Hintergrundgrafik eingetragen wurden.
| 7 Beispiele | CSS | Demo | Grafik | ZIP |
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
|
|
|
|
|
Beispiel 06 externe CSS-Datei
|
|
|
|
|
Beispiel 07 externe CSS-Datei
|
|
|
|
|
Die CSS-Anweisungen beinhalten Notierungen für: Textformatierungen (Type, Farbe, Größe, Zeilenhöhe, Zeichenabstand), Hintergrundgrafik, Scrollbars, Margins, Tabellenränder, Listen, Einrückung, Blocksatz, Unterklassen für Texte, Pseudoklassen für Links.
Der Inhaltsbereich wurde in <div>-Tags eingeschlossen
In diesen 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 nachträglich an ganz zentraler Stelle für alle Seiten ändern.
Die Breite für den Content-Bereich ist zur Zeit mit 'width:700px;' festgelegt. Ändern Sie die Breitenangaben z.B. auf "width:900px;" um den Inhaltsbereich zu verbreitern.
der HTML-Code der Seite (DIV für den Inhalt)
<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%;
}
Sie erinnern sich
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 externe Datei 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.
Anleitung zur Einbindung einer externen CSS-Datei
|
Home • Downloads • CSS • HP-Vorlage externe CSS-Datei
Demo
