Подтвердить что ты не робот

Полный список причин, по которым 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 он показывает два лайнера.

Я нахожу это озадачивающим!

4b9b3361

Ответ 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

  1. У меня была та же проблема, и я использовал кодировку UTF-8 для обоих моих файлов следующим образом:

    добавить @charset "UTF-8"; в файле CSS и <meta charset="UTF-8"> в <head> в файле HTML. и это сработало для меня.

    он делает одинаковую кодировку для обоих файлов, т.е. HTML и CSS.

    Вы также можете сделать то же самое для кодировки "UTF-16".

  2. Если он все еще не работает, проверьте наличие <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 и теперь он работает