externe CSS-Datei
    


HOME

BEISPIEL ZURÜCK SITEMAP  

 4) externe Datei

Themenseite: 01 02 03 04 05 06 07 08 09 10 11

  Vorweg: Beispiele externer CSS-Dateien

Unterschiedliche Vorlagen für externe CSS-Dateien habe ich auf der Downloadseite zusammnegefasst. Dort kann ich die Auswahl dann leichter erweitern. Downloadseite

 02.02.2007  Beispiele zum Download überarbeitet


  Stylesheetanweisungen auslagern

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







  • Ein Link im Head des HTML-Dokuments verweist auf die externe CSS-Datei.

    Ich empfehle zuerst innerhalb einer Musterseite passende CSS-Deklarationen festzulegen und erst danach die CSS-Anweisungen in eine zentrale, externe CSS-Datei auszulagern.

      CSS-Code in eine Textdatei schreiben

    In die extene CSS-Datei werden die Anweisungsblöcke ohne einleitende und beendende Tags für Style-Sheets (unten rot dargestellt) einkopiert. Die Datei wird als Textdatei ohne Formatierungen, mit der Dateiklasse 'css' gespeichert.



    Beispiel: Aus den üblichen CSS-Angaben im Head den hier roten Teil heraus- und in eine leere Textdatei hineinkopieren. Die Datei soll beim Speichern die Dateiendung "css" erhalten (z.B. meinestyles.css).

      Den roten Code nicht in die extere Datei schreiben !

    <style type="text/css">
    <!--
    body {
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    background-color :#FFFFFF;
    color: #222222;
    line-height: 100.01%;
    margin: 0px;
    padding: 0px;
    }
    
    td {
    font-family: Verdana,Arial,Helvetica;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    }
    
    a {
    font-family: Verdana,Arial,Helvetica;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #0000FF;
    }
    -->
    </style>
    



      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.



      Beispiele externer CSS-Dateien

    Unterschiedliche Beispiele für externe CSS-Dateien habe ich auf der Downloadseite zusammnegefasst. Dort kann ich die Auswahl dann leichter erweitern.

    zur Downloadseite

    Die Beispiele beinhalten: Basisanweisungen, Hintergrundgrafik, Scrollbar, erweiterte Anweisungen, Margins, Zeilenhöhe, Zeichenabstand, Tabellenränder, Listen, Einrückung, Blocksatz, Unterklassen für Texte und Links.

      Schriftgrößen: Eigene Erfahrungen mit älteren Windows-Versionen

    Die Definition der Schriftgröße in Punkt (pt) ist offenbar nicht absolut! Die Windows-Einstellung kleine Schriftarten oder große Schriftarten veränderte meine HTML-Darstellung (diese bittere Erfahrung machte ich viel zu spät). Leider fand ich bisher nirgendwo einen schriftlichen Hiweis auf diese Eigenart. Testen Sie die verschiedenen Einstellungen einmal.

    Wählte ich dagegen die Einstellung Pixel (px) gab es diesen Einfluss nicht. Ich musste allerdings ein paar Pixel zulegen: 10 pt entspricht ca. 12 px. Bitte überprüfen Sie die Darstellung in beiden großen Browsern!









    NACH OBEN