it-swarm.com.de

HTML lädt keine CSS-Datei

Ich bin total verblüfft, warum das nicht funktioniert. Es scheint, dass die HTML-Datei das CSS aus irgendeinem Grund nicht laden kann, obwohl sich beide im selben Verzeichnis befinden. Irgendeine Idee, was könnte das Problem sein?

index.html

<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>

style.css 

body{
    background-color: #F9F9F9;
    background-image: url(images/bg3.png);
    background-position: center top;
    background-repeat: repeat;
    text-shadow: #FFFFFF 0px 1px 0px;
    font-family: "Georgia", "Times", serif;
    -webkit-font-smoothing: antialiased;
}

a{
    text-decoration: none;
}

#main{
    margin: 50px auto 50px auto;
    width: 1000px;
    min-height: 500px;
    padding: 0px 20px 0px 20px;
}

Das obige funktioniert nicht. Das Hinzufügen von css inline in index.html funktioniert jedoch gut

<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
    body {
        background-color: #F9F9F9;
        background-image: url(images/bg3.png);
        background-position: center top;
        background-repeat: repeat;
        text-shadow: #FFFFFF 0px 1px 0px;
        font-family: "Georgia", "Times", serif;
        -webkit-font-smoothing: antialiased;
    }
    a {
        text-decoration: none;
    }
    #main {
        margin: 50px auto 50px auto;
        width: 1000px;
        min-height: 500px;
        padding: 0px 20px 0px 20px;
    }
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
    <div id="main"> Hello </div>
</body>
</html>
14
Asem H.

Hinzufügen 

type="text/css"

zu Ihrem Link-Tag

Während dies in modernen Browsern möglicherweise nicht mehr erforderlich ist, hat die HTML4-Spezifikation dies für erforderlich erklärt.

type = Inhaltstyp [CI]

Dieses Attribut gibt die Stylesheet-Sprache des Elements .__ an. Inhalt und überschreibt die Standard-Stylesheet-Sprache. Der Style Blattsprache wird als Inhaltstyp angegeben (z. B. "text/css") . Autoren müssen einen Wert für dieses Attribut angeben; Es gibt keine Vorgabe Wert für dieses Attribut.

17
Simon West

Überprüfen Sie beide Dateien in demselben Verzeichnis Und versuchen Sie es dann

<link href="style.css" rel="stylesheet" type="text/css"/>
6
Ghost Answer

Sie müssen type="text/css" hinzufügen. Sie können auch href="./style.css" angeben, wobei . das aktuelle Verzeichnis angibt

4
hayonj

Wie Sie sagten, befinden sich beide Dateien im selben Verzeichnis. 1. index.html und 2. style.css

Ich habe Ihren Code kopiert und auf meinem lokalen Computer ausgeführt. Es funktioniert einwandfrei und es gibt keine Probleme.

Meiner Meinung nach aktualisiert Ihr Browser die Datei nicht, sodass Sie die gesamte Seite durch Drücken von STRG + F5 in Windows für Mac CMD + R aktualisieren/neu laden können.

Probieren Sie es aus, wenn Sie immer noch Probleme bekommen, dann können Sie es mit firebug tool für Firefox testen. 

Für IE8 und Google Chrome können Sie dies überprüfen, indem Sie die Taste F12 drücken. Das Entwickler-Tool wird geöffnet, und Sie können HTML und CSS sehen.

Sie haben noch ein Problem, bitte kommentieren Sie, damit wir Ihnen helfen können.

4
w3uiguru

Ich habe mit dem gleichen Problem zu kämpfen (Ubuntu 16.04, Bluefish-Editor, FireFox, Google Chrome).

Lösung: Browserdaten in Chrome löschen "Einstellungen> Erweiterte Einstellungen> Browserdaten löschen", Suchen Sie in Firefox unter "Menüleiste oben rechts" "Voreinstellungen"> "Erweitert" nach diesem Bild im Menü:. Zwischengespeicherte Webinhalte klicken Sie auf die Schaltfläche "Jetzt löschen" . Der Cache des Browsers speichert die .css-Datei, und wenn er nicht geändert wurde, wird er normalerweise nicht neu geladen. Wenn Sie also Ihre .css-Datei ändern, löschen Sie diesen Webcache, und es sollte funktionieren, sofern in Ihrer .css-Datei kein Problem vorliegt Frieden, Stan

3
Stan Ralph

Mit HTML5 benötigen Sie lediglich die rel-Anweisung, nicht einmal die type-Komponente.

<link href="custom.css" rel="stylesheet"></link>

2
sharkySharks

Sie könnten dies versuchen:

<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>

Vergewissern Sie sich, dass der Browser die Anforderung ausführt und keine 404 zurückgibt. 

2
Koen Peters

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

1
Tejas

Ihre CSS-Datei sollte als UTF-8 definiert sein. Fügen Sie dies in die erste Zeile Ihrer CSS-Datei ein.

@charset "UTF-8";
1
jeff-ziligy

Nun, auch ich hatte genau die gleiche Frage. Und mit meinem CSS-Link war alles in Ordnung.Warum html die CSS-Datei nicht lädt, lag an ihrer Position (wie in meinem Fall).

Nun, ich hatte meine benutzerdefinierte CSS an der falschen Stelle definiert, weshalb die Webseite nicht darauf zugegriffen hat. Dann habe ich angefangen, den CSS-Link an einem anderen Ort zu testen und zu plazieren.

