Переключение стилей CSS. Переключение стилей в CSS, в зависимости от времени суток

Как создать переключатель таблиц стилей CSS, ориентированный на время

От автора: сегодня переключение стилей CSS (изменение дизайна), в зависимости от времени суток на вебсайтах, стали очень популярны. Таблицы стилей CSS дают веб-дизайнеру возможность минимальными усилиями менять внешний вид и ощущение от вебсайта. На некоторых сайтах применяется переключатель стилей типа «день»/«ночь», автоматически меняющий тему сайта в зависимости от времени суток.

Этот учебник демонстрирует вам, как с помощью PHP создать переключение стилей CSS по времени, который позволит вам за раз изменять множество таблиц стилей в определенное время. И еще мы тут внесли немного jQuery UI просто для удовольствия!

Детали учебника «Переключение стилей в CSS»

Тема: PHP, CSS, jQuery UI

Сложность: Начальная

Примерное время выполнения: 60-90 минут

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

скачать исходникидемо

Взглянем на результат, к которому мы будем стремиться:

Почему PHP вместо JavaScript?

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

Делая свой личный сайт-портфолио, я создал переключатель таблиц стилей по времени, применив JavaScript и jQuery. Временная функция скрипта работала правильно. Однако при загрузке веб-страниц всегда происходило короткая «вспышка» таблицы стилей по умолчанию.

«Тяжелые» вебсайты JavaScript могут оказаться перед проблемой конфликта между различными скриптами JavaScript. Для переключателя таблиц стилей CSS я решил применить вместо него PHP. Так как PHP находится на серверной стороне, конфликтов JavaScript не происходило, и скрипт работал так, как нужно.

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

Перед тем, как начать

Если в PHP вы новичок, то вам придется установить и сконфигурировать на своем локальном компьютере серверное окружение (файлы PHP нельзя увидеть в веб-браузере). Лично я предпочитаю XAMPP. Эта статья включает несколько опций софта и основные инструкции о том, как установить локальный сервер.

Хотя для создания и редактирования PHP-файлов можно применять Notepad, при написании веб-страниц в PHP и других языках программирования может оказаться очень полезным редактор кода. Пожалуйста, за дополнительной информацией о выборе редактора обратитесь к этой статье:

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

А теперь давайте начнем!

Шаг 1: Создаем 1-ю таблицу стилей CSS («ночь»)

Создайте таблицу стилей CSS с названием style-1.css и включите в нее следующий код:

Шаг 2: Создаем 2-ю таблицу стилей CSS («утро»)

Откройте style-1.css и сохраните его как style-2.css. Смените основное фоновое изображение с bokeh_2.jpg на bokeh_4.jpg. смените main_image_1.jpg на main_image_4.jpg.

Шаг 3: Создаем 3-ю таблицу стилей CSS («день»)

Используйте style-1.css или style-2.css для создания 3-й таблицы стилей style-3.css. Смените основное фоновое изображение на bokeh_3.jpg, а основное изображение на main_image_5.jpg

Шаг 4: Создаем 4-ю таблицу стилей CSS («вечер»)

Создайте 4-ю таблицу стилей style-4.css. Смените основное фоновое изображение на bokeh_1.jpg, а основное изображение на main_image_8.jpg

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

Шаг 5: Скачиваем jQuery и jQuery UI

Чтобы показать, как скрипт PHP зараз меняет множество таблиц стилей, на веб-странице применяются темы jQuery Themeroller для назначения стилей области содержимого с закладками.

Перейдите к странице закачки jQuery UI и скачайте темы Flick и Start.

Далее перейдите к официальному вебсайту jQuery и скачайте jQuery.

Шаг 6: Разметка

Создайте файл PHP, содержащий следующий код:

Шаг 7: PHP -код переключателя таблиц стилей CSS

Создайте файл PHP, содержащий следующий код:

Схема разметки

Включение PHP для ссылок rel=»stylesheet»

Скрипт для переключателя таблиц стилей CSS будет заключен в файл PHP include с названием stylesheets.php.

