Почему не подключаются стили css

Почему не подключаются стили css в html

Не работают css-стили

В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.

Навигация по статье:

Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.

Кэширование браузера

Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.

Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.

Кэш браузера здесь очищается следующим образом:

  1. 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
  2. 2. Находим пункт «История» =>«История»

Чистка кэше браузера

Как очистить кэш в Google Chrome

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

Кэширование на хостинге или на сайте

Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.

Ошибки в коде

Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.

Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.

Не правильно выбранный селектор

Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.

Селектор в css-стилях

Как же всё таки определить правильно ли вы указали селектор или нет?

Я в таких случаях использую один очень простой прием, который называется задание красной рамки.

К примеру, я хочу изменить стили для блока на сайте.

    1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.

HTML-файл не подключается к CSS

Привет, ребята, я просто создаю простую веб-страницу для класса, но по какой-то причине мой html-файл не подключается к моему файлу css, он находится в той же папке и всем остальным. Любая помощь будет оценена.

5 ответов

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

Во-вторых, проверьте структуру папок и убедитесь, что вы следуете правильному пути к файлу CSS.

Тогда, если вы используете код VS. Вы можете просто щелкнуть ! (восклицательный знак), и вы можете выбрать предварительно созданную HTML-страницу, которая поможет вам начать работу с правильной структурой.

Причин может быть несколько:

  1. Ваш тег "ссылка" не должен находиться внутри тега "заголовок".
  2. Убедитесь, что ваш файл css находится в том же каталоге, что и файл html, и проверьте, совпадает ли имя файла.
  3. Проверьте свой файл css

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

С этим есть проблемы:

  1. Тег ссылки не должен входить в тег заголовка. Держите их отдельно, но в голове.
  2. Атрибут типа в теге ссылки не требуется. Постарайтесь, чтобы все было просто.
  3. Проверьте имя файла CSS. Может быть иначе.

Вот ваш исправленный код:

