 externe CSS-Dateien - Vorlagen
Beispielseiten mit externer CSS-Datei.
Alle Beispielseiten haben grundsätzlich den gleichen Aufbau. Lediglich die CSS-Angaben in den externen CSS-Dateien sind uterschiedlich. Dazu gehört auch die über CSS eingebundene Hintergrundgrafik die am rechten Fensterrand ausgerichtet ist.
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 neunen Browserfenster (möglicherweise verkleinerte Ansicht) der Grafik klicken sie RECHTS (rechte Maustaste) an, und wählen dan 'Grafik speichern unter' (FF) bzw. 'Bild speichern unter' (IE).
(Ziel speichern unter ...)
| 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 Beispiele beinhalten zum Teil Beispiele zu: Basisanweisungen, Hintergrundgrafik, Scrollbar, erweiterte Anweisungen, Margins, Zeilenhöhe, Zeichenabstand, Tabellenränder, Listen, Einrückung, Blocksatz, Unterklassen für Texte und Links.
Inhaltsbereich wurde in <div>-Tags eingeschlossen
In meinen Beispielseiten steht der gesamte Inhalt des HTML-Dokuments innerhalb von <div>-Tags für die mit dem Universal-Attribut ID (id="contet"), 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.
Die CSS-Anweisungen dazu:
<body ..... >
<div id="content">
gesamter Inhalt
</div>
</body>
|
#content
{
width:700px;
margin:0px;
padding:40px;
background-color:#FFFFFF;
border-right:1px solid #9F9F9F;
line-height:130%;
}
|
Nur zur Erinnerung:
 Ausführliche Informationen zu externen CSS-Dateien ansehen
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.
Vorteil:
Styles müssen nur einmal (für alle HTML-Dokumente) festgelegt werden.
Nachträgliche Änderungen kann man ganz zentral vornehmen.
Absolut gleiches Erscheinungsbild aler 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
Beispiel 01 als DOWNLOAD (ZIP)
ZURÜCK 