Ich hatte irgendwo gelesen, dass wircustom CSSdirekt nachBootstrap CSSplatzieren sollten, also tat ich es, aber dann wurde es nicht geladen. Also habe ich die Position geändert und es hat funktioniert.

Hoffe das hilft.

Vielen Dank!

0
rbashish

Ich hatte ein ähnliches Problem und testete verschiedene Wege, um es zu lösen.

Schließlich verstand ich, dass meine index.htm-Datei mit "Unicode" encodiert wurde (zur Verwendung von Farsi-Zeichen auf meiner Seite), während meine .css-Datei mit "ANSI" gespeichert wurde.

Ich habe die Kodierung meiner .css-Datei in "Unicode" mit Notepad geändert und das Problem wurde behoben.

0
Hadi

Gehen Sie folgendermaßen vor, um die .CSS-Datei zu laden. Dies ist sehr einfach.

<link rel="stylesheet" href="path_here.css"> 

anmerkung: 1 -> Vergessen Sie nicht, "Stylesheet" in das rel-Attribut zu schreiben . 2 -> korrekten Pfad verwenden, z. B. D:\ordner1\forlder2\ordner3\datei.css "

Wo auch immer Sie sich befinden, können Sie Ihre .css-Datei genau in den Pfad laden, in dem Sie sich befinden.

Grüße! Muhammad Majid.

0
Muhammad Majid

Nun, ich bin heute mit diesem Problem konfrontiert und als Workaround (nicht der beste) habe ich unten gearbeitet 

<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

dabei ist testWeb mein Root-App-Ordner in meinem htdoc-Verzeichnis. in Windows (mit xampp) oder im Verzeichnis/var/www/html, wie ich es aus irgendeinem Grund noch nicht wisse 

<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>

während HTML-Indexdatei neben dem Skriptordner im selben Verzeichnis nicht geladen wird.

0
Poode

Stellen Sie außerdem sicher, dass das Attribut link Ihres media-Tags einen gültigen Wert hat. In meinem Fall habe ich WordPress CMS verwendet und den booleschen Wert true im Medienfeld übergeben, sodass es so angezeigt wurde.

<link rel="stylesheet" href="./style.css" media="1">

Deshalb gab es Fehler. Es gibt drei Hauptattribute, von denen das Laden des CSS-Stils abhängt.

  1. Stellen Sie sicher, dass der Wert des link-Tags des rel-Attributs für eine CSS-Datei gültig ist, d. H. stylesheet.
  2. Stellen Sie sicher, dass der Wert des link-Tags des href-Attributs auf eine gültige Cascading Stylesheet-Datei zeigen muss. Wie in Ihrem Fall ist es ./style.css.

    Denken Sie daran, dass Sie im Attribut href sowohl absolute als auch relative Pfade verwenden können. Das heißt, wenn Ihre Datei style.css im Stammverzeichnis vorhanden ist, dh /, können Sie auch /style.css im Wert des Attributs href verwenden. Wenn sich die Datei im selben Verzeichnis befindet, in dem sich Ihre HTML-Datei befindet, können Sie ./style.css als Wert verwenden in dem link-Attributswert Ihres href-Tags .
  3. Stellen Sie sicher, dass das link-Attribut Ihres media-Tags eines der folgenden ..__ ist.
    1. Für jedes Gerät können Sie das Schlüsselwort all als Wert Ihrer media-Attribute verwenden.
    2. Nur für PCs und Laptops können Sie die screen als Wert Ihres media-Attributs verwenden.
    3. Für den Ausdruck von Webseiten können Sie das Schlüsselwort print als Wert Ihrer media-Attribute verwenden. Beachten Sie, dass dies auch gilt, wenn Sie die Taste Print Screen drücken, um das Bild des Bildschirms aufzunehmen.
    4. Für Screenreader können Sie schließlich das Schlüsselwort speech als Wert Ihres `media-Attributs verwenden.

Wenn Sie diese Regeln befolgen, wird Ihre HTML-Struktur für das Tag link ..__ sein. 

0
Azzaz Khan

Ich war mit demselben Problem konfrontiert worden,

Für Chrome und Firefox funktionierte aber alles wie es soll im Internet Explorer. Ich habe festgestellt, dass das Erstellen der CSS-Datei mit UTF-8 für Chrome funktioniert.

0

Dies kann ein "Sonderfall" sein, hat aber mit diesem Code herumgespielt:

ForceType-Anwendung/x-httpd-php SetHandler-Anwendung/x-httpd-php

Als schneller Test für die erweiterungsfreie Dateibehandlung, wenn ein ähnliches Problem aufgetreten ist.

Einige, aber nicht alle PHP-Dateien, behandelten die CSS-Dateien danach als PHP und luden die CSS-Datei daher erfolgreich, aber nicht als CSS-Datei. Daher wurden bei der Überprüfung des F12-Style-Editors Nullregeln ausgeführt.

Vielleicht fällt hier irgendjemandem etwas Ähnliches ein, und dieser Leckerbissen könnte helfen.

0
user10496917

Ich hatte ein ähnliches Problem, aber das Ändern der Datei "Style.css" in "Stil.css" wurde behoben. Aufgrund der Namensänderung "S" wurde ein 404-Fehler ausgegeben. Wir bemerken nicht, dass kleine Änderungen in meinem System funktionieren, aber als ich in der Cloud gehostet habe Es wurde dieser Fehler ausgegeben. Stellen Sie sicher, dass dies nach dem Hochladen in die Cloud überprüft wird 

0
pv abhilash