it-roy-ru.com

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

Я полностью озадачен тем, почему это не работает. Кажется, что 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 в inline.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>
14
Asem H.

Добавлять 

type="text/css"

на ваш тег ссылки

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

type = content-type [CI]

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

17
Simon West

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

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

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

4
hayonj

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

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

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

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

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

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

4
w3uiguru

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

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

3
Stan Ralph

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

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

2
sharkySharks

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

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

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

2
Koen Peters

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

1
Tejas

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

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

Ну, у меня тоже был точно такой же вопрос. И все было в порядке с моей ссылкой CSS.Почему html не загружал файл CSS из-за его положения (как в моем случае).

Ну, мой пользовательский CSS определен не в том месте, и поэтому веб-страница не обращалась к нему. Затем я начал тестировать и помещать ссылку CSS в другое место, и вуаля это сработало для меня.

Я где-то читал, что мы должны поместитьcustom CSSсразу послеBootstrap CSSтак я и сделал, но тогда он не загружался. Так что я изменил позицию, и это сработало.

Надеюсь это поможет.

Спасибо!

0
rbashish

У меня была похожая проблема, и я тестировал разные способы ее решения.

В конце концов я понял, что мой файл index.htm был сохранен с "Unicode" encoding (для использования символов фарси на моей странице), в то время как мой файл .css был сохранен с "ANSI" .

Я изменил кодировку моего файла .css на "Unicode" с помощью Блокнота, и проблема была решена.

0
Hadi

Используйте следующие шаги, чтобы загрузить .CSS файл очень просто.

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

примечание: 1 -> не забудьте написать "таблицу стилей" в атрибуте rel . 2 -> использовать правильный путь, например: D:\folder1\forlder2\folder3\file.css "

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

С уважением! Мухаммед Маджид.

0
Muhammad Majid

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

<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 в той же директории.

0
Poode

Также убедитесь, что атрибут link вашего тега media имеет допустимое значение, в моем случае я использовал WordPress CMS и передал логическое значение true в поле мультимедиа, чтобы он выглядел так.

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

Вот почему это дало ошибку. Существует три основных атрибута, от которых зависит загрузка стиля css.

  1. Убедитесь, что значение атрибута link вашего тега rel должно быть действительным для файла css, т.е. stylesheet.
  2. Убедитесь, что значение атрибута target link вашего тега href должно указывать на действительный существующий файл таблицы каскадных стилей. Как и в вашем случае это ./style.css.

    Помните, что вы можете использовать как абсолютные, так и относительные пути в значении атрибута href. Это означает, что если ваш файл style.css присутствует в корне, т. Е. /, тогда вы также можете использовать /style.css в значении атрибута href или же, если файл присутствует в том же каталоге, в котором находится ваш HTML-файл, тогда вы можете использовать ./style.css в качестве значения в значении атрибута link вашего тега href .
  3. Убедитесь, что атрибут link вашего тега media должен быть одним из следующих .
    1. Для каждого устройства вы можете использовать ключевое слово all в качестве значения ваших атрибутов media.
    2. Только для ПК и ноутбуков вы можете использовать screen в качестве значения вашего атрибута media.
    3. Для печати веб-страниц вы можете использовать ключевое слово print в качестве значения ваших атрибутов media. Обратите внимание, что это также применяется, когда вы нажимаете кнопку Print Screen , чтобы сделать снимок экрана.
    4. Наконец, для программ чтения с экрана вы можете использовать ключевое слово speech в качестве значения вашего атрибута media.

Следуя этим правилам, ваша HTML-структура для тега link будет . 

0
Azzaz Khan

Я столкнулся с той же проблемой,

Для Chrome и Firefox, но все работало так, как должно быть в Internet Explorer. Я обнаружил, что создание CSS-файла UTF-8 позволяет работать с Chrome.

0
Maximilian Lever

Это может быть «особый» случай, но он возился с этим фрагментом кода:

Приложение ForceType/x-httpd-php Приложение SetHandler/x-httpd-php

В качестве быстрого теста для бесполезной обработки файлов, когда возникла подобная проблема.

Некоторые, но не все php-файлы впоследствии обрабатывали css-файлы как php и, таким образом, успешно загружали css, но не обрабатывали его как css, поэтому при проверке редактора стиля f12 были выполнены нулевые правила.

Возможно, что-то подобное может произойти с кем-то еще здесь, и этот кусочек может помочь.

0
user10496917

У меня была похожая проблема, но я решил изменить Style.css на style.css. Из-за этого изменения буквы «S» заглавными буквами было выброшено 404, мы не заметили небольших изменений в моей системе, это работало, но когда я работал в облаке выдает эту ошибку, убедитесь, что все это проверяется после загрузки в облако 

0
pv abhilash