Оператор PHP include() добавляет и оценивает отдельный файл. Ссылка на файл включения stylesheets.php делается этим кодом:

Так как мы применяем скрипт PHP для изменения таблиц стилей CSS в установленное время, ссылки rel=”stylesheet” будут генерироваться скриптом PHP.

Обращение к библиотекам jQuery и jQuery UI.

Нам нужно убедиться, что веб-страница обращается к библиотеками jQuery и jQuery UI.

Между тэгами head веб-страницы был добавлен следующий код:

Инициализируем закладки jQuery UI

Этот учебник включает закладки jQuery UI, использующие функциональность по умолчанию. Следующий код инициализирует их:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Контейнер Div для закладок jQuery UI

(Заключительные тэги div для упаковщика (Wrapper) и контейнера содержимого 1 (Content Container 1) показаны в коде разметки закладок jQuery UI)

Большая часть виджетов jQuery UI спрограммирована так, чтобы растягиваться на 100% ширины области контента, в которой они размещены.

Div контейнера content_container_1 в CSS был установлен на фиксированную ширину в 650px, чтобы область содержимого с закладками не растягивалась на всю ширину экрана.

Разметка основного изображения

Для того, чтобы в установленное время основное изображение также изменялось с помощью скрипта PHP, его нужно включить в веб-страницу как фоновое изображение CSS.

Так что вместо добавления на страницу изображения с помощью разметки как здесь:

Его добавили как фоновое изображение CSS div’а с классом “main_image”, как тут:

Разметка для закладок jQuery UI

Нижеуказанная разметка добавляет область содержимого с закладками, приводимую в действие jQuery UI, и со стилями, назначенными с помощью тем jQuery Themeroller.

Меню «Закладки» (“Tabs”) генерируется неупорядоченным списком. Разделы содержимого генерируются тэгами div, у которых уникальные ID, соответствующие ссылкам-привязкам в тэгах li.

Например: div id=”tabs-1″ соответствует a href=”#tabs-1″

Схема кода PHP переключателя таблиц стилей

Установите по умолчанию часовой пояс:

Код date_default_timezone_set устанавливает по умолчанию часовой пояс, используемый всеми функциями даты/времени в скрипте.

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

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

Более новые версии PHP включают в функциональность date_default_timezone_set «зимнее» и «летнее» время. Некоторые более старые версии PHP не принимают их во внимание.

Установить время в формате 24 часа:

date(“H”) задает формат местного времени/даты в 24-часовом виде с нулями впереди. Щелкните здесь, чтобы просмотреть данные о 24-часовых форматах.

Схема оператора If, Elseif, Else

Я разбил остаток кода PHP на части, чтобы показать, как строка за строкой будет функционировать скрипт PHP. В коде выполняются несколько функций, включая:

if

Если 00 (полночь) Меньше или равно текущему времени И текущее время Меньше 07 (7 утра), То скрипт применит таблицы стилей CSS style-1.css и flick.

elseif

Если 07 (7 утра) Меньше или равно текущему времени И текущее время Меньше 12 (12 дня), То скрипт применит таблицы стилей CSS style-2.css и start.

elseif

Если 12 (12 дня) Меньше или равно текущему времени И текущее время Меньше 18 (6 вечера), То скрипт применит таблицы стилей CSS style-3.css и start.

else

Если НИЧТО не отвечает оператору if…elseif, То скрипт применит таблицы стилей CSS style-4.css и flick.

Заключение

С помощью CSS можно создавать множество различных стилей для своих веб-страниц. Используя PHP, можно динамически применять эти стили на сайте. Добавьте немного jQuery UI и ваши страницы будет не только вам интересно создавать, но и вашим пользователям посещать их!

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

Автор: Janet Wagner

Источник: http://net.tutsplus.com/tutorials/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Разработка веб-приложения на PHP

Создайте веб-приложение на PHP на примере приема платежей на сайте

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Ilya

    Отличный урок, как прочитал название сразу подумал о elseif, но не понял причем тут jquery, а функция полезная =)

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree