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

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

Причем,если поменять значение в классе .head1 ,цвет поменяется ,с остальными классами так не работает. P.S. если есть мысли подскажите почему если файл CSS лежит в одной папке с HTML файлом,то подключается всё корректно, если же файлы находятся в разных папках то подключение файла не происходит.

Отслеживать
задан 30 авг 2021 в 13:13
Giorno Bonjorno Giorno Bonjorno
1 1 1 бронзовый знак
Работаю в редакторе Atom.
30 авг 2021 в 13:15

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

30 авг 2021 в 13:22
Также ; после фигурных скобок в CSS не нужны. Потому остальное и не работает.
30 авг 2021 в 13:23

Дело в том что путь указывал к другой папке ,в которой и лежал файл соответственно,в данном случае я уже оставил файл в той же папке где и HTML лежит.

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

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

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

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

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

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

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

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

Куплю мозГ

Попробуй так 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 апр.
Комментировать
Нравится Комментировать
Matilda-kot @Matilda-kot

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

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

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

• JavaScript
• +1 ещё

Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

• 1 подписчик
• 3 часа назад
• 28 просмотров

Как правильно подключить CSS к HTML

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

Настраиваем стили в HTML

В HTML есть несколько глобальных тегов:

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

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

В коде это может выглядеть так:

 
Какой-то контент
 
Еще какой-то контент
  p < color: red; >.text

Мы применили CSS к странице. Дополнительно прикреплять стили к нашему сайту не нужно.

inline-стили

Необязательно прописывать стили в отдельном блоке. Можно вовсе не использовать тег . Можно использовать одноименный атрибут.

Атрибуты представляют собой параметры, указываемые в HTML-элементах. class или id являются атрибутами. Если вы захотите поменять стиль для блока div, то после его класса нужно написать style и поочередно указать стили в формате CSS. В реальном коде это может выглядеть так:

  
Приветики
 
 

Мы указали свойство flex у div-элемента и поменяли цвет текста внутри на синий.

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Настраиваем стили в отдельном CSS-файле

Это наиболее распространенный метод подключения CSS к сайту или приложению. Он используется как при работе с классическим стеком HTML/CSS/JavaScript, так и при подключении фреймворков в духе React.

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

Стандартное подключение к HTML

Нужно в HTML-файле добавить метатег link. Метатег link – тип ссылки – адрес файла со стилями.

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

Подключение при помощи Webpack

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

Подключение к фреймворку React

В React используется стандарт ECMAScript2015. Для работы с CSS используется директива import.

Деление стилей на группы

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

Чтобы это сделать, можно воспользоваться любым из описанных выше методов, но повторить его несколько раз. Например, написать директиву import несколько раз, указав разные адреса. Или же добавить в список метатегов дополнительные ссылки на CSS-документы.

Подключаем чужие CSS-стили

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

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

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

Другие способы

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

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

Вместо заключения

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

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

Дизайн Web-страниц — это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера.

К компонентам страницы относятся:

• блоки текста
• графика
• встроенные приложения.

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

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

CSS (Cascading Style Sheets) позволяет полностью контролировать форму представления элементов HTML-разметки.

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

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

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

Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.

CSS (CascadingStyleSheets) — Каскадные таблицы стилей — это свод стилевых описаний, тех или иных HTML тегов (далее элементов HTML), который может быть применён как к отдельному тегу — элементу, так и одновременно ко всем идентичным элементам на всех страницах сайта.

2. Способы подключения CSS к HTML коду

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

Различают четыре способа применения стилей:

1. переопределение стиля в элементе разметки;
2. размещение описания стиля в заголовке документа в элементе style ;
3. размещение ссылки на внешнее описание через элемент link;
4. импорт описания стиля в документ.

Первые два способа заключаются в том, что CSS код будет написан прямо на HTML странице. Третий способ заключается в том, что CSS будет написан в отдельном файле и специальным образом подключен к нашей HTML странице. Третий способ используется гораздо чаще (в подавляющем большинстве случаев). С ним соперничает четвертый способ. Одновременно можно применять все четыре способа.

Давайте разберемся с этими способами более подробно.

CSS внутри атрибута style

Первый способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:

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

2 CSS внутри тега style

Второй способ заключается в том, что CSS код можно написать в теге &ltstyle> Его можно размещать как внутри &lthead> (чаще всего), так и внутри &ltbody>.

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

3 Отдельный CSS файл

Самый распространенный способ подключения CSS — это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.

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

Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию:

&ltlinkrel=»stylesheet» href=»путь к CSS файлу»>.

Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.

В следующем примере к нашему HTML файлу подключается CSS файл style.css:

Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css: