HTML не загружает файл CSS - PullRequest
Новая
       35

HTML не загружает файл CSS

15 голосов
/ 28 февраля 2012

Я полностью озадачен тем, почему это не работает.Кажется, что HTML-файл не может загрузить CSS по какой-то причине, хотя оба находятся в одном каталоге.Любая идея, в чем может быть проблема?

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

Выше не работает.Добавление CSS в файл index.html работает нормально, хотя 

<!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>

Ответы [ 18 ]

18 голосов
/ 28 февраля 2012

Добавить 

type="text/css"

к вашей ссылке тег

Хотя в современных браузерах это больше не требуется, в спецификации HTML4 этот атрибут объявлен обязательным.

type = content-type [CI]

Этот атрибут определяет язык таблицы стилей элемента содержимое и переопределяет язык таблицы стилей по умолчанию. Стиль язык листа указывается в качестве типа контента (например, «text / css»). Авторы должны предоставить значение для этого атрибута; нет по умолчанию значение для этого атрибута.

6 голосов
/ 28 февраля 2012

Проверьте оба файла в одном каталоге, а затем попробуйте это 

<link href="style.css" rel="stylesheet" type="text/css"/>
5 голосов
/ 20 мая 2013

Вы должны добавить type="text/css", вы также можете указать href="./style.css", который . указывает текущий каталог

4 голосов
/ 28 февраля 2012

Как вы сказали, оба ваших файла находятся в одном каталоге.1. index.html и 2. style.css

Я скопировал ваш код и запустил его на своем локальном компьютере, он работает нормально, проблем нет.

По мне ваш браузер необновив файл, чтобы вы могли обновить / перезагрузить всю страницу, нажав CTRL + F5 в Windows для Mac CMD + R.

Попробуйте, если проблема все еще возникает, тогда вы можете проверить ее с помощью firebug инструмент для Firefox.

Для IE8 и Google Chrome вы можете проверить его, нажав F12, появится ваш инструмент разработчика, и вы увидите HTML и CSS.

Тем не менее у вас возникли проблемы, пожалуйста, прокомментируйте, чтобы мы моглипомочь вам.

4 голосов
/ 28 января 2017

Я боролся с этой же проблемой (Ubuntu 16.04, редактор Bluefish, FireFox, Google Chrome.

Решение: очистить данные браузера в Chrome «Настройки> Расширенные настройки> Очистить данные браузера», в Firefox »Откройте в правом верхнем правом углу панель инструментов меню «Настройки»> «Дополнительно», найдите это изображение в меню: Кэшированный веб-контент нажмите кнопку «Очистить сейчас». Браузер кэширует файл .css, и если он не изменился, он обычно не будетперезагрузите его. Поэтому, когда вы изменяете свой файл .css, очистите этот веб-кеш, и он должен работать, если в вашем файле .css не существует проблемы. Peace, Stan

2 голосов
/ 16 декабря 2018

Ваш файл CSS должен быть определен как UTF-8.Поместите это в первую строку вашего файла CSS. 

@charset "UTF-8";
2 голосов
/ 28 февраля 2012

Вы можете попробовать это: 

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

Убедитесь, что браузер действительно выполняет запрос и не возвращает 404.

2 голосов
/ 10 мая 2017

В HTML5 все, что вам нужно, это rel, даже не type.

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

1 голос
/ 09 апреля 2018 

<link href="style.css" rel="stylesheet" type="text/css"/>
0 голосов
/ 29 марта 2018

Ну, я столкнулся с этой проблемой сегодня, и как обходной путь (не самый лучший) я сделал ниже 

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

, где testWeb - моя корневая папка приложения в моей директории htdoc.в Windows (с использованием xampp) или в каталоге / var / www / html, поскольку по какой-то причине я пока не знаю, 

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

не загружается, пока индексный файл html находится рядом с папкой scripts в том же каталоге.

Страница:
...