CSS im html einbinden

  • Hallo habe erst vor kurzen html abgeschlossen und bin nun bei Css uns ich habe eine frage .
    Die ersten twei varianten verstehe ich nicht aber die dritte nicht .
    <!-- m --><a class="postlink" href="http://www.html-seminar.de/stylesheets_in_html_einbinden.htm">http://www.html-seminar.de/stylesheets_ ... binden.htm</a><!-- m -->.


    Mit den auslagern einer Datei .
    Soll man ein css datei unter design.css speichern oder soll ich ein ordne anlegen der so heißt .
    und in der html datei soll ich dann<link href="design.css" type="text/css" rel="stylesheet" />
    eingeben oder? Und soll ich diese datei in den ordner abspeichern?


    Und habe noch ein problem wenn ich bei mir (webocon Scriptly) folgendes eingebe:
    <style type="text/css">
    <!--


    h1 {
    color:#FF9F00;
    font-size:28pt;
    font-family:arial,
    }


    -->
    </style>
    funktonierts nicht und wird rot angezeigt aber wen ich es kopier von html seminar wird es richtig angezeigt.
    Und in welchen bereich soll ich des eingeben?
    Das soll man doch in einer Css datei eingeben.



    Könntet ihr mir es ausführlich erklären.


    Danke im vorraus Nic

  • Hey Nic4 (=


    Also, man erstellt als erstes eine CSS-Datei (*.css) und verlinkt dann zu dieser, quasi wie bei einem ganz normalen Link, z.B. wenn die Datei im selben Ordner liegt

    Code
    <link href="design.css" type="text/css" rel="stylesheet" />


    Oft wirst du auch sehen, dass diese Dateien in einem Extra Ordner wie 'Design'; 'Style'; ... zu finden ist, dann sieht der Link so aus:

    Code
    <link href="style/design.css" type="text/css" rel="stylesheet" />

    (Das nur gerade zur Auffrischung^^)


    Du musst auch auf Groß- und Kleinschreibung achten!
    Umlaute in Datei, oder Ordnernamen sind nicht empfehlenswert,.. Das übliche halt ;)


    In die CSS-Datei kommt übrigens nur der Teil zwischen dem <style>-Tag! (ohne die <!-- -->)
    Also z.B. nur

    Code
    h1 {
    color:#FF9F00;
    font-size:28pt;
    font-family:arial,
    }


    Dadurch, dass es sich um eine Style-Datei handelt, weiß der Browser, was er damit zu machen hat (=

  • Zitat von &quot;Nic4&quot;


    Mit den auslagern einer Datei .
    Soll man ein css datei unter design.css speichern oder soll ich ein ordne anlegen der so heißt .
    und in der html datei soll ich dann<link href="design.css" type="text/css" rel="stylesheet" />
    eingeben oder? Und soll ich diese datei in den ordner abspeichern?


    Also den ausgelagerten Quellcode speicherst du in einer *.css Datei (z.B. design.css). Diese Datei kannst du dann einbinden, in dem du in den head Teil deiner HTML-Datei das reinpackst, was du schon gesagt hast. Mit dem richtigen Pfad natürlich.
    Beispiel:

    Code
    [...]
    <head>
     <title>...</title>
     <link href="design.css" type="text/css" rel="stylesheet" />
    </head>


    Ein Beispiel, wenn die CSS-Datei im Ordner css liegt:

    Code
    <link href="css/design.css" type="text/css" rel="stylesheet" />



    Ich weiß gerade nicht genau, was du meinst.


    Zitat von &quot;Nic4&quot;


    Und in welchen bereich soll ich des eingeben?
    Das soll man doch in einer Css datei eingeben.


    Das wird auch auf der Seite anhand von Beispielen gezeigt.
    Wenn du es nicht auslagerst packst du es im <style></style> Tag in den head der HTML-Seite rein.
    Du schreibst also, statt dem <link/>, wo du den Pfad angibst, die Datei vollständig in deine HTML-Seite in <style>.
    Beispiel ausgelagert (s. ganz oben):

    Code
    [...]
    <head>
     <title>...</title>
     <link href="design.css" type="text/css" rel="stylesheet" />
    </head>


    Nicht ausgelagert:

    Code
    <head>
     <title>...</title>
     <style type="text/css">
      ...
     </style>
    </head>


    Du musst allerdings aufpassen, dass du in der ausgelagerten Datei das <style> am Anfang und Ende (</style>) weglässt.


    Tja Sarkkan war zwar eher fertig, schicks aber trotzdem ab.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!