Почему не применяется стиль из style.css?
Это может быть обидный вопрос, но я не специально, просто информации мало: а стили-то подключены?
link rel=»stylesheet» href=»styles.css», вот это вот все?
Ответ написан более трёх лет назад
Нравится 2 4 комментария
mr jeery @jeerjmin Автор вопроса
Почему не работают CSS-стили?
В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.
Навигация по статье:
- Кэширование браузера
- Кэширование на хостинге или на сайте
- Ошибки в коде
- Не правильно выбранный селектор
- Приоритеты стилей
- Как поднять приоритет стилей?
- Видеоинструкция
Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.
Кэширование браузера
Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.
Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.
Кэш браузера здесь очищается следующим образом:
- 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
- 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-стилями.
Я желаю вам успехов в создании и продвижении ваших проектов! Если данная статья была для вас полезна не забывайте оставлять комментарии и делиться статьей в социальных сетях.
До встречи в следующих статьях!
С уважением Юлия Гусарь
Почему не применяются мои стили из editor-style.css для классического редактора WordPress внутри админки?
Всем привет! Такой вот странный вопрос полный безумия и фантастики, не то что бы эти стили для редактора мне очень нужны, но как такое может быть. Чтобы я не делал, прописывая свои CSS стили в конец файла чтобы типа каскадирование работало или используя ! important или добавляя вес этим стилям, не важно все равно они никак не отображаются в редакторе, одному только богу известно почему, и тут еще самый безумный момент, файл стилей редактора 100% подключается и старые стили автора темы более или менее применяются, навряд ли с таким кто-то сталкивался да и этот файл обычно никому не нужен и все это похоже на бред сумасшедшего, ни на что не надеюсь, но мало ли может у кого было такое :-). Заранее всем спасибо за ответы!
На сайте с 05.10.2011
9 октября 2022, 10:57
Кэш чистить надо. А лучше поставить плагин вроде Prevent Browser Caching, чтоб вручную не заморачиваться.
www.cyberseo.net — первый плагин для создания автоблогов под WordPress, использующий искусственный интеллект GPT-4 и DALL·E 2 от OpenAI | www.wpadinserter.com — бесплатный WordPress плагин для вставки рекламы в ваши посты и страницы
На сайте с 01.07.2014
9 октября 2022, 21:58
AutoBlogger #:
Кэш чистить надо. А лучше поставить плагин вроде Prevent Browser Caching, чтоб вручную не заморачиваться.
Если вы о кэше браузера который кэширует css , то естественно я это делал, ctrl + f 5 вроде заставляет браузер Opera загружать все кэшируемые css файлы заново, но это не помогает. Забыл упомянуть что эти же самые стили нормально работают на сайте, но не в админке классического редактора, вот такая странная фигня, может быть на мне проклятье какое-то :-). Вот прикиньте вы делаете рамочку вокруг цитаты и на сайте она отображается, а в редакторе нет, все одно и тоже все классы на месте, файл css подгружен, ладно забейте это все равно не очень важно и видимо что-то у меня специфичное и баганутое или я слепой и что-то не вижу.
На сайте с 22.01.2021
9 октября 2022, 22:04
Dmitriy_2014 #:
и что-то не вижу
Мой форум — https://webinfo.guru –Там я всегда на связи
На сайте с 12.05.2007
10 октября 2022, 05:37
Dmitriy_2014 #:
файл css подгружен,
точно подгружен?
Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
На сайте с 22.01.2021
10 октября 2022, 06:15
totamon #:
точно подгружен?
Там же наверняка много составных селекторов, надо конкретные правила смотреть. Бесполезно рассуждать о таких вещах абстрактно.
На сайте с 01.07.2014
10 октября 2022, 07:16
totamon #:
точно подгружен?
Да вроде бы точно, Через функцию add _ editor _ style (‘ editor — style . css ‘);, в стандартном файле темы functions . php , со стандартным названием самого файла для стилей редактора — editor-style.css. В браузере для разработчиков в разделе Network в запросах отображается загрузка этого файла из директории темы, и на него можно нажать и открыть, ну типа ресурс загружен Status Code 200 OK . Немного странно он загружается если посмотреть исходный код страницы, не как обычно сверху, а внизу в JavaScript скрипте в виде подгрузки для tinyMCEPreInit , в mceInit , но ссылка там ведет на него и походу он подгружается.
На сайте с 22.01.2021
11 октября 2022, 18:06
Надо смотреть, в каком окне подгружаются стили — в основном или в айфрейме.
На сайте с 02.10.2007
11 октября 2022, 19:42
Установи стили через плагин для браузера Stylish, если они только для тебя, а не для посетителей. Или выложи здесь весь код, к какому селектору или тегу редактора ты хочешь прицепить стили, интересно стало попробовать.
На сайте с 05.10.2011
11 октября 2022, 21:08
Тогда Ctrl+Alt+I, наводите курсор на нужный кусок экрана — тот где что-то должно измениться и смотрите его реальные стили, а так же, из какого файла и из какой строки они туда попали. Вся нужная инфа показана справа. Там видны непосредственно те стили, которые браузер применяет к странице после того как они перемешались там, наложились, пять раз отменили друг-друга и т.д.
Не применяются CSS стили
Здравствуйте! Прохожу курс HTML,CSS. Возникла проблема при подключении. Делал всё как в уроке, но стиль так и не подключился, проверял ошибок в коде нет и в уроке там тоже у автора ошибка была, он исправил, у него подключился. Я последовал его примеру, исправил тоже эту ошибку но стиль так и не подключился.
.header < background-color: darkslateblue; height: 177px; font-size: 0,8em; margin-left: 0px; margin-right: 0px; min-width: 900px; >.main, .logo, .menubar, .site_content, .footer < margin-left: auto; margin-right: auto; >.logo
5 years ago
Похожие вопросы
- Слово киномонстр так и остается подчеркнуто и в синем цвете, как исправить?
- Все как в уроке сделано, а браузер не отображает изменений, как исправить?
- Укажите где именно я сделал ошибку и в чем она заключается?
- Не игнорте 42 урок (пробывал скачать исходник) не работает?
- Кнопка смотреть исчезает после стилизации, как исправить?
- Почему не подключается css к html?
- Не могу установить Footer
- Не изменяется страница, что делать?
- В уроке по html не пропускает задание с футером?
- Зависит ли от разрешения экрана то как потом будет выглядеть сайт?
5 ответов
Весь код покажите, а также проверьте, что верно подключили css-файл: нужно нажать в браузере ctr+u для того чтоб посмотреть html код и нажать на название файла, например style.css и если браузер напишет, что файла несуществует, значит неправильно подключили его
5 years ago
Вот код файла index.html
Document КиноМонстр
Кино-наша страсть!
5 years ago
Да браузер действительно его не видит. Спасибо
5 years ago
Ошибка скорее всего в названии файла
assets/css/stayle.css
А физически файл назван style.css
5 years ago
Спасибо вам большое. Помогло)
5 years ago
Ваш ответ
- Создается структура файлов в visual studio code, не так как в уроке, как решить эту проблему?
- Не работает emmet в visual studio code?
- Не проходит оплата россия карта mastercard и есть возможность узнать цену в рублях?
- Здраствуйте у меня вопрос такой как мы можем получить только name с помощью цикл foreach?
- Как в sublime text открыть 2 папки в одном окне? открывается еще одно окно sublime text?
- Хочу изучить javascript для работы с nodejs, какой минимальный уровень знаний нужен?
- Есть ли готовые коды к урокам?
- Как открыть исходный код веб-страницы на mac в браузере?
- Не добавляется запись из xml в бд, что делаю неправильно?
- Позиционирование логотипа по центру хедера как сделать?
- Какой правильный синтаксис медиа запросов css?
- Как установить xampp на windows 32-bit?
- Как задать фоновое изображение для шапки (header) в bootstrap 3?
- Как прижать footer к низу в bootstrap 3?
- Xampp или open server?
- Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.
Русский —>
- Отзывы о курсах FructCode
- Политика конфиденциальности
- Условия использования
- Цены и оплата
- Все курсы
- Партнерская программа
- Комьюнити
- HTML/CSS Advanced
- Bootstrap 4
- VueJS Фреймворк
- Yii2 Фреймворк
- Modern Javascript
- Javascript/jQuery
- Все курсы