В вашем коде все нормально. Есть небольшая ошибка — внести изменения и насладиться. 1) Удалите ссылку (CSS) из заголовка. 2) Имя вашего класса — tab-content, но вы записываете его в этот список в файле CSS. 3) класс представлен точкой (.), А идентификатор представлен хешем (#)

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

Как уже говорили другие <title></title> ожидает и принимает только обычный текст, поэтому ваша ссылка становится недействительной и отображается как таковая на вкладке вашего браузера.

Хеши для идентификаторов и. для классов, поэтому я удалил их, поскольку в вашем HTML-файле нет идентификаторов. Когда ваш файл.css уже устанавливает фоновое изображение, вам не нужно дважды кодировать его в HTML. Таким образом код выглядит чище и может предотвратить будущие ошибки.

Полный список причин, по которым css файл может не работать

Эта проблема заставляет меня чувствовать себя абсолютным noob.

Вот глава моего .html файла:

И мой файл html.css действительно там, где он должен быть. Но у меня совсем нет стиля. Помогите!

И, пожалуйста, не голосуйте, потому что ответ очевиден, и я не вижу его.

РЕДАКТИРОВАТЬ 1

Хорошо, теперь я просто пытаюсь решить проблему локально на своей машине. Вот глава:

РЕДАКТИРОВАТЬ 2

Хорошо, я добился определенного прогресса. Предложение firebug было действительно хорошим. Я видел, что ссылка на файл CSS читается как китайские символы. Это была проблема кодирования UTF, поэтому я просто открыл свои файлы в текстовом редакторе, а затем сохранил их как UTF-16.

Но теперь он считывает неверные данные из файла css! Я загрузил файл css ниже, но в firebug он показывает два лайнера.

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

ОТВЕТЫ

Ответ 1

Вы уверены, что таблица стилей загружена? Вы можете увидеть его, используя вкладку "Сеть" Firebug на firefox или на вкладке "Сеть" консоли консоли вашего браузера.

(Если 1 работает), у вас может быть простой стиль образца и посмотреть, будет ли он применяться (и видимым в консоли)?

Ответ 2

Если это не работает, убедитесь, что URL-адрес доступен, а контент &#8212; то, что вы ищете.

Ответ 3

Может быть, у вас есть ошибка в вашем файле CSS? Скобка закрыта, отсутствующая точка с запятой и т.д.

Ответ 4

Firefox может отклонить таблицу стилей, если она не подана с типом контента "text/css". (Это отдельно от объявления &#8216;type="text/css"&#8217; в HTML.)

Ответ 5

У меня была такая же проблема &#8212; я изменил текстовую кодировку на UTF-16 в моем индексном файле, и мой файл css будет отображаться пустым, когда я попытаюсь загрузить страницу в браузере. Я понял много проб и ошибок, что ваши html и css файлы должны иметь одинаковую кодировку! Я не знаю, будет ли это работать для вас, но это было для меня.

Ответ 6

Скопируйте URL-адрес файла css и вставьте его в свой браузер. Если он не загружает файл, как вы знаете, проблема находится в URL-адресе.

Ответ 7

I таблица стилей может не загружаться по нескольким причинам. Но основной подход к решению такой проблемы заключается в следующем:

1. После загрузки страницы нажмите F12 , чтобы открыть Консоль разработчиков. Проверьте консоль на наличие зарегистрированных ошибок.

2. Затем вы должны проверить вкладку "Таблицы стилей" и просмотреть список таблиц стилей, загруженных браузером.

3. URL-адрес, который вы используете в своем теге HTML link , может быть недоступным, поэтому вручную попробуйте посетить таблицу стилей с помощью браузера и посмотреть, все ли отображается правильно.

4. Любая опечатка внутри вашей таблицы стилей HTML или CSS может привести к загрузке таблицы стилей.

5. Проверяйте наличие ошибок фатальной ошибки перед тегом <link> . Неустранимая ошибка может остановить исполняемый код и приостановить страницу, не включая таблицу стилей.

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

Ответ 8

Я не думаю, что проблема заключается в том, что вы опубликовали, &#8212; нам нужно будет увидеть CSS или проверить его местоположение и т.д.!

Но почему бы не попробовать удалить его до одного правила CSS &#8212; поместите его в раздел HEAD, а затем, если он будет работать, переместите это правило во внешний файл. Затем повторите введение других правил, чтобы убедиться, что ничего не пропало или не имеет приоритета над вашим CSS.

Ответ 9

У меня была такая проблема! Я смог исправить это после

Шаг 1 &#8594; из сообщения Abraar Arique, я зашел в консоль &#8594; Зашел в Редактор стилей и нашел, что Firefox не загружает обновленную копию моего файла css.

Я очистил всю историю и перезагрузил страницу, тогда моя проблема была исправлена.

Ответ 10

Я столкнулся с той же проблемой, но причина заключалась в том, что стиль в css завернут в идентификатор, который не существует

Селектор #navi нигде не содержится в HTML, потому что я забыл добавить его перед написанием CSS. в моем случае я работал с файлом Less, поэтому я вложил его в это

Я надеюсь, что эта помощь поможет пересмотреть, когда что-то не работает.

Ответ 11

Новый для вас Ребята!

Во время моего процесса Gulp minification

Последний файл CSS был для печати, и сгенерированный вывод дал мне

Итак, из-за media = "print" все правила CSS были пропущены!

Ответ 12

Моя простая мысль, что вы пропустили type="text/css" .

Ответ 13

URL http://fakedomain.com/smilemachine/html.css в тэге <link> неверен. Файл не найден.

Ответ 14

Если ваш URL-адрес работает и загружает файл правильно, и вы сказали, что добавление правильного

код не исправляет его, тогда единственная другая проблема заключается в том, что это ошибка в фактическом .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, и таблица стилей была поставлена в очередь в нижний колонтитул

Это привело к добавлению атрибута media="1" к тегу <link> , в результате чего таблица стилей была загружена, но не применена.

Не подключается внешний файл CSS

Не подключается внешний файл CSS,но если внести теже стили из CSS файла в html все работает, путь к файлу проверял несколько раз, все правильно. Почему стили могут не работать?

или что то не так с оператором? где я ошибся?

http://imgur.com/bgc1Gkr теперь выскакивает эта ошибка

Во первых почему в конце стоит слеш?
Должно быть:

Далее проверяем правильно ли указан путь, в начале стоит слеш, значит путь будет с корня сайта, например:

И если вы зайдёте по этому пути в браузере вы должны получить этот файл, так происходит?

И как получается что <link> у вас находится вместе с CSS, он должен быть в HTML документе, а если это так и есть, то остальной CSS должен быть в заключён в тег <style>

Так же стоит убедится в том что файл действительно залит на сервер удачно.

Далее обратите внимание на файл htaccess, возможно в нём что-то не так настроено.

Почему не работают CSS-стили?

Не работают css-стили

В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.

Навигация по статье:

Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.

Кэширование браузера

Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.

Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.

Кэш браузера здесь очищается следующим образом:

  1. 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
  2. 2. Находим пункт «История» =>«История»

Чистка кэше браузера

Как очистить кэш в Google Chrome

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

Кэширование на хостинге или на сайте

Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.

Ошибки в коде

Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.

Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.

Не правильно выбранный селектор

Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.

Селектор в css-стилях

Как же всё таки определить правильно ли вы указали селектор или нет?

Я в таких случаях использую один очень простой прием, который называется задание красной рамки.

К примеру, я хочу изменить стили для блока на сайте.

    1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *