Полный список причин, по которым css файл может не работать
Эта проблема заставляет меня чувствовать себя абсолютным noob.
Вот глава моего .html файла:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="#" onclick="location.href='http://fakedomain.com/smilemachine/html.css'; return false;" rel="stylesheet"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
document.getElementById(name).style.display = 'block';
}
</script>
</head>
И мой файл html.css действительно там, где он должен быть. Но у меня совсем нет стиля. Помогите!
И, пожалуйста, не голосуйте, потому что ответ очевиден, и я не вижу его.
РЕДАКТИРОВАТЬ 1
Хорошо, теперь я просто пытаюсь решить проблему локально на своей машине. Вот глава:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<link href="cover.css" rel="stylesheet" type="text/css"/>
<title>Common Questions</title>
<script language="javascript">
function show(name) {
document.getElementById(name).style.display = 'block';
}
</script>
</head>
а теперь css:
BODY {
font-size: 18pt;
color:#000fff;
font-family: Helvetica;
margin: 0 9 9 9;
}
table {
font-size: 8pt;
color:#525252;
font-family: Helvetica;
margin: 0px;
border-collapse: separate;
}
th {
font-size: 10pt;
text-align: left;
color:#550055;
font-family: Helvetica;
border-color: #999;
border-width: 0 0 1px 0;
border-style: dotted;
}
td {
font-size: 10pt;
text-align: left;
color:#550055;
font-family: Helvetica;
border-color: #999;
border-width: 0 0 1px 0;
border-style: dotted;
}
.left {
display:inline-block;
font-size: 10pt;
color:#990055;
font-family: Helvetica;
margin: 0 0 5 0;
}
.right {
display:inline-block;
font-size: 18pt;
font-weight: bold;
float: right;
color:#525252;
font-family: Helvetica;
margin: 0px;
}
.question {
display:inline-block;
font-size: 18pt;
font-weight: bold;
float: right;
color:#B452CD;
font-family: Helvetica;
margin: 0px;
}
РЕДАКТИРОВАТЬ 2
Хорошо, я добился определенного прогресса. Предложение firebug было действительно хорошим. Я видел, что ссылка на файл CSS читается как китайские символы. Это была проблема кодирования UTF, поэтому я просто открыл свои файлы в текстовом редакторе, а затем сохранил их как UTF-16.
Но теперь он считывает неверные данные из файла css! Я загрузил файл css ниже, но в firebug он показывает два лайнера.
Я нахожу это озадачивающим!
Ответы
Ответ 1
-
Вы уверены, что таблица стилей загружена? Вы можете увидеть его, используя вкладку "Сеть" Firebug на firefox или на вкладке "Сеть" консоли консоли вашего браузера.
-
(Если 1 работает), у вас может быть простой стиль образца и посмотреть, будет ли он применяться (и видимым в консоли)?
Ответ 2
Try:
<link type="text/css" rel="stylesheet" href="http://fakedomain.com/smilemachine/html.css" />
Если это не работает, убедитесь, что URL-адрес доступен, а контент - то, что вы ищете.
Ответ 3
Может быть, у вас есть ошибка в вашем файле CSS? Скобка закрыта, отсутствующая точка с запятой и т.д.
Ответ 4
Firefox может отклонить таблицу стилей, если она не подана с типом контента "text/css". (Это отдельно от объявления 'type="text/css"'
в HTML.)
Ответ 5
У меня была такая же проблема - я изменил текстовую кодировку на UTF-16 в моем индексном файле, и мой файл css будет отображаться пустым, когда я попытаюсь загрузить страницу в браузере. Я понял много проб и ошибок, что ваши html и css файлы должны иметь одинаковую кодировку! Я не знаю, будет ли это работать для вас, но это было для меня.
Ответ 6
Скопируйте URL-адрес файла css и вставьте его в свой браузер. Если он не загружает файл, как вы знаете, проблема находится в URL-адресе.
Ответ 7
I таблица стилей может не загружаться по нескольким причинам. Но основной подход к решению такой проблемы заключается в следующем:
1. После загрузки страницы нажмите F12
, чтобы открыть Консоль разработчиков. Проверьте консоль на наличие зарегистрированных ошибок.
2. Затем вы должны проверить вкладку "Таблицы стилей" и просмотреть список таблиц стилей, загруженных браузером.
3. URL-адрес, который вы используете в своем теге HTML link
, может быть недоступным, поэтому вручную попробуйте посетить таблицу стилей с помощью браузера и посмотреть, все ли отображается правильно.
4. Любая опечатка внутри вашей таблицы стилей HTML или CSS может привести к загрузке таблицы стилей.
5. Проверяйте наличие ошибок фатальной ошибки перед тегом <link>
. Неустранимая ошибка может остановить исполняемый код и приостановить страницу, не включая таблицу стилей.
Надеюсь, что это поможет.
Ответ 8
Я не думаю, что проблема заключается в том, что вы опубликовали, - нам нужно будет увидеть CSS или проверить его местоположение и т.д.!
Но почему бы не попробовать удалить его до одного правила CSS - поместите его в раздел HEAD, а затем, если он будет работать, переместите это правило во внешний файл. Затем повторите введение других правил, чтобы убедиться, что ничего не пропало или не имеет приоритета над вашим CSS.
Ответ 9
У меня была такая проблема! Я смог исправить это после
Шаг 1 → из сообщения Abraar Arique, я зашел в консоль → Зашел в Редактор стилей и нашел, что Firefox не загружает обновленную копию моего файла css.
Я очистил всю историю и перезагрузил страницу, тогда моя проблема была исправлена.
Ответ 10
Я столкнулся с той же проблемой, но причина заключалась в том, что стиль в css завернут в идентификатор, который не существует
#navi ul{
color: red;
}
Селектор #navi
нигде не содержится в HTML, потому что я забыл добавить его перед написанием CSS.
в моем случае я работал с файлом Less, поэтому я вложил его в это
#navi{
ul{
color:red;
}
}
Я надеюсь, что эта помощь поможет пересмотреть, когда что-то не работает.
Ответ 11
Новый для вас Ребята!
Во время моего процесса Gulp minification
<!-- build:css /css/project-mini.css -->
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/splash.css"/>
<link rel="stylesheet" href="css/header.css"/>
<link rel="stylesheet" href="css/print.css" media="print"/>
<!-- endbuild -->
Последний файл CSS был для печати, и сгенерированный вывод дал мне
<link rel="stylesheet" href="css/project-mini.css" media="print"/>
Итак, из-за media = "print" все правила CSS были пропущены!
Ответ 12
Моя простая мысль, что вы пропустили type="text/css"
.
Ответ 13
URL http://fakedomain.com/smilemachine/html.css
в тэге <link>
неверен. Файл не найден.
Ответ 14
Если ваш URL-адрес работает и загружает файл правильно, и вы сказали, что добавление правильного
<link rel="stylesheet" type="text/css" href="yourlink.css">
код не исправляет его, тогда единственная другая проблема заключается в том, что это ошибка в фактическом .css файле. И, чтобы сообщить вам об этом, нам нужно будет увидеть файл.
Что вы можете сделать, это написать один базовый тег <div>
в свой HTML, добавить основное правило CSS в существующий файл, а затем посмотреть, можете ли вы повлиять на этот тег с помощью нового правила CSS.
Ответ 15
У меня была такая же проблема, китайские символы появлялись в firefox при загрузке на веб-сервер, но не на localhost. Я скопировал содержимое файла css в новый текстовый файл. Теперь все работает. Должна быть некоторая ошибка в кодировке Unicode/encoding.
Ответ 16
У меня была такая же проблема с тем, что css не работал, позже я узнал, что это мои строки @media в css, которые вызывают проблему.
Я переместил их в конец css, и все было разрешено.
Ответ 17
У меня есть еще один. Я назвал свой файл css: default.css. Он не загрузится. Когда я попытался просмотреть его в браузере, он показал пустую страницу.
Я изменил имя на default_css.css и начал работать.
Ответ 18
-
У меня была та же проблема, и я использовал кодировку UTF-8 для обоих моих файлов следующим образом:
добавить @charset "UTF-8";
в файле CSS и <meta charset="UTF-8">
в <head>
в файле HTML. и это сработало для меня.
он делает одинаковую кодировку для обоих файлов, т.е. HTML и CSS.
Вы также можете сделать то же самое для кодировки "UTF-16".
-
Если он все еще не работает, проверьте наличие <link type="text/css" rel="stylesheet" href="style.css"/>
в <head>
в файле HTML, где следует указать type="text/css"
Ответ 19
Я использую Wordpress, и таблица стилей была поставлена в очередь в нижний колонтитул
wp_enqueue_style(
'editor-css',
$stylesheet_directory_uri . '/assets/css/editor.css',
['wp-edit-blocks'],
null,
true // $in_footer
);
}
Это привело к добавлению атрибута media="1"
к тегу <link>
, в результате чего таблица стилей была загружена, но не применена.
Изменил параметр на false и теперь он работает