Почему html не видит css

html файл не видит css документа ну или просто не читает его [закрыт]

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 3 года назад .

Пробовал перекидывать из папки с русскими символами в папку без

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

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

• Вопрос задан более трёх лет назад
• 93436 просмотров

2 комментария

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

А линк сам в хедере находиться?

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

Решения вопроса 1
Kisumi @Kisumi Автор вопроса
Написала полностью идентичный код, но в другом файле — заработало. Понятия не имею, что это было
Ответ написан более трёх лет назад
Я думаю дело было в кодировке файла style.css
Ответы на вопрос 14

Куплю мозГ

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

Только скобки добавь

Ответ написан более трёх лет назад
Нравится 3 1 комментарий

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

Вперед и вверх
style.css случайно в реальности не style.css.txt ?
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
начинающий веб разработчик

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

Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать

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

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать

с виду всё верно. попробуйте посмотреть в сторону прав или путей, правильности названий.
Ответ написан более трёх лет назад
Kisumi @Kisumi Автор вопроса
в том-то и дело, что названия правильные и в путях не может быть ошибка, т.к. в одной папке лежат

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

Ответ написан более трёх лет назад
Kisumi @Kisumi Автор вопроса
Открывается документ, все там нормально и в порядке

JavaScript Developer

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Я думаю дело в кодировке файла style.css
Ответ написан более трёх лет назад
ProstoErik @ProstoErik
Реально допомогло дякую.

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

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

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

Ответ написан более двух лет назад
Комментировать
Нравится Комментировать

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

Ответ написан более года назад
Комментировать
Нравится Комментировать
Обновите страницу Ctrl + F5
Ответ написан 04 апр. 2023
Комментировать
Нравится Комментировать
Matilda-kot @Matilda-kot

У меня сохранялась эта проблема до тех пор, пока я использовал абсолютную ссылку на css файл.
html и css файл лежали в одной папке. После того как я указал в href=просто название css файла (т.е. относительную ссылку), у меня все заработало.

Ответ написан 05 окт. 2023
Комментировать
Нравится Комментировать

Тема давняя, столкнулся с такой же проблемой, почитал что тут писали, ничего не помогло. Только учусь верстке, но нашел решение проблемы.
Файл style.css лежит у меня в папке css, папка с версткой лежит в ещё одной папке, прописывал

href ../css/style.css

было так
href ..» показывалось верно, останавливая лайв сервер всё шло плохо.
Ответ написан 18 дек. 2023
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

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

• Веб-разработка
• +2 ещё

Что тут задача фронтенда, а что бэкэнда?

• 1 подписчик
• 2 часа назад
• 81 просмотр

Как подключить CSS файл к HTML странице?

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

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца

красным цветом.

       
Абзац
   

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента

.

       
Абзац
   

Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type=»text/css». Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

    p     
Абзац
   

3 вариант. Подключение внешнего файла стилей.

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

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

        
Абзац
   

Файл style.css содержит следующих код:

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

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

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

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

• Кэширование браузера
• Кэширование на хостинге или на сайте
• Ошибки в коде
• Не правильно выбранный селектор
• Приоритеты стилей
• Как поднять приоритет стилей?
• Видеоинструкция

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

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

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

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

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

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

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

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

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

Ошибки в коде

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

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

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

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

О том, как можно вычислить класс или идентификатор того или иного блока на сайте я рассказывала в отдельной статье с видеоинструкцией:
Изменение темы WordPress. Определение Class и ID

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

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

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

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

. site — branding < border : 1px solid red ;

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

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

О приоритете стилей я расскажу чуть ниже.

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

background : red ;

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

Приоритеты стилей

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

В чем здесь может быть причина?

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

1. На первом месте по приоритету стоят идентификаторы. Когда у вас на сайте есть блок, для которого написано ID и далее идет название идентификатора.

В CSS это будет выглядеть следующим образом:
font — size : 40px ! important ;

В CSS это выглядит так:
. site — branding < font - size : 40px ; div , span , h1 < font - size : 40px ;

Как поднять приоритет стилей?

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

Сделать это можно двумя способами:

1. Можно воспользоваться правилом !important. Выглядит это следующим образом:

Давайте рассмотрим это на примере. Возьмем тот же блок site-branding и при помощи инспектора кода видим, что он находится в теге , который имеет идентификатор masthead.

Копируем этот идентификатор, и перед названием класса ставим решетку, вставляем название идентификатора и ставим пробел:

#masthead . site-branding<

Данное css-свойство будет работать для блока с классом site-branding, находящегося внутри блока с идентификатором masthead.

Задавая вот такие длинные селекторы, мы тем самым поднимаем приоритет наших стилей.

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

body #masthead . site-branding< background : red ;

Указанные здесь CSS стили должны будут работать для всех блоков с классом site-branding, которые находятся внутри блока с идентификатором masthead, которые, в свою очередь, находятся внутри тега .

Так же более высокий приоритет имеют стили, в которых объединено несколько селекторов. Когда одно css-задается не для одного элемента, а сразу для нескольких.

body #masthead .site-branding, #masthead, .shadow-4 < font - size : 40px ;

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

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

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

Так же помимо перечисленных здесь причин и приемов их устранения могут быть и другие ситуации, когда определенные стили для тех или иных элементов могут просто не срабатывать. Это связано с тем, что в CSS есть такое понятие как строчные элементы, блочные элементы, табличные элементы, и есть определенный набор CSS-свойств, который работает только для блочных элементов, и не работает для строчных. Либо работает только для строчных и не работает для остальных и так далее.

Все это довольно обширная тема и более подробно об этом я как-нибудь расскажу в одной из отдельных статей.

Видеоинструкция

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

Я желаю вам успехов в создании и продвижении ваших проектов! Если данная статья была для вас полезна не забывайте оставлять комментарии и делиться статьей в социальных сетях.

До встречи в следующих статьях!

С уважением Юлия Гусарь