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

Приветствую вас на сайте Impuls-Web!

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

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

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

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

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

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

1. 1.В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
2. 2.Находим пункт «История» => «История»
   
3. 3.Далее, либо ставим галочку возле сайта, для которого вы хотите очистить кэш и нажав на значок с тремя точками, выбрать пункт «Удалить из истории»
4. 4.Или же вы можете очистить всю историю полностью, нажав на пункт «Очистить историю», и здесь нажав на кнопку «Очистить историю»
   

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

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

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

Ошибки в коде

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

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

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

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

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

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

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

1. 1.Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.
   
2. 2.Копирую название этого класса, перехожу в файл стилей и пишу здесь:
   
   PHP

   .site-branding{ border:1px solid red; }

   1 2 3

   .site-branding{ border:1px solid red; }

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

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

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

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

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

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

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

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

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

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

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

   В CSS это будет выглядеть следующим образом:

   PHP

   #masthead { font-size:40px!important; }

   1 2 3

   #masthead { font-size:40px!important; }

2. 2.На втором месте по приоритету стоят классы, когда для определенного блока написано class и далее в кавычках указывается один или несколько классов.
   

   В CSS это выглядит так:

   PHP

   .site-branding { font-size:40px; }

   1 2 3

   .site-branding { font-size:40px; }

3. 3.Самый низкий приоритет будет иметь тот селектор, в котором указано название тега.
   К примеру, div или span, или h1, или любой другой тег.
   PHP

   div, span, h1{ font-size:40px; }

   1 2 3

   div, span, h1{ font-size:40px; }

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

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

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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