web-dev-qa-db-fra.com

HTML ne charge pas le fichier CSS

Je suis complètement perplexe quant à pourquoi cela ne fonctionne pas. Il semble que le fichier HTML ne puisse pas charger le CSS pour une raison quelconque, même si les deux sont dans le même répertoire. Une idée de ce que pourrait être le problème?

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;
}

Ce qui précède ne fonctionne pas. L'ajout du css inline dans index.html fonctionne bien

<!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>
htmlcsshtml5stylesheet
14
Asem H.

Ajouter 

type="text/css"

à votre balise de lien

Bien que cela ne soit peut-être plus nécessaire dans les navigateurs modernes, la spécification HTML4 a déclaré que cet attribut était obligatoire.

type = type de contenu [CI]

Cet attribut spécifie le langage de la feuille de style de l'élément contenu et remplace le langage de feuille de style par défaut. Le style le langage de feuille est spécifié en tant que type de contenu (par exemple, "text/css") . Les auteurs doivent fournir une valeur pour cet attribut; il n'y a pas de défaut valeur pour cet attribut.

17
Simon West

Vérifiez les deux fichiers dans le même répertoire Puis essayez ceci

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

Vous devez ajouter type="text/css" vous pouvez également spécifier href="./style.css" dont le . spécifie le répertoire actuel

4
hayonj

Selon vous, vos deux fichiers sont dans le même répertoire. 1. index.html et 2. style.css

J'ai copié votre code et l'exécute sur ma machine locale. Il fonctionne bien et il n'y a aucun problème.

Selon moi, votre navigateur n'actualise pas le fichier, vous pouvez donc actualiser/recharger toute la page en appuyant sur CTRL + F5 dans Windows pour mac CMD + R.

Essayez-le si le problème persiste, vous pouvez le tester en utilisant firebug tool pour firefox. 

Pour IE8 et Google Chrome, vous pouvez le vérifier en appuyant sur F12. Votre outil de développement s’affiche et vous pouvez voir les formats HTML et CSS.

Vous avez toujours un problème s'il vous plaît commenter afin que nous puissions vous aider.

4
w3uiguru

Je me suis battu avec le même problème (Ubuntu 16.04, éditeur Bluefish, FireFox, Google Chrome).

Solution: effacez les données de navigation dans Chrome "Paramètres> Paramètres avancés> Effacer les données de navigation", Dans Firefox, "Barre d'outils en haut à droite de l'image du menu" Préférences ">, cliquez sur cette image dans le menu:. Contenu Web mis en cache, cliquez sur le bouton "Effacer maintenant" . Le navigateur met en cache le fichier .css et, s'il n'a pas été modifié, il ne le rechargera généralement pas. Ainsi, lorsque vous modifiez votre fichier .css, effacez ce cache Web et il ne devrait fonctionner que si un problème existe dans votre fichier .css . Peace, Stan

3
Stan Ralph

Avec HTML5, tout ce dont vous avez besoin est la rel, pas même la type.

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

2
sharkySharks

Vous pouvez essayer ceci:

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

Assurez-vous que le navigateur fait réellement la demande et ne renvoie pas un 404. 

2
Koen Peters

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

1
Tejas

Votre fichier css doit être défini comme UTF-8. Mettez ceci dans la première ligne de votre fichier css.

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

Eh bien moi aussi j'avais exactement la même question. Et tout allait bien avec mon lien CSS.Pourquoi html ne chargeait pas le fichier CSS était dû à sa position (comme dans mon cas).

Ma coutume CSS a été définie au mauvais endroit et c’est pourquoi la page Web n’y accédait pas. Ensuite, j'ai commencé à tester et à placer le lien CSS vers un endroit différent et le tour est joué, cela a fonctionné pour moi.

J'avais lu quelque part que nous devrions placercustom CSSjuste aprèsBootstrap CSSdonc je l'ai fait, mais alors ce n'était pas le chargement. J'ai donc changé de position et cela a fonctionné.

J'espère que cela t'aides.

Merci!

0
rbashish

J'ai eu un problème similaire et testé différentes façons de le résoudre.

Finalement, j'ai compris que mon fichier index.htm avait été enregistré avec "Unicode" encoding (pour utiliser des caractères farsi dans ma page) alors que mon fichier .css avait été enregistré avec "ANSI" format.

J'ai changé l'encodage de mon fichier .css en "Unicode" avec Notepad et le problème a été résolu.

0
Hadi

Utilisez les étapes suivantes pour charger le fichier .CSS très simple.

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

remarque: 1 -> n'oubliez pas d'écrire "stylesheet" dans l'attribut rel . 2 -> utilisez le chemin correct, par exemple: D:\folder1\forlder2\folder3\file.css "

Maintenant, quel que soit le répertoire dans lequel vous vous trouvez, vous pouvez charger votre fichier .css avec le chemin que vous mentionnez.

Cordialement! Muhammad Majid.

0
Muhammad Majid

Eh bien, j’ai fait face à ce problème aujourd’hui et comme solution de contournement (ce n’est pas le meilleur) j’ai fait ci-dessous 

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

où testWeb est le dossier de mon application racine dans mon répertoire htdoc. dans Windows (avec xampp) ou dans le répertoire/var/www/html comme pour une raison quelconque, je ne sais pas encore 

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

ne charge pas alors que le fichier d'index HTML est à côté du dossier de scripts dans le même répertoire.

0
Poode

Assurez-vous également que l'attribut link de votre balise media a une valeur valide. Dans mon cas, j'utilisais WordPress CMS et transmettais la valeur booléenne true dans le champ du média, de sorte qu'elle s'affiche comme cela.

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

C'est pourquoi cela donnait une erreur. Il y a trois attributs principaux dont dépend le chargement du style css.

  1. Assurez-vous que la valeur de l'attribut relation link de votre balise rel doit être valide pour un fichier CSS, c'est-à-dire stylesheet.
  2. Assurez-vous que la valeur de l'attribut target link de votre balise href doit pointer vers un fichier feuille de style en cascade valide. Comme dans votre cas, c'est ./style.css.

    N'oubliez pas que vous pouvez utiliser des chemins absolus et relatifs dans la valeur de l'attribut href. Cela signifie que si votre fichier style.css est présent à la racine, c'est-à-dire /, vous pouvez également utiliser /style.css dans la valeur de l'attribut href ou sinon, si le fichier est présent dans le même répertoire que votre fichier HTML, vous pouvez utiliser ./style.css comme valeur. dans la valeur de l'attribut link de votre balise href .
  3. Assurez-vous que l'attribut link de votre balise media doit être l'un des suivants .
    1. Pour chaque périphérique, vous pouvez utiliser le mot clé all en tant que valeur de vos attributs media.
    2. Pour les ordinateurs personnels et portables uniquement, vous pouvez utiliser screen comme valeur de votre attribut media.
    3. Pour les impressions de pages Web, vous pouvez utiliser le mot clé print comme valeur de vos attributs media. Notez que cela s'applique également lorsque vous appuyez sur le bouton Print Screen pour capturer l'image de l'écran.
    4. Enfin, pour les lecteurs d'écran, vous pouvez utiliser le mot clé speech comme valeur de votre attribut média.

En suivant ces règles, votre structure HTML pour la balise link sera . 

0
Azzaz Khan

J'avais été confronté au même problème,

Pour Chrome et Firefox, mais tout fonctionnait comme prévu dans Internet Explorer. J'ai trouvé que le fichier CSS UTF-8 fonctionnait sous Chrome.

0
Maximilian Lever

Il s’agit peut-être d’un cas «spécial», mais je manipulais ce code:

ForceType application/x-httpd-php SetHandler application/x-httpd-php

Pour tester rapidement la gestion des fichiers sans extension, lorsqu'un problème similaire se produisait.

Par la suite, certains fichiers php, mais pas tous, ont traité les fichiers css comme php et ont donc chargé avec succès le fichier css, mais pas comme css. Aucune règle n'a donc été exécutée lors de la vérification de l'éditeur de style f12.

Peut-être que quelque chose de similaire pourrait arriver à quelqu'un d'autre ici et cette friandise pourrait aider.

0
user10496917

J'avais un problème similaire, mais j'ai résolu de changer le style.css en style.css. En raison de la lettre majuscule "S" qui a été modifiée, une erreur 404 s'est produite. Nous ne remarquerons donc pas de petites modifications dans mon système, mais nous avons hébergé dans le cloud. il jetait cette erreur assurez-vous que tout cela est vérifié après le téléchargement dans le nuage 

0
pv abhilash