Как к сайту подключить 2 файла css?
Здравствуйте! Надо мне создать сайт и в моей системе управления сделать переключатель двух-трех файлов css, чтобы на сайте менялись цвета. Как мне сделать такой переключатель? Спасибо огромное.
Оценить 1 комментарий
к примеру есть сайт, надо сделать его синий и красный, вся цветовая гамма будет прописана в css и надо сделать, чтобы пользователь выбрал с какого css будет показывать его сайт. как это сделать?
document.getElementById('style').setAttribute('href', 'red.css');Куки только для одного. мне сохранка навсегда нужна я css ни разу в БД не сохранял, подскажите как это сделать? и как сам переключатель? чтобы выбрать какой css включить, заранее спасибо огромное
Иван Антонов: Я пишу сейчас сайт, заказчику надо в админ панели управления сайтом, чтобы я поставил переключатель и сделал 2 файла css с разной цветовой гаммой и чтобы он сам не важно как нажатием кнопки или еще как то менял красного на синий и наоборот, чтобы на всегда и для любых людей, для любого пользователя. так как?
quant78: тогда тебе нужно в конфиг файл добавить значение для стиля (например имя файла), и при щелчке на кнопку менять его.
?> Иван Антонов: а где // Здесь сохраняем стиль, писать и $style = // загружаем стиль из источника в который сохранили тоже самое? а второй файл css как загрузить?
просто до конца не понял код: $style = // загружаем стиль из источника в сюда пишем в путь к css а второй файл, у Вас же красны и зеленый? спасибо огромное
Иван Антонов: я очень прошу подскажите пожалуйста: $style = // загружаем стиль из источника в который сохранили что сюда писать первый css показали в коде второй?
Иван Антонов: я очень прошу пожалуйста помогите, подставьте везде свои значения а я на свои заменю, я очень прошу, спасибо огромное
Стиль сохранен'; > ?> Иван Антонов: отлично что простой, а где подключение файла css, у меня есть 2 файла, один стандартный и второй который клиент, может его выбрать, другая цветовая гамма сайта будет выбирает radio, один это default.css а второй? Спасибо огромное.
quant78: если вы не заметили я вам тут предоставил целых 3 цветовых схемы.
По умолчанию стоит default.css в админке можно выбрать red.css или green.css или добавить свои варианты.
var themelink = $('#themelink') $('input[name="theme"]').on('change', function()< var theme = this.value; themelink.attr('href', 'css/'+theme+'.css'); $.post('/some/server/path',).then(function(response)< console.log('theme has been changed'); >) >);quant78: я заапдейтил ответ, пост запрос можно сделать аяксом. По большому счету все равно как, можно и формой, если такой вариант устраивает
это первый radio
это второй?
Извините за такие вопросы я просто запутался
я ставлю: ? это первый radio ? это второй? Форму я сиавлю в админку чтобы клиент выбрал, а код на сайт? Извините за такие вопросы я просто запуталсяquant78:
1. Форму ставите там, где хотите дать возможность сменить тему.
1.1. Аттрибуты value у радио баттонов поставьте соответственно названиям ваших тем.
2. Сохраняете для конкретного пользователя где-то эту настройку (в базе данных, допустим).
3. На той странице (или страницах), где, собственно, будет меняться эта тема, нужно в head секцию добавить css файл темы в случае, если у пользователя сохранена настройка темизации. В моем примере common.css — это пример общих стилей, которые подключаться будут в любом случае, default.css — файл темы по умолчанию, на случай, если никакой настройки у пользователя нет.
Как подключить несколько css файлов в html
Существует несколько способов добавить CSS на страницу HTML:
- инлайн запись с помощью тега атрибута style у любого тега в HTML-разметке
- использование тега , который обычно указывается внутри секции в HTML-разметке
- использование отдельного CSS-файла
В реальной разработке чаще всего принято писать стили в отдельном CSS-файле. Если к HTML-документу требуется добавить несколько CSS фалов, можно воспользоваться одним из двух способов:
1). Подключить каждый CSS-файл по отдельности к HTML-файлу с помощью специального тега :
lang="ru"> charset="UTF-8"> Основной файл index.html rel="stylesheet" href="../css/main.css"> rel="stylesheet" href="../css/reset.css"> rel="stylesheet" href="../css/fonts.css"> 2). Использовать директиву @import, которая позволяет импортировать один CSS-файл в другой. Допустим, что все стили проекта разбиты на 3 файла: main.css (основной файл), reset.css, fonts.css. Добавим reset.css и fonts.css в основной CSS-файл:
Далее нужно подключить main.css к нашему HTML-файлу с помощью .
Важно располагать импорт файлов reset.css и fonts.css именно в начале документа main.css, иначе данный способ не сработает
Использование import для подключения нескольких файлов в CSS
Как уже упоминалась в предыдущих статьях, к одному файлу HTML можно подключать несколько файлов CSS с прописанием стилей. Данная процедура относится к понятию таблицы внешних стилей, а тег, с помощью которого формировалась система взаимосвязи HTML и CSS — link. Для примера рассмотрим следующую запись кода:
link rel="stylesheet" type="text/css" href="css/stylebasis.css" /> основное базисное оформление --> link rel="stylesheet" type="text/css" href="css/stylegeneral.css" /> стили внутренних страниц сайта--> link rel="stylesheet" type="text/css" href="css/stylyid.css" /> специальные стили--> Данное разделение оформления сайта на несколько файлов приносит выгоду только в частном случае. Это действенно, если для практически идентичных элементов сайта нужно разное оформление.
Самой негативной чертой использования данного подхода является то, что растет количество обращений к серверу из-за наличия нескольких файлов CSS, что приводит к повышению трафика и роста времени обработки информации.
Однако, если все же пришлось использовать данную систему присвоения стилей, то стоит поговорить об операторе @import и его возможностях и функционале.
Объединение нескольких файлов CSS с import
Для опытного веб мастера не секрет, что в CSS-файлах нельзя использовать кодировку HTML. Следовательно пользоваться тегом < link >следует только в рамках файлов с расширением html внутри тега .
В то время как оператор @import осуществляет взаимосвязь файлов стиля и основного контента в файле с расширением css. Указанное содержимое этой директивы связывается с тем css-файлом, в котором сдержится этот самый @import.
Синтаксис
@import url("") [разновидность устройства];
Разберем данную запись. Первым в import указан url (относительный, или абсолютный) требуемого файла, который более удобен для веб-мастера.
Далее следует разновидность устройства. Ее указание не является принципиально обязательным, а соответствует она атрибуту media в случае использования тегов link.
Далее следует более конкретный пример:
@import url(css/ stylebasis.css); @import url(css/ stylegeneral.css); @import url(css/ stylyid.css); /* после данной записи идут операторы оформления */
Некоторые полезные замечания
- Директива @import должна располагаться в самом начале css-файла. Причем принципиально, чтобы команды оформления были строго после директивы. Иначе робот не сможет считать данную команду.
- Также стоит отметить тот факт, что невозможно использовать директиву @import для конструкции встроенных стилей.
Итог
Структура создания CSS по блочной методике может осуществляться двумя путями:
- связь файлов контента и файлов оформления посредством тега
- объединение таблиц внешних стилей в рамках одного файла с расширением css.
Блочную методику целесообразно использовать в том случае, когда с кодом работают несколько специалистов. Объединение стилей в один документ способствует сокращению времени обработки информации роботом.
Поэтому использовать директиву @import следует с умом и пониманием дела.