Почему не применяются стили css

Не применяются css

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

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

Если неизвестно из какого файла берутся стили сайта, то это можно посмотреть в исходном коде страницы (в большинстве браузеров вызывается через ctrl+u):

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

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

Но иногда изменения стилей не применяются, это может происходить по нескольким причинам:

Изменения на самом деле применились,но результата не видно из-за не обновленного кеша веб браузера. Всегда после изменения стилей необходимо делать очистку кеша через ctrl+F5.

У меня на мобильном телефона в веб браузере chrome часто бывает такой глюк: даже после очистки кеша сайт отображается неправильно. Берешь телефон друга, открываешь на нем сайт — там изменения применены. А на твоем телефоне, даже после очистки истории — нет.Вообще для проверки изменения в стилях удобно использовать режим инкогнито, в нем браузер не сохраняет кешированные версии сайта у себя в памяти, а все время делает загрузку с веб сервера.

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

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

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

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

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

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

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

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

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

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

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

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

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

Ошибки в коде

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

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

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

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

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

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

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

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

Не работают CSS стили

Добрый день. Пытаюсь внедрить новое меню на сайт и естественно оформляю его через CSS.

Но почему-то стили не срабатывают.

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

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

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

7 ответов

• популярные
• новые

alt=»Евгений» />Евгений Партнер-эксперт Партнер-разработчик 11 декабря 2018 22:56 #

Кеш чистите в браузере? CTRL+F5?

Конечно, и в браузере и в бэкэнде.. Не помогает.

Код выглядит так:

HTML

CSS

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

Решилась ли Ваша проблема тогда?

Сейчас столкнулась точно с такой же ситуацией.

Тоже пытаюсь прописать свою стили для верхнего меню, и они не применяются.

Ни !important, ни очистка кэш, ни замена тэгов-ничего не помогло.

По разному пыталась вставить пункты меню, и через специальные блоки, и напрямую в шаблоне-все тщетно..

Если Вы разобрались с данной ситуацией-подскажите пожалуйста решение.

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

Посмотрите реализацию на сайте www.stylist-shop.ru, если увидите что-то подходящие, кодом с радостью поделюсь!

Красивый сайт у Вас какой!

Написала разработчикам темы, стили перестали работать после обновлений, скорее всего, ошибка на их стороне.

Перестаньте использовать !important. Помогаем разобраться с каскадом CSS

Когда CSS-правило не работает, многие разработчики хотят добавить !important и забыть о проблеме. Рассказываем, почему так делать не стоит и как правильно работать с CSS.

Почему CSS-правило может не работать?

Когда браузер загружает веб-страницу, он собирает все CSS-правила, которые встречает: из внешних файлов, напрямую указанные в HTML-коде, добавленные с помощью JS. У каждого правила есть селектор, которые говорит к каким HTML-элементам его надо применять. Часто так случается, что один и тот же элемент получает не одно правило, а два и больше. И иногда эти правила даже относятся к одним и тем же свойствам.

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

Так как понять, какое CSS-правило «главнее»?

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

Но вернёмся к !important . Это магическое слово сразу же поднимет приоритет вашего CSS-правила до небес. Но так всё равно лучше не делать, потому что:

• так код сложнее поддерживать (если с вашим кодом будет работать человек, который знает, как строится каскад стилей, он не сможет ничего нормально написать как бы ни старался),
• надо постоянно использовать !important и дальше.

Зачем же всё таки иногда нужен !important?

• Чтобы переписать inline-свойства. Нужно редко, но иногда пригождается.
• Чтобы переписать !important сторонней библиотеки. Если её разработчик по какой-то причине его использовал. Возможно как раз потому, что не понимал каскад.
• Для прототипирования. Чтобы быстро прописать новые стили, вывести их наверх каскада, посмотреть результат и если всё устраивается — переписать правильно.

Как работает каскад CSS?

Общий принцип прост: «Чем специфичнее правило — тем выше оно в каскаде». Например, у нас на сайте в списке статей на главной каждый пост — это контейнер с классом box. У него прописан стиль

Это правило добавляет красивую рамку. Но в тёмной теме это бессмысленно, ибо на тёмном фоне тёмная рамка не нужна. В тёмной теме и так достаточно контраста.

Мы добавили правило

И прописали у тега body (родительский тег для всего контента вообще на сайте) класс dark.

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

Каскад CSS

1. Важность

Первая ступень каскада рассматривает тип правила.

Есть четыре уровня типов:

1. transition (переход). Правила, которые применяются к активному переходу, имеют первостепенную важность.
2. !important . Если поставить !important в конце правила, оно перейдёт на этот уровень каскада. В идеале вы должны использовать !important только для переопределения inline-стилей или других !important из сторонних библиотек.
3. animation (анимация). Правила, применяющиеся к активной анимации, повышают уровень в каскаде.
4. normal . На этом уровне находится основная часть правил.

Как видите, эти типы обеспечивают корректную анимацию элементов. Если оба правила относятся к одному уровню, приоритет определяется на другой ступени каскада.

2. Происхождение

Вторая ступень смотрит, где определено правило.

Таких мест может быть три (расположены в порядке приоритета):

1. Веб-сайт. Единственный уровень, который вы можете контролировать как веб-разработчик.
2. Пользователь. Стили, которые пользователь подключает через настройки браузера.
3. Браузер. У каждого браузера есть свой набор стилей — например элемент <button> всегда использует стиль браузера по умолчанию.
   Так выглядит кнопка в вашем браузере

Примечание Важно! Иерархия для правил с !important здесь работает наоборот: !important -правило браузера выигрывает у !important -правила веб-сайта, тогда как обычные правила сайта превосходят правила браузера.

3. Специфичность

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

1. inline . Стили, объявленные в HTML-свойстве style , обладают наибольшей специфичностью.
2. id . Можно использовать идентификатор (синтаксис #id ) для определения стиля конкретного элемента.
3. класс | атрибут | псевдокласс . Определять стиль элемента также позволяют классы (синтаксис .class ). Этот уровень включает селекторы HTML-атрибутов, например [checked] или [href=»https://wattenberger.com»] , и псевдоклассы, такие как :hover и :first-of-type .
4. тип | псевдоэлемент . Тип тега (синтаксис type ) тоже используется для определения стиля элементов. Сюда же входят псевдоэлементы вроде :before и :selection .

Стоит отметить, что здесь имеет значение число «вхождений» в какой-либо уровень.

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

4. Позиция

Последняя ступень каскада смотрит на порядок определения правил.

Всегда побеждает то правило, которое объявлено позже (при условии, что всё остальное в каскаде одинаково).

Когда в следующий раз вам захочется написать волшебное слово !important , лучше притормозите, оглянитесь назад и выясните, на каких ступенях каскада находятся конфликтующие стили. А ещё можете почитать спецификацию CSS.