Как изменить шрифты и цвета

Все шрифты и цвета контролируются из файла CSS - style.css. Если вы откроете файл, вы увидите ряд блоков, подобных этому:

body {

font-family: 'Open Sans', sans-serif;

font-weight: lighter;

background: white;

}

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

Список следующих шрифтов font-familyнаходится в порядке приоритета; это зависит от того, что доступно на компьютере пользователя. В приведенном выше примере Open Sans - это веб-шрифт, который импортируется вверху файла - просто зайдите на сайт fonts.google.com, чтобы выбрать нужный вариант, и инструкции по их использованию (он дает вам одну из тех @importстрок, которые вы можете вставь в себя). Если по какой-либо причине этот шрифт не может быть загружен, он вернется к sans-serifопции.

Вы также можете использовать шрифт, встроенный в пользовательскую систему, но проблема в том, что существует очень ограниченный выбор, который гарантированно существует. Самые основные запасные варианты можно указать, используя просто serifи sans-serif.

Некоторые из CSS-селекторов и правил в файле включают в себя:

• h1- это означает «уровень заголовка 1» - то есть самый большой заголовок, который используется для основного заголовка истории в верхней части страницы. Если вы хотите изменить размер заголовка, вы можете изменить font-sizeсвойство здесь. Точно так же h1, h2это ярлык для установки правил сразу для двух селекторов - уровней заголовков 1 и 2. Последний используется для подписи, если у вас есть # author: Your Nameметка вверху чернил.
• .header- Имя, которому предшествует точка, является именем класса. Этот конкретный пример выбирает элемент, который является просто контейнером для заголовка и подписи. Часто в HTML / CSS элементам присваиваются контейнеры, чтобы помочь с структурированием или дать точный контроль над пространством и макетом.
• p- это означает «абзац». Это селектор для основного текста на странице. Так что это то, куда вы должны обратиться, если хотите изменить размер шрифта, цвет текста и т. Д.
• a- Это обозначает тег привязки, который является терминологией HTML для кликабельной ссылки - они в основном используются на нашей странице для кликабельного выбора, но могут быть любыми.
• p.choice- Это означает «параграф с классом«выбор»». Если бы это было просто.choice, это означало бы «что-нибудь с выбором класса». Выборы на нашей странице фактически структурированы как специально разработанные абзацы, которые содержат кликабельные ссылки (якорные теги).
• a:hover- Здесь:hoverон называется псевдоклассом и используется для выбора элемента, когда на него наведен указатель мыши.

CSS применяет стили в соответствии с приоритетами, которые основаны на том, насколько конкретным является селектор (более конкретным является более высокий приоритет) и позицией в файле (нижний - более высокий приоритет). Это позволяет вам сначала определять стили широкими штрихами, а затем постепенно переопределять их. Например, мы h2сначала определяем, а затем опускаем вниз.dark h2часть стиля h2: мы меняем цвет, когда активна темная тема (когда.darkкласс отдается всей странице -).

Чтобы узнать больше о различных способах изменения стиля с помощью одного только CSS, попробуйте поискать «Учебник CSS» - есть множество отличных ресурсов!

Вот пара учебников для начала:

• Учебник CSS на w3schools.com
• Учебник по HTML на w3schools.com - файл HTML описывает структуру страницы, поэтому, если вы хотите изменить общий макет и настроить его дальше, вы должны изучить HTML и CSS вместе - они идут рука об руку.

Пример: Большое необычное название

Выберите шрифт в Google Fonts и вставьте @importстроку вверху вашего файла CSS, например:

@import url('https://fonts.googleapis.com/css?family=Lobster');

Затем измените правило заголовка на что-то вроде:

h1 {

font-family: 'Lobster', cursive;

font-size: 80pt;

text-align: center;

}

Загрузить на itch.io

Вы закончили свой шедевр! Время поделиться этим с миром.

Вы можете загружать свои файлы в любое место, где можно разместить веб-страницу, но мы предлагаем itch.io, потому что там есть большое сообщество создателей инди-игр, это одно из немногих мест, где вы можете загружать чистый веб-контент, и лучше всего, это бесплатно! Вы даже можете продать свой контент, если хотите.

itch.io также позволяет вам загружать черновик своего игрового контента, чтобы вы могли проверить процесс перед его выпуском.

Наконец, чернильное варенье размещается на itch.io, что упрощает вход, если вы уже загрузили свою игру на платформу.

Прежде всего, зарегистрируйтесь здесь, если вы этого еще не сделали. Затем:

• На панели инструментов выберите «Создать новый проект».
• Введите детали вашей игры / истории, убедившись, что выбрали «HTML» для типа проекта.
• Заархивируйте все файлы, экспортированные из Inky, и загрузите их.
• Выберите «Этот файл будет воспроизводиться в браузере».
• Встроить: мы предлагаем вам поэкспериментировать с этим параметром, чтобы увидеть, что вы предпочитаете.
• Размер: мы рекомендуем 800 x 600 для чтения текста лучше, чем размер по умолчанию. Это все еще уменьшится в размерах для мобильных устройств.
• Мобильный дружественный: да
• Автоматический запуск: мы предлагаем вам поиграть с ним и решить, что вы предпочитаете.
• Кнопка полного экрана: мы предлагаем да, но решать вам.
• Включить полосы прокрутки: в этом нет необходимости, поскольку в шаблон встроена прокрутка.

Вы можете просмотреть превью вашей игры на itch.io все время, пока у вас есть Черновик, выбранный в разделе Видимость и доступ. Как только вы будете готовы запустить игру, просто выберите «Публичная».