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

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 ]

0 голосов
/ 15 октября 2018

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

0 голосов
/ 12 октября 2018

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

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

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

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

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

0 голосов
/ 30 июня 2018

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

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

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

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

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

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

0 голосов
/ 13 июня 2018

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

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

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

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

Спасибо!

0 голосов
/ 31 мая 2018

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

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

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

0 голосов
/ 08 апреля 2018

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

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

0 голосов
/ 29 июля 2016

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

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

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

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

Привет! Мухаммед Маджид.

0 голосов
/ 25 января 2017

Добавить type = "text / css" Это сработало для меня.

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