Не отображается стили css

How to Fix CSS not working with VS Code

One annoying that comes up when working on front-end or web designs, the CSS does not seem to work when working with VS Code.

In this post, I will go over various problems that you can encounter and the possible fixes.

Steps to troubleshoot CSS loading issues in VS Code:

1. Check that we have linked the right CSS file and using the correct path
2. Check the file extension
3. Review the link syntax and the CSS file and make sure it is valid
4. Use browser (eg Chrome) DevTools to clear cache and check for errors

1. Check that we have linked the right CSS file and using the correct path

The most common problem with CSS not working with any editor (such as VS Code) is that we are using relative paths and got the path wrong!

• / — This means the root directory
• ../ — This means going up on directory
• ./ — This means the current directory (if you are working off the current directory, you may not need this — just use the file name)
• ../../ — This means going up two directories

Lets say we got the following basic folder structure

We can reference each of the files as below:

👉 Tip: Use Live Server in VS Code!

If you are coding with VS Code, then using the Live Server extension is a must. When you are just coding locally without a local server running, references to images can get a bit confusing.

For example, if you use the root directory / — this could mean your actual C:/ root folder instead of the current folder!

Live server can be downloaded here: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

2. Check the file extension

One issue that can trip some people up is that the file names can be case insensitive. This will be based on the serve that is hosting your website.

With most Unix based servers (Linux, or OSX), the files are case sensitive. While on Windows servers, they are not.

As an example, if you are hosting with Apache on Ubuntu it does not care about your filename/ extension

In the example below, lets say we have stylesheet file called style.CSS , the second line will not load the CSS due to the all caps CSS extension

3. Review the link syntax and the CSS file and make sure it is valid

Commonly, we can link to a external stylesheet with the following syntax:

• keep the tag within the element. We can put it in the body, but best practice is to place it in the head section
• Check that we include the rel=»stylesheet» — verify the spelling!
• make sure to also have the correct type ( type=»text/css» ). This helps defines the type of the content. Having incorrect type could lead to the CSS not loading!
• Check that you are not specifiying incorrect media

It is best to ignore the media attribute and use media queries in your CSS.

👉 Tip: Use CSS validation services to check your CSS

Sometimes your CSS will not load might be due to malformed code (eg missing brackets, etc). Use tools like https://jigsaw.w3.org/css-validator/ to check!

4. Use browser (eg Chrome) DevTools to clear cache and check for errors

A common reason why you cant see your CSS changes is that the browser is caching the CSS.

What I usually do is to open up dev tools (Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux)) and tick the “Disable Cache (while DevTools is open)”

This way we can ensure that our code is using the most up to date CSS.

Additionally, you can check if your CSS file is loading correctly by inspecting the console in DevTools. Usually if it is not showing, we can see a 404 error:

Summary

In this post, I went over some problems when loading external CSS files using VS Code and ways to fix them. The most common issue is using relative paths and getting the location wrong.

I would suggest to use absolute paths and use the VS Code Live Server extension to get around these issues.

We also need to check that our syntax and CSS is valid — correct spelling and not missing any brackets.

Finally we can check that the browser is not loading a cached version of our CSS. I would suggest to turn DevTools and check on the option of “Disable Cache (while DevTools is open)”!

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

Не подключается CSS, в чем может быть проблема?

Не подключается CSS, более того, не могу задать стили даже в самом HTML. Пробовала и различные коды подставлять, взятые из учебников, мало ли, может я чего не правильно в этом плане делаю, и под разными браузерами страницу сайта открывала — результата вообще никакого, надпись черным по белому, никакого фона, никакие картинки не вставляются. Подскажите, что еще можно сделать в таком случае?

Абстрактно Вам сложно помочь.Код страницы пришлите и код таблицы стилей, которая не подключается. И второе на Вашем локальном компьютере работает? — 8 лет назад

в файле main.css прописано
h1

Но ничего не происходит — 8 лет назад

stylesheet — какая то буква неверно написана
Вставьте вот эту строку копированием:

И вообще если проблемы копируйте строки с кода работающего сайта.Буквы визуально одинаковые, но легко ошибиться и ляпнуть русскую вместо латинской.
Распространенные ошибки. Используют в названии файлов заглавные буквы.Для винды побарабану, а для nix- систем под которыми сервера пашут это могут быть разные файлы.Чтобы не искать ошибки всегда используйте в названиях файлов и картинок только маленькие латинские буквы. — 8 лет назад

Если у вас не подключается CSS к Web-странице, то причин может быть несколько. Рассмотрим их по очереди.

Неверный HTML-код, описывающий таблицу стилей.

Стили CSS подключаются с помощью тега «Link» в теге «Head». Правильное описание:

Как правило, файлы с CSS хранятся в отдельной папке, поэтому в описании перед именем файла нужно указывать соответствующий каталог.

Например, href = «Styles/style-table.css».

Несоответствие пути файла, указанного в описании таблицы стилей CSS, реальному расположению файла.

Если у вас сложная структура на сайте, то иногда можно запутаться с уровнями вложенности.

Например, файл с таблицей стилей CSS лежит в отдельном каталоге, расположенном в корне сайта:

Вы подключаете его в файле, расположенном в подкаталоге:

Так вот, нужно писать в пути файла href = «../Styles/style-table.css», а не href = «Styles/style-table.css».

Ошибки в файле CSS

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

Источник

Почему не подключается CSS в HTML (код написан верно)?

Файл style.css находится в одной папке с HTML файлом, синтаксис в обоих файлах соблюден (дебаг запускался в двух источниках, нет ошибок).
Не работает
Работаю в WebStorm, сегодня ОС на 8.1 Windows сменила.
Через работает.
В чем причина может быть?

Оценить 2 комментария

Давид Габриелян: А это как раз не важно. Браузеру все равно, а Google PageSpeed наоборот рекомендует лишний css убирать из заголовка. Да, не валидно, зато быстрее работает.

Попробуй так link rel=»stylesheet» type=»text/css» href=»style.css»

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

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

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

Открывается ли CSS-файл по прямому URL в browser-е?
То есть вы открываете свой HTML по пути типа «file://всякая хрень/index.html», а если заменить «index.html» на «style.css», что будет?

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

Столкнулся с такой же проблемой. Решение оказалось проще ,чем я думал.Просто поменял последовательность и все заработало.

Та же проблема. Все указано корректно, но в Opera он обновлял введения в CSS спустя какое-то время, а в Google Chrome — сразу. Как вариант — измените браузер.
Изначально проблема моя в том, что я сайт делал на локальном сервере Open Server, а файлы были .php, с расширением html всё работало, но тогда php не реализовать

Все траблы из-за браузеров — сбрасывайте настройки браузеров, или стирайте браузеры и вновь устанавливайте.

Войдите, чтобы написать ответ

Нормально ли создавать таксономию категорий для фильтрации товаров?

Источник

Не отображаются стили css на хостинге

Анна Бодрова Ученик (185), закрыт 2 года назад »/>

Ребят, возникал такая проблема.. Когда залила файлы на хостинг, не отображаются стили css. В локальном режиме все показывает как надо, а через хостинг- только голый html. Причем расположение папок и путей к ним не меняла. На 1ом фото- на лок. (все ок), на 2ом- на хостинге.. Подскажите, пожалуйста, в чем дело и как можно исправить

————————————————
Может проблема в правах доступа к папкам? Может нужно подредактировать (что-то дописать) в файл .htaccess ?
А возможно дело в самом хостинге (использую hostinger )

————————————————
Ребят, всем спасибо за советы, проблема решена))
Barbara Straizands был прав 🙂

Не в хостинге дело, не в htacess.
Можете связаться со мной в мейл агенте и поблагодарить ста рублями. Дело в том, что у вас style написан с маленькой буквы, а надо с большой Style1.css и так с другими

Источник