Файл css не редактируется
Убрал из шаблона wordpress боковую панель (та что с виджетами), но осталось пустое место. Нашёл в стилях где сделать основной контент на всю ширину экрана (по умолчанию 65%), но когда редактирую этот файл напрямую черз notapad++ ничего не происходит, но при этом редактирование через консоль разработчика вживую показывает результат как надо. Скриншоты прилагаю. Вопрос: почему так происходит, и как всё-таки применить эти изменения? По всем признакам вордпресс как будто игнорирует наличие этого файла, то есть в файле прописано 0 и 100%, но после обновления страницы через консоль снова пишет те же самые 30 и 65%. Я на 100% уверен что делаю изменения в правильном файле (смотрел путь через консоль разраба), сохранял, перезагружал денвер сервак, не знаю что ещё возможно сделать.
Чем отличается импорт стилей от подключения связанных стилей css?
чем отличается импорт стилей от подключения связанных стилей css? <link rel="stylesheet".
Не применяются изменения к таблице?
Изменяю поле в таблице SQL в программе, проверяю, все работает (в программе). А как захожу в.
Не применяются CSS.
Есть странцица с фреймами. В одном из фреймов есть страница, которая должна оформляться по стилям.
Не применяются изменения групповой политики
Есть доменная сеть на базе windows server 2008r2. В домен введён компьютер под управлением windows.
очистить кэш в браузере (может быть выдает старую версию), для просмотра можно открывать сайт в анонимном окне браузера.
Это вообще возможно в 2017-м году? Ладно, я не эксперт по кешам браузера, но точно могу сказать - что дело не в нём.
а обратно закачка файла на сервер выполняется? Через что файлы тянете - Filezilla, FAR, Total Commander? Какой Ftp браузер? Посмотрите в настройках, чтобы после редактирования файл обновлялся на сервере. Сорри, если вы не об этом. Я вас так понял.
Я сервер, у меня на жд лежит файл, поднят денвер(апач+пхп, хрень которая делает из компа сервак), я захожу на свой жд, там редактирую, (офк прожимаю сохранить) и ничего не происходит. При этом если удалить файл - сайт роняется, ставишь файл обратно - сайт работает, но редактирование отдельных пунктов благополучно игнорится. Я думал есть какая-то тонкость, но, по ходу, шаблон кривой, или чёрт его ещё знает что там. пытаюсь прикрутить другую тему короче, где нет встроенного сайдбара. Но всё равно, хочется узнать, что же это такое.
Как поднять приоритет стилей?
Если вы столкнулись с ситуацией, когда вы написали для определенного блока какие-то CSS-стили, но они у вас не применяются и перекрываются стилями темы, то здесь вам нужно поднимать приоритет написанных вами css-стилей.
Сделать это можно двумя способами:
-
1. Можно воспользоваться правилом !important. Выглядит это следующим образом:
Давайте рассмотрим это на примере. Возьмем тот же блок site-branding и при помощи инспектора кода видим, что он находится в теге , который имеет идентификатор masthead.
Копируем этот идентификатор, и перед названием класса ставим решетку, вставляем название идентификатора и ставим пробел:
Данное css-свойство будет работать для блока с классом site-branding, находящегося внутри блока с идентификатором masthead.
Так же мы можем пойти дальше и указать еще здесь, к примеру, тег body. В данном случае это будет выглядеть вот так:
Указанные здесь CSS стили должны будут работать для всех блоков с классом site-branding, которые находятся внутри блока с идентификатором masthead, которые, в свою очередь, находятся внутри тега .
Так же более высокий приоритет имеют стили, в которых объединено несколько селекторов. Когда одно css-задается не для одного элемента, а сразу для нескольких.
Подведем небольшой итог. Если какое-то css-свойство у вас не срабатывает и перекрывается стилями темы, то вы можете поднять его приоритет, либо дописав ему правило important, либо увеличив селектор для этого блока. В отдельных случаях приходится делать и то и другое.
Так же не забывайте о том, что CSS – это каскадная таблица стилей, то есть в первую очередь будут применяться те стили, которые написаны в конце.
К примеру, если вы для какого-то блока укажите фон сначала красный, а потом для этого же блока укажите, к примеру, фон зеленый, то применится тот фон, который вы указали последним. В нашем случае он будет зеленым.
Так же помимо перечисленных здесь причин и приемов их устранения могут быть и другие ситуации, когда определенные стили для тех или иных элементов могут просто не срабатывать. Это связано с тем, что в CSS есть такое понятие как строчные элементы, блочные элементы, табличные элементы, и есть определенный набор CSS-свойств, который работает только для блочных элементов, и не работает для строчных. Либо работает только для строчных и не работает для остальных и так далее.
Все это довольно обширная тема и более подробно об этом я как-нибудь расскажу в одной из отдельных статей.
4 комментария
Не корректное отображение теста шаблона в кодировке UTF-8
Кэширование на хостинге или на сайте
Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.
Внутренняя таблица стилей
Стили пишутся в самом HTML-документе внутри элемента , который в свою очередь располагается внутри . По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но часто применяется в ситуациях, когда речь идёт об одной веб-странице (пример 3).
Пример 3. Использование
В данном примере задан стиль элемента , который затем можно повсеместно использовать на данной веб-странице (рис. 1). Обратите внимание, что мы можем спокойно комбинировать со .
Рис. 1. Вид заголовка, оформленного с помощью стилей
CSS в отдельном внешнем файле.
Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.
Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:
О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.
Далее сохраняем этот небольшой файлик с расширением *.css (обычно файл со стилями называют style.css).
Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.
Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.
Тег имеет атрибуты:
- shortcut icon — Определяет, что подключаемый файл является иконкой.
- stylesheet — Определяет, что подключаемый файл содержит таблицу стилей.
- application/rss+xml — Файл в формате XML для описания ленты новостей.
Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:
Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"
Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..
В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом — mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?
О том как присвоить какой либо группе идентичных элементов стиль отличающийся от основного стиля данного элемента, сделать отдельный класс элементов, читайте в главе Классы и идентификаторы.
Кэширование на хостинге или на сайте
Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.
Навигация по статье:
Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.
Ошибки в коде
Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.
Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.
Полезные советы:
В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?
Как создавать в подпапке шаблона новые файлы встроенным редактором?
Кэширование браузера
Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.
Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.
Кэш браузера здесь очищается следующим образом:
- 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
- 2. Находим пункт «История» =>«История»
Во всех других браузерах кэш чистится аналогичным образом.
Идентичные файлы работают не правильно, почему?
TeraMoune
Как в любом месте сайта вывести количество новостей в указанной категории?
10-05-2022, 14:28
Не понимаю о каком теге идёт речь. Все теги общие.
Тогда вопрос, с каких это пор теги shortstory работают за пределами этого файла? Если я хочу в сайдбаре вывести блок такой или в шапке, за пределами shortstory выводится обычный текст тега и всё. Или я что-то не правильно понимаю?
Здравствуйте, отсутствия понимания сопряжено с рисками. В этом и основная проблема. Не стоит делать самому когда не способны понять что представлено в ответе.
В будущих версиях news_read перенесли в таблицу из _post в _post_extras.
Но раз проблема после отката не пропала, то что-то сделали не так.
Восстанавливайте бекапы, если конечно же ума хватило их сделать.
У всех по разному и это уже зависит больше от оптимизации сервера, в частности mysql (или другой базы данных) я думаю. Формул никаких нету чтобы вставив данные получить точные цифры.
Здравствуйте, после вышеописанных изменений вообще перестал считать просмотры. Вернул все как было, просмотры так же не считает, в чем может быть проблема и есть ли решение?
В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.
Приоритеты стилей
Теперь давайте рассмотрим еще одну очень распространённую ситуацию, когда вы применяете какие-то CSS-стили, убедились в том, что браузер у вас ничего не кэширует, на сайте никаких плагинов кэширования нет, селектор определен правильно, но стиль почему-то не применяется.
В чем здесь может быть причина?
Чаще всего такие ситуации возникают из-за того, что где-то в самой теме уже указаны стили для того или иного элемента и приоритет у этих стилей выше, чем у тех стилей, которые вы задаете в самом конце.
-
1. На первом месте по приоритету стоят идентификаторы. Когда у вас на сайте есть блок, для которого написано ID и далее идет название идентификатора.
В CSS это будет выглядеть следующим образом:
В CSS это выглядит так:
Добавление стилей на веб-страницу
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее.
Внешняя таблица стилей
Стили располагаются в отдельном файле с расширением css, для связывания HTML-документа с CSS-файлом применяется элемент . Он располагается внутри , как показано в примере 1.
Пример 1. Подключение внешних стилей
Значение атрибута rel у всегда будет stylesheet и остаётся неизменным. В качестве значения href указывается путь к CSS-файлу; путь может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В примере выше мы подключаем кириллический шрифт Lobster с сайта Google Fonts.
Содержимое файла style.css показано в примере 2.
Пример 2. Содержимое файла style.css
Как видно из данного примера, файл со стилем является обычным текстовым файлом и содержит только синтаксис CSS. В свою очередь и HTML-документ содержит только указатель на файл со стилем, таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование внешней таблицы стилей — наиболее универсальный и удобный метод добавления стиля на сайт. Это позволяет независимо редактировать файлы HTML и CSS.
Пустые TPL файлы
Не правильно выбранный селектор
Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.
О том, как можно вычислить класс или идентификатор того или иного блока на сайте я рассказывала в отдельной статье с видеоинструкцией:
Изменение темы WordPress. Определение Class и ID
Как же всё таки определить правильно ли вы указали селектор или нет?
Я в таких случаях использую один очень простой прием, который называется задание красной рамки.
К примеру, я хочу изменить стили для блока на сайте.
-
1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.
Если для указанного в css-файле элемента красная рамка появилась, значит селектор указан правильно, и все остальные стили которые для него будут дописываться, тоже должны будут примениться.
Если же такая рамка не появилась, то это означает, что селектор выбран не правильно, либо заданные мной стили перекрываются стилями темы и необходимо повышать их приоритет.
О приоритете стилей я расскажу чуть ниже.
Так же важно понимать, что при работе с таблицами у вас красные рамки могут не применяться. В этом случае, вместо красной рамки можно задавать цвет фона.
Если этот фон для указанного элемента применился, значит селектор определен правильно.
ОТВЕТЫ
Ответ 1
Вы уверены, что таблица стилей загружена? Вы можете увидеть его, используя вкладку "Сеть" Firebug на firefox или на вкладке "Сеть" консоли консоли вашего браузера.
(Если 1 работает), у вас может быть простой стиль образца и посмотреть, будет ли он применяться (и видимым в консоли)?
Ответ 2
Если это не работает, убедитесь, что URL-адрес доступен, а контент — то, что вы ищете.
Ответ 3
Может быть, у вас есть ошибка в вашем файле CSS? Скобка закрыта, отсутствующая точка с запятой и т.д.
Ответ 4
Firefox может отклонить таблицу стилей, если она не подана с типом контента "text/css". (Это отдельно от объявления ‘type="text/css"’ в HTML.)
Ответ 5
У меня была такая же проблема — я изменил текстовую кодировку на UTF-16 в моем индексном файле, и мой файл css будет отображаться пустым, когда я попытаюсь загрузить страницу в браузере. Я понял много проб и ошибок, что ваши html и css файлы должны иметь одинаковую кодировку! Я не знаю, будет ли это работать для вас, но это было для меня.
Ответ 6
Скопируйте URL-адрес файла css и вставьте его в свой браузер. Если он не загружает файл, как вы знаете, проблема находится в URL-адресе.
Ответ 7
I таблица стилей может не загружаться по нескольким причинам. Но основной подход к решению такой проблемы заключается в следующем:
2. Затем вы должны проверить вкладку "Таблицы стилей" и просмотреть список таблиц стилей, загруженных браузером.
3. URL-адрес, который вы используете в своем теге HTML link , может быть недоступным, поэтому вручную попробуйте посетить таблицу стилей с помощью браузера и посмотреть, все ли отображается правильно.
4. Любая опечатка внутри вашей таблицы стилей HTML или CSS может привести к загрузке таблицы стилей.
5. Проверяйте наличие ошибок фатальной ошибки перед тегом . Неустранимая ошибка может остановить исполняемый код и приостановить страницу, не включая таблицу стилей.
Надеюсь, что это поможет.
Ответ 8
Я не думаю, что проблема заключается в том, что вы опубликовали, — нам нужно будет увидеть CSS или проверить его местоположение и т.д.!
Но почему бы не попробовать удалить его до одного правила CSS — поместите его в раздел HEAD, а затем, если он будет работать, переместите это правило во внешний файл. Затем повторите введение других правил, чтобы убедиться, что ничего не пропало или не имеет приоритета над вашим CSS.
Ответ 9
Я очистил всю историю и перезагрузил страницу, тогда моя проблема была исправлена.
Ответ 10
Я столкнулся с той же проблемой, но причина заключалась в том, что стиль в css завернут в идентификатор, который не существует
Я надеюсь, что эта помощь поможет пересмотреть, когда что-то не работает.
Ответ 11
Новый для вас Ребята!
Во время моего процесса Gulp minification
Последний файл CSS был для печати, и сгенерированный вывод дал мне
Итак, из-за media = "print" все правила CSS были пропущены!
Ответ 12
Моя простая мысль, что вы пропустили type="text/css" .
Ответ 13
Ответ 14
Если ваш URL-адрес работает и загружает файл правильно, и вы сказали, что добавление правильного
код не исправляет его, тогда единственная другая проблема заключается в том, что это ошибка в фактическом .css файле. И, чтобы сообщить вам об этом, нам нужно будет увидеть файл.
Что вы можете сделать, это написать один базовый тег в свой HTML, добавить основное правило CSS в существующий файл, а затем посмотреть, можете ли вы повлиять на этот тег с помощью нового правила CSS.
Ответ 15
У меня была такая же проблема, китайские символы появлялись в firefox при загрузке на веб-сервер, но не на localhost. Я скопировал содержимое файла css в новый текстовый файл. Теперь все работает. Должна быть некоторая ошибка в кодировке Unicode/encoding.
Ответ 16
У меня была такая же проблема с тем, что css не работал, позже я узнал, что это мои строки @media в css, которые вызывают проблему.
Я переместил их в конец css, и все было разрешено.
Ответ 17
У меня есть еще один. Я назвал свой файл css: default.css. Он не загрузится. Когда я попытался просмотреть его в браузере, он показал пустую страницу.
Я изменил имя на default_css.css и начал работать.
Ответ 18
У меня была та же проблема, и я использовал кодировку UTF-8 для обоих моих файлов следующим образом:
добавить @charset "UTF-8"; в файле CSS и в в файле HTML. и это сработало для меня.
он делает одинаковую кодировку для обоих файлов, т.е. HTML и CSS.
Вы также можете сделать то же самое для кодировки "UTF-16".
Если он все еще не работает, проверьте наличие в в файле HTML, где следует указать type="text/css"
Ответ 19
Я использую WordPress, и таблица стилей была поставлена в очередь в нижний колонтитул
Это привело к добавлению атрибута media="1" к тегу , в результате чего таблица стилей была загружена, но не применена.
В этой главе речь пойдет о том, как внедрить CSS в документ HTML, то есть связать стилевое описание элемента непосредственно с самим элементом, каким либо HTML тегом.
Осуществить данную задачу можно тремя способами:
- Написать стилевое описание непосредственно в самом элементе. Такой способ хорош лишь в том случае если таковой элемент один единственный в HTML документе который нуждается в отдельном стилевом описании.
- Написать стилевое описание для всех идентичных элементов HTML документа. Такой способ оправдывает себя, если стиль страницы принципиально отличается от общего дизайна сайта (группы взаимосвязанных страниц).
- Вынести стилевое описание элементов HTML в отдельный файл CSS. Это позволит управлять дизайном всего сайта целиком, каждой страницей сайта в которой указанно обращение к CSS файлу. Этот способ является наиболее эффективным использованием таблицы каскадных стилей.
Давайте более подробно рассмотрим каждый вариант, а заодно познакомимся с правилами синтаксиса написания CSS.
Ошибки в коде
Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.
Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.
Вывод новостей в адаптивном шаблоне на главной
Похожие вопросы
Импорт CSS
В текущую стилевую таблицу можно импортировать содержимое CSS-файла с помощью команды @import. Этот метод допускается использовать совместно с внешней или внутренней таблицей стилей, но никак не со встроенными стилями. Общий синтаксис следующий.
После ключевого слова @import указывается путь к стилевому файлу одним из двух приведённых способов — с помощью url или без него. В примере 6 показано, как можно импортировать стиль из внешнего файла.
Пример 6. Импорт CSS
В данном примере показан импорт стилевого файла с сайта Google Fonts для подключения кириллического шрифта Lobster.
Аналогично происходит импорт и в CSS-файле, который затем подключается к документу через элемент (пример 7).
Пример 7. Импорт в файле style.css
Импорт обычно применяется в тех случаях, когда доступ есть только к стилевому файлу и нет возможности отредактировать HTML-документ.
Видеоинструкция
На этом у меня сегодня все. Надеюсь, что информация, показанная в данной статье поможет вам решить проблему с неработающими CSS-стилями.
Я желаю вам успехов в создании и продвижении ваших проектов! Если данная статья была для вас полезна не забывайте оставлять комментарии и делиться статьей в социальных сетях.
Выбор шаблона для категории
Полный список причин, по которым css файл может не работать
Эта проблема заставляет меня чувствовать себя абсолютным noob.
Вот глава моего .html файла:
И мой файл html.css действительно там, где он должен быть. Но у меня совсем нет стиля. Помогите!
И, пожалуйста, не голосуйте, потому что ответ очевиден, и я не вижу его.
РЕДАКТИРОВАТЬ 1
Хорошо, теперь я просто пытаюсь решить проблему локально на своей машине. Вот глава:
РЕДАКТИРОВАТЬ 2
Хорошо, я добился определенного прогресса. Предложение firebug было действительно хорошим. Я видел, что ссылка на файл CSS читается как китайские символы. Это была проблема кодирования UTF, поэтому я просто открыл свои файлы в текстовом редакторе, а затем сохранил их как UTF-16.
Но теперь он считывает неверные данные из файла css! Я загрузил файл css ниже, но в firebug он показывает два лайнера.
Я нахожу это озадачивающим!
Не правильно выбранный селектор
Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.
Как же всё таки определить правильно ли вы указали селектор или нет?
Я в таких случаях использую один очень простой прием, который называется задание красной рамки.
К примеру, я хочу изменить стили для блока на сайте.
-
1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.
Как вынести стили в отдельный файл css
Форум Приднестровской поддержки CMS XOOPS.
По ссылке вы можете скачать последнюю версию CMS XOOPS. А так же прочитать инструкции по установке XOOPS и модулей
По данным ссылкам можно скачать модули нашей разработки.
Модуль инструкций. Ознакомьтесь с установкой XOOPS. C начальными познаниями по HTML,CSS, JS, PHP и др.
Приднестровская поддержка XOOPS
Таблицу стилей можно вынести в отдельный файл. Файл с таблицей стилей обычно имеет расширение css и может редактироваться любым текстовым редактором, например, Блокнотом. (1) Задать расширение файлу можно точно так же, как и при создании файла с расширением html .
Вынесем таблицу стилей в отдельный файл style.css (листинг 2) и подключим его к основному документу test.html (листинг 3).
Листинг 2. Содержимое файла style.css
font-size: 12pt; /* Размер шрифта */
color: red ; /* Цвет текста */
font-family: Arial /* Название шрифта */
font-size: 12pt; /* Размер шрифта */
color: green ; /* Цвет текста */
font-family: Arial /* Название шрифта */
font-size: 12pt; /* Размер шрифта */
color: blue ; /* Цвет текста */
font-family: Arial /* Название шрифта */
Листинг 3. Содержимое файла test.html
" http: // www . w3 . org / TR / html4 / loose . dtd " >
Сохраним оба файла в одной папке и откроем файл test.html в Web-браузере. Результат будет таким же, как и в предыдущем примере.
Отдельный файл с таблицей стилей прикрепляется к HTML-документу с помощью одинарного тега . В параметре href указывается абсолютный или относительный URL-адрес файла, а в параметре rel должно быть значение stylesheet , показывающее, что присоединяемый таким образом документ содержит таблицу стилей:
Подключить внешний CSS-файл можно также с помощью правила ©import :
Правило ©import: должно быть расположено внутри тега :
©import url( "style.ess" );
В необязательном параметре можно указать устройство, для которого предназначена подключаемая таблица стилей. Например, all — для любых устройств, print — для предварительного просмотра и распечатки документа. Пример:
©import "style.css" print;
Таблицу стилей, вынесенную в отдельный файл, можно использовать в нескольких HTML-документах.
В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.
Двойное подключение к .tpl файлам через include не работает ?
Решение
snaiper04ek, хм. локальный сервер.. попробуйте другую тему. А потом отпишитесь о результатах пожалуйста. Интересно стало. Дома локал тоже использую- ни разу с такой траблой не сталкивался) тьфу-тьфу))
Магия вне хогвардса. Сменил шаблон, сделал на другом, всё красиво, залил на хостинг.
На домашнем серваке решил ещё поиграться с этой проблемой, всё-же хотелось разобраться чтозах это было. Но моим ожиданиям не суждено было сбыться: когда поменял шаблон с нового на "проблемный" внезапно всё заработало. Скриншот прилагаю (ничего не редактировал, просто открыл и уже было так, как в файле который я отчаянно редактировал ранее). Не знаю что я мог сделать, так как после того как отчаялся я сразу сменил тему и стал работать в другой, не предпринимая более попыток решить проблему (а в новой теме не пытался ничего редактировать, там был шаблон без сайда по умолчанию), из чего могу сделать правдоподобный вывод, что проблема решилась сменой темы на другую и обратно. Как я уже упомянул, для меня это выглядит словно магия, был бы рад объяснению со стороны.
спасибо. Пока вы здесь, может подскажете простой способ выровнять блок по центру? Хочу выровнять блок по центру, но не могу понять, где делаю ошибку
@Модератор, эту тему можно закрывать.
snaiper04ek, темы на этом форуме не закрываются. Источник знаний для других. Пока я вам писал в другой теме. Вы уже успели наворотить (( Ответ естественно можно пропустить.
Я проклят. а как иначе? Как вообще можно думать иначе?
Вчера сидел е***** с надписью (номера телефонов и адрес), прописал див'ы в header, в css выцепил их и настраивал, что называется, в прямом эфире: через внешний вид-редактор залез в css и наживую полировал местоположение и шрифты, и чекал как оно выглядит сразу же, обновляя соседнюю вкладку. Сегодня полез в css, хотел настроить положение номеров для мобилок. CSS ФАЙЛ ВООБЩЕ НЕ РЕАГИРУЕТ НИ НА ЧТО! ТЕ ЖЕ САМЫЕ ПАРАМЕТРЫ что вчера я менял теперь не подают признаков жизни. Более того, сейчас альт-табнулся, нахрен стёр весь css файл, альт-табнулся в соседнюю вкладку, обновил, а сайту вообще похер, как будто я ничего не удалял, 0 эмоций, фунт презренья. Не, тут что-то не чистое, как это вообще возможно??
Добавлено через 4 минуты
Зашёл в яндекс недобраузер, он увидел изменения. это сейчас серьёзно было?
snaiper04ek, каждый раз когда вы хотите посмотреть изменения сделанные на сайте после танцев с бубном. Первое что вы должны нажать при открытии вкладки CTRL+F5
Добавлено через 1 минуту
И чаще чистить кеш - CTRL+SHIFT+DEL, выбираем галочки и ОК
В админке выбираю шаблон файлы tpl берет а вот css файлы не редактирует. Просто пустой файл показывает.
P.S. Права на папки шаблона 777
Удалены все с шаблона - htaccess
Передавалось через файлзиллу с постоянной кодировкой UTF-8
Глупые вопросы не задавайте !
Ответил: ARTYOM
Встроенный стиль
Встроенный стиль является по существу расширением для одиночного элемента, используемого на текущей веб-странице. Для определения стиля элемента к нему добавляется атрибут style , а значением атрибута выступает набор стилевых правил (пример 4).
Пример 4. Использование атрибута style
В данном примере стиль элемента
меняется с помощью атрибута style , в котором через точку с запятой перечисляются стилевые свойства (рис. 2).
Рис. 2. Использование встроенного стиля для изменения вида текста
Встроенные стили не рекомендуется применять на сайте, поскольку это усложняет редактирование стилей и нарушает принцип разделения кода и оформления.
Все описанные методы добавления CSS могут быть задействованы как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет встроенный стиль, затем внутренняя таблица стилей и в последнюю очередь внешняя таблица стилей. В примере 5 применяется сразу два метода добавления стиля в документ.
Пример 5. Сочетание разных методов
В данном примере для первого заголовка задан красный цвет и размер 36 пикселей с помощью атрибута style , для второго заголовка — зелёный цвет через элемент (рис. 3).
Рис. 3. Результат применения стилей
Не подгружаются стили CSS
Вирус в админке
Навигация по статье:
Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.
Не могу через админку отредактировать шаблон
HTML-файл не подключается к CSS
Привет, ребята, я просто создаю простую веб-страницу для класса, но по какой-то причине мой html-файл не подключается к моему файлу css, он находится в той же папке и всем остальным. Любая помощь будет оценена.
Во-первых, вы должны правильно структурировать свой HTML. Начнем с удаления вашего файла CSS из заголовка, поскольку он там не работает.
Во-вторых, проверьте структуру папок и убедитесь, что вы следуете правильному пути к файлу CSS.
Тогда, если вы используете код VS. Вы можете просто щелкнуть ! (восклицательный знак), и вы можете выбрать предварительно созданную HTML-страницу, которая поможет вам начать работу с правильной структурой.
Причин может быть несколько:
- Ваш тег "ссылка" не должен находиться внутри тега "заголовок".
- Убедитесь, что ваш файл css находится в том же каталоге, что и файл html, и проверьте, совпадает ли имя файла.
- Проверьте свой файл css
Изменить: только что проверено, и у вас нет элементов с таким идентификатором, убедитесь, что вы видите изменения, внесенные файлом css. Также проверьте консоль разработчика, она очень помогает при отладке.
С этим есть проблемы:
- Тег ссылки не должен входить в тег заголовка. Держите их отдельно, но в голове.
- Атрибут типа в теге ссылки не требуется. Постарайтесь, чтобы все было просто.
- Проверьте имя файла CSS. Может быть иначе.
Вот ваш исправленный код:
Я не уверен, что вы помещаете хэши специально, чтобы ваш код css не генерировал желаемый результат, поэтому я немного очистил ваш код.
Как уже говорили другие ожидает и принимает только обычный текст, поэтому ваша ссылка становится недействительной и отображается как таковая на вкладке вашего браузера.
Хеши для идентификаторов и. для классов, поэтому я удалил их, поскольку в вашем HTML-файле нет идентификаторов. Когда ваш файл.css уже устанавливает фоновое изображение, вам не нужно дважды кодировать его в HTML. Таким образом код выглядит чище и может предотвратить будущие ошибки.
Атрибут style.
Практически каждый HTML тег имеет атрибут style , который говорит о том, что к этому тегу применяется некое стилевое описание.
это параграф с индивидуальным стилем
Всё что будет написано между кавычками атрибута style и будет являться стилевым описанием для данного элемента, в данном случае элемента
В данном случае мы указали, что этот параграф должен отображаться красным цветом и иметь размер шрифта в 12 пикселей. В последующих главах я подробно расскажу о том что написано в кавычках , сейчас же речь идет о том как применить CSS к какому либо HTML тегу.
По такому же принципу можно указать индивидуальный стиль практически для каждого HTML элемента.
Но еще раз повторюсь такой способ внедрения CSS хорош лишь в том случае если требуется задать определенный стиль малому числу HTML элементов.
Для того, что бы описать необходимые элементы одновременно на всей странице в заголовок HTML документа внедряют тег (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.
Взгляните на пример, ниже к нему будут комментарии.
Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки , — будут синими а параграфы — красными. Представьте как мы облегчили бы себе работу будь на странице сотня таких параграфов и штук пятнадцать заголовков, да и сам документ стал меньше весить за счет "удаления" всех повторяющихся стилевых описаний для каждого отдельно взятого элемента.
Теперь обещанные комментарии:
Тег принято внедрять в заголовок HTML документа между тегами .
Атрибут тега type — сообщает браузеру, какой синтаксис использовать для правильной интерпретации стилей. Для правильной интерпретации браузерами CSS значение type (MIME тип данных) должно равняться text/css .
Внутри тега идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:
Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.
Кэширование браузера
Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.
Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.
Кэш браузера здесь очищается следующим образом:
- 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
- 2. Находим пункт «История» =>«История»
Во всех других браузерах кэш чистится аналогичным образом.
Читайте также: