Apply CSS


CSS Tutorial  >  Anwendung von CSS

Es gibt vier Wege um ein CSS-Stylesheet auf ein HTML-Dokument anzuwenden:

  • Inline
  • Einbetten
  • Externer Link
  • Import

    Inline

    Styles können innerhalb des HTML-Dokuments deklariert werden. Ein Beispiel,

    <p style='font-family:verdana; font-size:16;'>Dies ist Schriftgröße 16.</p>

    Der obenstehende HTML-Code sieht dann so aus:

    Dies ist Schriftgröße 16.

    Einbetten

    Styles können in das HTML-Dokument eingebettet werden (normalerweise innerhalb des <head>-Tags). Ein Beispiel:

    <head>
      <style type="text/css">
        div {
          background-color:#FF0000;
        }
      </style>
    </head>

    <body>
      <div>
        Die Hintergrundfarbe ist rot
      </div>
    </body>

    Der obenstehende HTML-Code sieht dann so aus:

    Die Hintergrundfarbe ist rot

    Externer Link

    In diesem Fall werden alle CSS-Statements in einer Datei, die extern zu dem HTML-Dokument ist, gespeichert. Diese Datei endet typischerweise auf .css. Innerhalb des <head> .. </head>-Tags des HTML-Dokuments, fügen Sie das folgende Statement ein:

    <link rel=stylesheet type="text/css" href="external-stylesheet.css">

    Dies wendet die CSS-Statements, die in 'external-stylesheet.css' gespeichert sind auf das HTML-Dokument an.

    Import

    Externe CSS-Statements können auch in ein HTML-Dokument importiert werden. Hierzu, benutzen Sie den @Import-Befehl. Der Syntax sieht so aus:

    <STYLE TYPE="text/css">
    <!--
      @import url(http://www.mysite.com/style.css);
    -->
    </STYLE>

    Der @Import-Befehl diente ursprünglich dazu, verschiedene Stylesheets für unterschiedliche Browser anzuwenden. Dies wird heutzutage jedoch nicht mehr benötigt. Heute wird @Import benutzt, um zusätzliche CSS-Stylesheets einzufügen. Wenn mehrere CSS-Dateien über @Import aufgerufen werden, so haben Stylesheets, die zu einem späteren Punkt aufgerufen werden eine höhere Priorität wenn es zu einem Konflikt kommen sollte (für mehr Details hierzu Sie bitte die Seite zu CSS-Kaskaden).

    Folgende Seite: CSS Ausgabearten



    Copyright © 2024   1keydata.com   Alle Rechte vorbehalten