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

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

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

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

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

Тема: PHP, CSS, jQuery UI

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

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

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

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

Почему 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 и включите в нее следующий код:

/*  Стили по умолчанию
--------------------------------------------------- */
 
body {
   margin: 0px;
   padding: 0px;
   background: url("../images/bokeh_2.jpg");
   background-position: top left;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-color: #666;
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
}
 
#wrapper {
   width: 965px;
   margin: 0 auto;
   position: relative;
}
 
a:link, a:visited, a:active {
   color: #99ccff;
}
 
a:hover {
   color: #0073ea;
}
 
.content_container_1 {
   float: left;
   width: 650px;
   margin: 0px 0px 60px 0px;
}
 
p.main_description   {
   margin: 5px 0px 50px 0px;
   text-align: center;
}
 
/* Основное изображение
--------------------------------------------------- */
 
.main_image {
   background: url("../images/main_image_1.jpg");
   background-repeat: no-repeat;
   width: 630px;
   height: 425px;
   border: #fff solid 10px;
   margin: 40px 0px 10px 0px;
}
 
/* Закладки
--------------------------------------------------- */
 
#tabs p  {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 20px;
}
 
a.tabs_link_1:link, a.tabs_link_1:visited, a.tabs_link_1:active {
   text-decoration: underline;
   color: #0073ea;
   font-weight: bold;
}
 
a.tabs_link_1:hover {
   text-decoration: underline;
   color: #ff0084;
   font-weight: bold;
}
 
#tabs .tabs_img   {
   float: left;
   background-color: #ddd;
   padding: 8px;
   margin: 0px 12px 0px 0px;
}

Шаг 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, содержащий следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<!-- CSS style sheets -->
<?php include("style sheets.php"); ?>
 
<!-- jQuery / JavaScript -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js">></script>
<script type="text/javascript">
   $(function() {
      $( "#tabs" ).tabs();
   });
</script>
 
<meta name="description" content="This demo uses PHP to change multiple CSS style sheets (Main CSS and jQuery UI Theme) at specific times during a 24 hour period. The timezone for this demo is set to Australia/Melbourne." />
<meta name="keywords" content="time,based,css,stylesheet,switcher,php" />
<title>Simple Time Based CSS Style Sheet Switcher</title>
 
</head>
<body>
 
<!-- Begin Wrapper -->
<div id="wrapper">
 
<!-- Begin Content Container 1 -->
<div class="content_container_1">
 
<!-- Main Image Switches at Set Times -->
<div class="main_image"></div>
<p class="main_description">
Main Image changes at the times set in PHP Script (Australia/Melbourne).
</p>
 
<!-- Begin Tabs Area -->
 <div id="tabs">
   <ul>
      <li><a href="#tabs-1">About Envato</a></li>
      <li><a href="#tabs-2">Marketplaces</a></li>
      <li><a href="#tabs-3">Tuts+ Network</a></li>
   </ul>
 
   <div id="tabs-1">
   <p>
   <img class="tabs_img" src="images/envato_1.jpg" width="300" height="195" alt="About Envato" />
   Envato is a startup based out of Australia with people around the world and sites serving pages every second. We started in a living room in 2006 and have been steadily working to build our company into a world-class contender. Our background is creative, we love open source, we believe that work is about way more than just making money, and we're totally committed to making products that are awesome!
   </p>
   <p>
   <a class="tabs_link_1" href="http://envato.com/" target="_blank" title="Visit The Envato Website">Visit The Envato Website</a>
   </p>
   </div>
 
   <div id="tabs-2">
   <p>
   <img class="tabs_img" src="images/marketplace_1.jpg" width="300" height="195" alt="Marketplaces" />
   The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, background music, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 500,000 users, authors and buyers and every day hundreds of new files are added.
   </p>
   <p>
   <a class="tabs_link_1" href="http://themeforest.net/" target="_blank" title="Visit the Theme Marketplace">Visit the Theme Marketplace</a>
   </p>
   </div>
 
   <div id="tabs-3">
   <p>
   <img class="tabs_img" src="images/psdtuts_1.jpg" width="300" height="195" alt="Tuts+ Network" />
   At Envato we're very passionate about education, that's why we've created one of the most popular networks of educational blogs around. Tuts+ serves up over 18 million pageviews a month across its many subsites on subjects like graphics, web development, audio production, iPhone development and motion graphics.
   </p>
   <p>
   <a class="tabs_link_1" href="http://tutsplus.com/" target="_blank" title="Visit Tuts+ Hub">Visit Tuts+ Hub</a>
   </p>
   </div>
 
</div>
<!-- End Tabs Area -->
 
</div>
<!-- End Content Container 1 -->
 
</div>
<!-- End Wrapper -->
 
</body>
</html>

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

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

<?php
 
date_default_timezone_set("Australia/Melbourne"); // Set default time zone
 
$time = date("H"); // Set the time in 24 hour format
 
if (00 <= $time && $time < 07) // 12:00am to 7:00am   Night
   {
   echo
'<link href="css/style-1.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }
 
elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm   Morning
   {
   echo
'<link href="css/style-2.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }
 
elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm   Afternoon
   {
   echo
'<link href="css/style-3.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }
 
else // all other hours   Evening
   {
   echo
'<link href="css/style-4.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }
 
?>

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

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

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

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

<!-- CSS style sheets -->
<?php include("style sheets.php"); ?>

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

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

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

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

<!-- jQuery / JavaScript -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

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

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

<script type="text/javascript">
   $(function() {
      $( "#tabs" ).tabs();
   });
</script>

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

<!-- Begin Wrapper -->
<div id="wrapper">
 
<!-- Begin Content Container 1 -->
<div class="content_container_1">

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

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

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

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

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

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

<img src="main_image_1.jpg" width="630" height="425" alt="Image" />

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

<!-- Main Image Switches at Set Times -->
<div class="main_image"></div>
<p class="main_description">
Main Image changes at the times indicated.
</p>

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

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

<!-- Begin Tabs Area -->
 <div id="tabs">
   <ul>
      <li><a href="#tabs-1">About Envato</a></li>
      <li><a href="#tabs-2">Marketplaces</a></li>
      <li><a href="#tabs-3">Tuts+ Network</a></li>
   </ul>
 
   <div id="tabs-1">
   <p>
   <img class="tabs_img" src="images/envato_1.jpg" width="300" height="195" alt="About Envato" />
   Envato is a startup based out of Australia with people around the world and sites serving pages every second. We started in a living room in 2006 and have been steadily working to build our company into a world-class contender. Our background is creative, we love open source, we believe that work is about way more than just making money, and we're totally committed to making products that are awesome!
   </p>
   <p>
   <a class="tabs_link_1" href="http://envato.com/" target="_blank" title="Visit The Envato Website">Visit The Envato Website</a>
   </p>
   </div>
 
   <div id="tabs-2">
   <p>
   <img class="tabs_img" src="images/marketplace_1.jpg" width="300" height="195" alt="Marketplaces" />
   The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, background music, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 500,000 users, authors and buyers and every day hundreds of new files are added.
   </p>
   <p>
   <a class="tabs_link_1" href="http://themeforest.net/" target="_blank" title="Visit the Theme Marketplace">Visit the Theme Marketplace</a>
   </p>
   </div>
 
   <div id="tabs-3">
   <p>
   <img class="tabs_img" src="images/psdtuts_1.jpg" width="300" height="195" alt="Tuts+ Network" />
   At Envato we're very passionate about education, that's why we've created one of the most popular networks of educational blogs around. Tuts+ serves up over 18 million pageviews a month across its many subsites on subjects like graphics, web development, audio production, iPhone development and motion graphics.
   </p>
   <p>
   <a class="tabs_link_1" href="http://tutsplus.com/" target="_blank" title="Visit Tuts+ Hub">Visit Tuts+ Hub</a>
   </p>
   </div>
 
</div>
<!-- End Tabs Area -->
 
</div>
<!-- End Content Container 1 -->
 
</div>
<!-- End Wrapper -->

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

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

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

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

date_default_timezone_set("Australia/Melbourne"); // Set default time zone

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

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

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

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

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

$time = date("H"); // Set the hour in 24 hour format

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

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

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

if

if (00 <= $time && $time < 07) // 12:00am to 7:00am   Night
   {
   echo
'<link href="css/style-1.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }

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

elseif

elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm   Morning
   {
   echo
'<link href="css/style-2.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }

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

elseif

elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm   Afternoon
   {
   echo
'<link href="css/style-3.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }

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

else

else // all other hours   Evening
   {
   echo
'<link href="css/style-4.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
   }

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

Заключение

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

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

Автор: Janet Wagner

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

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

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки:

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

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

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

  1. Ilya

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree