Почему не подключаются стили css
Перейти к содержимому

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

  • автор:

Форум

Но стили не подключаются. Заметил одну странность, если добавить какой-то текст, например test то появляется и текст и стили. А если левый текст убрать, то стили не подгружаются. Объясните пожалуйста, что я делаю не так?

test SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/binotel.css");?>

Сообщений: 762 Баллов: 122 Регистрация: 28.10.2011
19.08.2017 22:16:46
Покажите полностью код в блоке
Битрикс и Битрикс 24 РАБОТА ВАКАНСИИ — https://t.me/bitrixworkrabota
Постоянный посетитель
Сообщений: 180 Баллов: 31 Регистрация: 11.06.2012
21.08.2017 07:38:45

Перед тем как подключать js и css в заголовок , проверь есть ли строка в основном шаблоне между тегами head:

ShowHead(); ?>

Посетитель
Сообщений: 73 Баллов: 5 Регистрация: 21.07.2014
21.08.2017 09:19:24

Спасибо за ответы.

Олег Колчугин, Как и просили выкладываю полностью код между

"> /images/favicon.ico?v=0.1"/> SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/main.css");?> SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/custom.css");?> SetAdditionalCSS("/lookbook/css/font-awesome.min.css");?> SetAdditionalCSS("/lookbook/css/jgallery.css");?> SetAdditionalCSS(SITE_TEMPLATE_PATH."/css/binotel.css");?> var siteID = ''; var langID = ''; var productsInBasket = ''; var errorMessage = ''; var errorMailMessage = ''; var templatePath = '';  AddHeadScript(SITE_TEMPLATE_PATH.'/js/jquery-2.2.4.min.js');?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/vendors.js');?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/catalog_section.js');?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/jquery.cookie.js');?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/custom.js');?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/vote_rating.js', true);?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/element_detail.js', true);?> AddHeadScript(SITE_TEMPLATE_PATH.'/js/jquery.elevateZoom-3.0.8.min.js', true);?> AddHeadScript('/lookbook/js/jgallery.min.js', true);?> ShowHead();?> ShowTitle()?>  !function(f,b,e,v,n,t,s) ; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)>(window, document,'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '_________________'); fbq('track', 'PageView'); Рустам, да, эта строка есть. 

Самое загадочное то, что другие css нормально подключаются и работают корректно, а проблема именно с этим css

Пользователь 132775
Постоянный посетитель
Сообщений: 180 Баллов: 31 Регистрация: 11.06.2012
#5
0
21.08.2017 12:19:41
А зачем использовать AddHeadScript непосредственно в самом header.php, если можно напрямую прописать?
Эта возможность сделана для компонентов, чтобы оттуда цеплять нужные файлы.
Блог о веб-разработке | Каталог сайтов
Пользователь 213326
Посетитель
Сообщений: 73 Баллов: 5 Регистрация: 21.07.2014
#6
0
21.08.2017 12:22:27
Рустам, вопрос хороший, я просто сделал по аналогии с предыдущими. Так было в шаблоне, я скопировал строку и добавил свой css. Я думал, это более правильный способ подключения, чем подключать напрямую. А он не хочет работать. Самое интересное, что если добавить просто какой-то текст, то текст выводится, а стили подгружаются.
Пользователь 209695
Эксперт
Сообщений: 790 Баллов: 134 Регистрация: 02.09.2013
#7
0
21.08.2017 13:26:45
Рустам, прописать напрямую можно, но тогда они не будут участвовать в оптимизации при соответствующих настройках битрикс.
https://va-soft.ru/
Есть проблема с ЧПУ умного фильтра. Голосуйте за идею решения
Пользователь 213326
Посетитель
Сообщений: 73 Баллов: 5 Регистрация: 21.07.2014
#8
0
21.08.2017 13:40:43
Александр Воробьев, к стати да, совсем забыл про оптимизацию css. Но в любом случае интересно почему оно сейчас не работает.
Пользователь 213326
Посетитель
Сообщений: 73 Баллов: 5 Регистрация: 21.07.2014
#9
0
21.08.2017 13:59:13
Подключил на прямую с помощью:
Код
  • Проблема та же. Стили не подгружаются но если добавить какой-то текст, перед этой строкой, то стили подгружаются. Вот так:

    test /css/binotel.css">

    Прикрепленные файлы

    • Screenshot_3.png (1.49 МБ)
    • Screenshot_1.png (1.41 МБ)

    Сообщений: 762 Баллов: 122 Регистрация: 28.10.2011
    21.08.2017 20:26:24

    Данный файл стилей только на данный блок влияет? Как вариант перенести листинг данного файла в custom.css или main.css или там достаточно большой и длинный листинг и специфический и его нужно обязательно держать в отдельном файле?

    Не подключаются стили

    Добрый день! Большая просьба помочь в чем проблема. Начиная с урока 4.3. не поменялся цвет фона в заголовке. Дошла до урока 4.17. картинка не меняется. Сверила несколько раз свои файлы index.html и style.css c исходными данными к уроку. Ошибок не нашла пока.

    КиноМонстр

    Кино - наша страсть!

    * margin: 0;
    padding: 0;
    >
    .header background-color: darkslateblue;
    height: 177px;
    font-size: 0.8em;
    margin-left: 0px;
    margin-right: 0pm;
    min-width: 900px;
    >

    .main, .logo, .menubar, .site_content, .footer margin-left: auto;
    margin-right: auto;
    >

    .logo width: 880px;
    padding-bottom: 40px;
    >

    .logo h1, .logo h2 font: normal 300% "century gothic", arial, sant-serif;
    margin: 0 0 0 9px;
    >

    .logo_text h1, .logo_text h1 a, .logo_text h1 a:hover padding: 22px 0 0 0;
    color: #fff;
    letter-spacing: 0.1em;
    text-decoration: none;
    >

    .logo_text h2 font-size: 0.9em;
    padding: 4px 0 0 0;
    color: #999;
    >

    .menubar width: 900px;
    height: 46px;
    >

    ul.menu li float: left;
    padding: 0 0 0 9px;
    list-style: none;
    margin: 1px 2px 0 0;
    >
    ul.menu li a font: normal 100% "trebuchet ms",sant-serif;
    display: block;
    height: 20px;
    padding: 6px 35px 5px 28px;
    color: #fff;
    text-decoration: none;
    >

    ul.menu li.selected a color: #aeb002;
    >

    ul.menu li a:hover color: #e4ec04;
    >

    Наталья Усольцева
    2 years ago

    У меня такая проблема была в уроке 4.3, билась два дня. Просто index.html существовал отдельно от Киномонстра и остальных папок. Это видно, если откроете проводник, на Рабочем столе. В этом случае перетащить index.html, зажав мышкой, в папку Киномонстр и сохранить как.

    Светлана Козачук
    2 years ago

    Спасибо за ответ, но, к сожалению, похоже у меня другая проблема. Файл лежит в нужной папке. Более того, часть стилей подключена: маркированный список ,кнопки "Ваш запрос" и "Найти", кое-какие изменения идут по мере написания тегов, но все без цвета и по левому располагается, абсолютно не соответствует мой вид тому,что показано в уроке. Ошибка думаю пошла с урока 4.3.

    Наталья Усольцева
    2 years ago

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

    2 years ago

    в CSS внесите для какого-то элемента изменения - например, цвет и посмотрите на странице эти изменения отобразятся?

    2 years ago

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

    Наталья Усольцева
    2 years ago

    если никаких изменений не происходит вообще при разных изменениях в CSS, значит CSS у вас не подключился. проверяйте путь к файлу style.css, возможно у вас файл сохранился куда-то в другое место. или index.html лежит не в той папке (корневой) откуда путь идет assets/css/style.css . Какие у вас на диске папки и где лежат файлы html и css?

    2 years ago

    путь к файлу стилей assets/css/style.css прописывается относительно месторасположения файла index.html

    т.е. файл index.html лежит в рабочей папке сайта /kinomonster/index.html

    а в этой папке созданы папки для стилей, т.е. assets/css/style.css

    если бы у вас например файл index.html лежал бы в папке /kinomonster/assets/index.html (так случайно сохранили), то ваш путь подключения css получился бы таким /kinomonster/assets/assets/css/style.css

    т.е. неверным, и нужно либо указывать путь относительно папки где index лежит, т.е. css/style.css

    либо перенести файл index туда где он должен быть /kinomonster/index.html

    Аналогично, если файл index.html лежит на рабочем столе и там же рядом лежит папка /kinomonster/ , то верный путь к css будет kinomonster/assets/css/style.css - так будет работать, или перенести файл index в папку /kinomonster/index.html

    2 years ago

    Я проверила путь с файлам, вроде все правильно. Но файл стилей не подключается все равно. Ссылки на скрины экрана прилагаю

    https://pastenow.ru/CI96W (для style.css)

    https://pastenow.ru/CI9AN (для index.html)

    Наталья Усольцева
    2 years ago

    Не открывалось по ссылкам еще продублировала.

    Наталья Усольцева
    2 years ago

    папку вы создали asseets

    а в коде прописали assets

    выберите какой-то один из вариантов, вообще правильно assets (англ. ресурсы)

    2 years ago

    Cпасибо большое, Роман!

    Все получилось. Я заметила раньше, что имя папки неправильное, но не получалось поменять. Исправила в теге и все подключилось!

    Наталья Усольцева
    2 years ago

    Здравствуйте, у меня такая же проблема.Сверяла код раз 10 и один, и второй; название папки и кода одинаковы. Но фиолетовый цвет так и не появился. Я попробовала скачать исходный код к уроку, и он тоже открылся в браузере без фиолетового фона.

    Olena Shubina
    2 years ago

    Lena, проверьте расположение ваших папок и файлов - куда сохранен файл index.html и путь к файлу style.css

    вот писал ранее выше:

    путь к файлу стилей assets/css/style.css прописывается относительно месторасположения файла index.html

    т.е. файл index.html лежит в рабочей папке сайта /kinomonster/index.html

    а в этой папке созданы папки для стилей, т.е. assets/css/style.css

    если бы у вас например файл index.html лежал бы в папке /kinomonster/assets/index.html (так случайно сохранили), то ваш путь подключения css получился бы таким /kinomonster/assets/assets/css/style.css

    т.е. неверным, и нужно либо указывать путь относительно папки где index лежит, т.е. css/style.css

    либо перенести файл index туда где он должен быть /kinomonster/index.html

    Аналогично, если файл index.html лежит на рабочем столе и там же рядом лежит папка /kinomonster/ , то верный путь к css будет kinomonster/assets/css/style.css - так будет работать, или перенести файл index в папку /kinomonster/index.html

    Технические вопросы

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

    Сумма оценок: -

    В ответ на Alessandro Brandini

    Re: Не подключаются стили CSS

    от Alexander Matveyev - четверг, 31 июля 2014, 17:39

    bootstrap версии 3 и есть самый последний, сам недавно на этой теме остановился. Дело может быть и кеше, почистите. Да и у вас на русском тема?

    Сумма оценок: -

    Постоянная ссылка Показать сообщение-родителя Ответить

    • ◀︎ Аттестация персонала
    • перенос moodle Moodle 1.9.7 на локальный сервер ▶︎

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

    Не работают css-стили

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

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

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

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

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

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

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

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

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

    Чистка кэше браузера

    Как очистить кэш в Google Chrome

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

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

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

    Ошибки в коде

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

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

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

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

    Селектор в css-стилях

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

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

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

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

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

    Как определить класс элемента

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

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

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

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

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

    background : red ;

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

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

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

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

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

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

    Идентификатор блока CSS

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

    Класс блока CSS

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

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

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

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

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

    Правило 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-стилями.

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

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

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *