Посетите наш новый сайт AXMAJS.RU

Пишем интерактивную историю вместе. Часть 23-я

Борис Семёнов (Morych), 21.04.14 | Практика ASM

Использование параграфа стилей

В отличие от предыдущего, этот метод практически ничем не ограничивает полёт дизайнерской фантазии и предоставляет возможности очень тонкой настройки оформления страниц истории. Итак, для начала добавим в наш проект параграф стилей. Откроем окно настроек профессиональной редакции (рисунок 17) и нажмём ссылку «Создать параграф стилей». История пополнится новым параграфом «StoryStyle». Этот параграф представляет собой ни что иное, как каскадную таблицу стилей (CSS) — набор параметров, управляющих внешним видом различных элементов страницы.

Каждое правило в таблице стилей состоит из двух частей. Левая часть отвечает за то, какие элементы страницы мы изменяем. Эту часть ещё называют селектор. Правая часть, заключённая в фигурные скобки, отвечает за то, как именно мы изменяем внешний вид элементов, соответствующих селектору. Эта часть носит название блок объявлений. Внутри блока объявлений записываются значения различных свойств элементов. Первым следует имя свойства, затем, после двоеточия значение свойства. Каждая такая запись должна оканчиваться точкой с запятой.

селектор
    {
    первое свойство: значение свойства;
    второе свойство: первое значение, второе значение;
    }

Рассмотрим теперь, какие же правила параграфа стилей нам понадобятся для изменения основных параметров оформления истории.

Текст истории, задний фон

Ищем в параграфе стилей правило с селектором «body» и изменяем свойства в блоке объявлений. Для наглядности каждое свойство будем располагать с новой строки.

body
    {
    word-wrap: break-word;
    background-color: #53290B;
    color: black;
    font-size: 21px;
    font-family: Georgia, serif;
    }

Свойство «background-color» устанавливает цвет фона. В данном случае цвет фона позади страниц истории. Значение «#53290B» — это шестнадцатеричный код цвета. Некоторые цвета можно задавать не только с помощью кодов, но также и по их английским названиям.

Свойство «color» отвечает за цвет текста. Здесь, чтобы установить для текста чёрный цвет, мы использовали его английское название «black».

Коды других цветов можно посмотреть, например, в такой таблице безопасных цветов, а поддерживаемые браузерами названия — в списке доступных названий цветов.

Свойство «font-size» устанавливает размер шрифта. Буквы «px» означают, что размер задаётся в пикселях.

Свойство «font-family» определяет семейство или гарнитуру шрифта. Здесь, как правило, указываются несколько названий, которые разделены запятыми. Если браузер не находит в операционной системе первый шрифт, то пробует применить второй и так далее. Поэтому замыкает этот список глобальное название группы шрифтов. Основными группами являются: «serif» — пропорциональный шрифт с засечками, «sans-serif» — пропорциональный шрифт без засечек, «monospace» — моноширинный шрифт. Если название шрифта содержит пробелы, его следует заключать в кавычки. Некоторые распространённые комбинации названий шрифтов можно посмотреть в списке безопасных шрифтов.

Страницы истории

Для изменения цвета фона страниц истории нам понадобятся два правила с селекторами «.main» и «#footer». Правило «.main» отвечает за стиль всей страницы, а «#footer» — за стиль нижней части страницы. В правиле «.main» поменяем значение свойства «background-color», установим код требуемого цвета, а из правила «#footer» это свойство исключим, чтобы фон нижней части не отличался от фона всей страницы.

.main
    {
    box-shadow: 0px 0px 32px #000000;
    position: relative;
    min-height: 100%;
    width: 100%;
    max-width: 768px;
    text-align: justify;
    padding: 0px;
    margin: 0 auto;
    background-color: #FFEFCD;
    }

#footer
    {
    padding-top: 30px;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    }

Свойство «box-shadow» отвечает за тень, отбрасываемую элементом, в данном случае нашей страницей. Первые два числа в значении свойства — это смещение тени относительно элемента по горизонтали и вертикали. Здесь можно задавать как положительные, так и отрицательные значения. Когда оба значения, как здесь, равны нулю, тень располагается точно под элементом. Третий параметр в значении свойства — это размер или размах тени, а четвёртый — цвет тени. Итак, страницы нашей истории будут отбрасывать чёрную тень размером в 32 пикселя. После цвета тени можно указать слово «inset», чтобы тень появилась внутри элемента, а не снаружи. Кстати, элемент может иметь и несколько теней, в таком случае настройки каждой тени нужно перечислить через запятую.

Остальные свойства этих двух правил изменять не будем.

Ссылки

За внешний вид ссылок в исходном параграфе стилей отвечают следующие правила:

.plink, .plinkno, .pnlink, .pplink, a:active, a:link, a:visited {color: #5A8BBC;}

.plink, .pnlink, .pplink {cursor: pointer;}

.plinkno {opacity: 0.6; cursor: text;}

a:active, a:link, a:visited {text-decoration: none;}

a:hover, .plink:hover, .pnlink:hover, .pplink:hover {color: #5A8BBC;}

Как нам известно, в ASM существует четыре вида ссылок. В параграфе стилей для разных видов ссылок предназначены различные селекторы:

.plink — обычные ссылки
.pnlink — невозвратные ссылки
.pplink — добавляющие и многоразовые ссылки
.plinkno — нажатые и неактивные добавляющие ссылки

Кроме того, можно выделить и состояние ссылок, если дополнить селекторы следующими строками (псевдоклассами):

:hover — на ссылку наведён указатель мыши
:active — ссылка нажата

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

a
    {
    text-decoration: none;
    }

.plink, .pnlink, .pplink
    {
    cursor: pointer;
    }

.plinkno
    {
    opacity: 0.6;
    cursor: text;
    }

.plink, .pplink, .plinkno
    {
    color: #993333;
    font-weight: bold;
    }

.plink:hover, .pplink:hover
    {
    color: #CC3333;
    }

.plink:active, .pplink:active
    {
    color: #660000;
    }

Свойство «text-decoration» отвечает за совмещение текста и сплошной линии. Значениями свойства могут быть: «underline» — подчёркнутый текст, «overline» — линия над текстом, «line-through» — зачёркнутый текст, «none» — без линии.

Свойство «cursor» устанавливает вид указателя мыши над элементом. Здесь возможных значений довольно много, но мы используем только два: «pointer» — стандартный курсор для ссылок в виде руки, «text» — стандартный курсор для текста в виде вертикальной линии. Другие значения можно посмотреть, например, здесь.

Свойство «opacity» отвечает за прозрачность элемента. Значением свойства может быть число от 0 до 1, где 0 устанавливает полную прозрачность, а 1 — полную непрозрачность.

Свойство «font-weight» устанавливает толщину шрифта. В качестве значения можно задать «normal» — обычный шрифт и «bold» — жирный шрифт.

Теперь займёмся стилем кнопок, которые, вспомним, мы делаем из невозвратных ссылок. Чтобы ссылка стала похожей на кнопку, нужно установить цвет фона ссылки отличный от фона страницы, подобрать контрастный цвет текста ссылки, а также задать для кнопки поля. Плюс ко всему, при помощи свойства «box-shadow» мы придадим кнопке эффект объёма.

.pnlink
    {
    background-color: #993333;
    color: #FFE6E6;
    padding: 5px 25px;
    border-radius: 15px;
    border: 2px solid #996633;
    box-shadow: 0px 0px 15px #330000 inset, 0px 0px 5px #000000;
    font-size: 1.2em;
    font-family: "Lucida Console", Monaco, monospace;
    text-shadow: -1px -1px #000000;
    }

.pnlink:hover
    {
    background-color: #CC3333;
    color: #FFFFFF;
    text-shadow: 0px 0px 2px #FFFFFF;
    box-shadow: 0px 0px 15px #660000 inset, 0px 0px 5px #000000;
    }

.pnlink:active
    {
    background-color: #660000;
    color: #FFFFFF;
    text-shadow: 0px 0px 5px #FFFFFF;
    box-shadow: 0px 0px 5px #000000;
    }

Свойство «padding» задаёт отступы или поля внутри элемента. В зависимости от числа параметров, указанных в значении свойства, эти параметры интерпретируются по-разному. Единственный параметр задаёт размер сразу всех полей. При двух параметрах, как в нашем случае, первый параметр отвечает за верхнее и нижнее поля, второй — за правое и левое. При трёх параметрах первый отвечает за верхнее поле, второй — за правое и левое поля, третий — за нижнее поле. Четыре параметра устанавливают размеры полей в следующей последовательности: верхнее, правое, нижнее, левое.

Свойство «border» отвечает за наличие и вид границы элемента. Первый параметр — это толщина границы, второй параметр — стиль границы, и третий — цвет границы. Мы использовали стиль «solid» — это сплошная граница, а всего таких стилей восемь — все они показаны на рисунке 18.

Свойство «border-radius» отвечает за скругление углов границы элемента. Если в качестве значения записать один параметр, он будет задавать радиус скругления всех углов. Это наиболее распространённый случай. Конечно, можно управлять скруглением каждого угла в отдельности.

Свойство «text-shadow» устанавливает тень под текстом. Первые два параметра в значении свойства задают смещение тени относительно текста по горизонтали и вертикали, второй параметр отвечает за радиус размытия, а третий — за цвет тени.

Внешний вид полученных кнопок может отличаться в разных браузерах. На рисунке 19 показаны все три состояния наших кнопок в браузере Google Chrome.

Продолжение следует...

Комментарии: 6.

Показать все комментарии

Для того, чтобы оставлять комментарии, необходимо зарегистрироваться и подтвердить в профиле указанный e-mail адрес.