Проверка задания 7
На уроке 12 вы получили задание:
- Переименовать наш проект в следующий - "project13.html".
- Создать под контейнером "common" дополнительный контейнер "under" такой же ширины и рамкой толщиной 5 пикселей и общим отступом 20 пикселей.
- Создать в контейнере "under" два внутренних контейнера "under1" и "under2" равной ширины и рамкой толщиной 4 пикселя.
- В каждом из внутренних контейнеров создать по два блока, назначив им соответствующие верхним блокам имена и рамкой толщиной 2 пикселя.
- Вставить в блоки тексты в 12-15 слов, отодвинув их от краёв блоков (рамок) на 10 пикселей.
- Откорректировать все контейнеры и блоки контейнера "under" по ширине и высоте, чтобы они заняли равные площади.
- Назначить внутренним контейнерам внешние отступы сверху, снизу и слева по 20 пикселей, столько же между ними.
- Назначить внутренним блокам внешние отступы сверху, снизу и слева по 15 пикселей и равное между ними внутри своих контейнеров.
- Придать новому общему контейнеру фоновый цвет.
- Придать внутренним контейнерам заданный вами в ColorMania фоновый цвет.
- Придать внутренним блокам заданный вами в ColorMania фоновый цвет.
- Придать текстовому контенту каждого блока контейнера "under" свой индивидуальный цвет, который сохранит читабельность текста.
У меня получился такой результат в html-файле:
На экране браузера у вас должен появиться схожий результат дизайна:
У каждого получился свой дизайн, но основные принципы построения у всех сходятся, т.к. вы пользовались одними и тем же тегами и селекторами при одном плане работы. Как вы видите, я использовал принцип разбития контента не просто на два блока, а отдалив их друг от друга, чтобы контент каждого внутреннего контейнера объединялся, но не сливался в единый текст.
Что рекомендуется соблюдать, когда верстается страница:
- Фоновый цвет блоков, внутри которых присутствует цвет, желательно делать светлых и мягким.
- Цвет текста желательно делать тёмным, приближённым к чёрному, что минимально напрягает зрение посетителя, имитируя книжное чтение.
Вот почему на просторах Интернета вы почти не найдёте страницы с тёмным фоном и светлым на нём текстом. Практически все они плохо читабельны.
Сегодня мы познакомимся с миром шрифтов и научимся корректно ставить сам текст. Для этого сохраним полученный дома и сверенный результат в следующий уже наш проект "project14.html".
Иерархия шрифтов HTML
В веб-проектировании выделяют три группы шрифтов по их внешнему виду:
- serif - шрифты с засечками,
- sens-serif - шрифты без засечек,
- monospace - моноширинные шрифты.
К первой группе относятся, например, такие шрифты как Times New Roman и Georgia. Во второй группе мы можем увидеть шрифты Arial и Verdana. В третью группу относят Courier New и Lucida Console. Полный список шрифтов по данным группам вы можете посмотреть в Интернете или проанализировать список шрифтов Microsoft Word.
Семейства шрифтов
Все шрифты группируются в семейства, которые мы часто принимаем за отдельные шрифты, например, тот же Times, в который входит шрифт New Roman, т.е. Times New Roman:
font-family - селектор семейства и описания шрифта.
В стилях контейнера или блока селектор пишется достаточно просто:
font-family: Times New Roman, Times, serif;
После имени селектора мы записываем поочерёдно:
1) шрифт, 2) семейство шрифта, 3) группа шрифтов.
Размеры шрифта
Если вы не укажете размер шрифта, размер по умолчанию для обычного текста, например, параграфов, будет 16px (16px = 1em). Именно это мы пока и увидим, если назначим сейчас всему тексту первого общего блока "common" прописанный выше пример. Сделаем так.
В первом общем контейнере добавляем селектор шрифтов и его значение:
В итоге, сохранив обновлённый файл и затем сам браузер, мы не замечаем изменений, потому что Google Chrome по умолчанию использует именно этот шрифт и размер в 16 пикселей:
Теперь познакомимся с размерностью шрифтов:
font-size - селектор размера шрифта, который обычно пишется после селектора семейства шрифта.
По умолчанию размер шрифтов - 16px (пикселей), или 1em. Вот от этого размера и идёт расчёт.
Запишем данный селектор с его значением далее в стиль первого общего контейнера "common":
Опять ничего не изменилось. Тогда увеличим значение селектора до 18 пикселей:
Размеры блоков изменились - увеличились по высоте:
Так как изменился размер шифта, то и размер блоков и контейнеров тогда также необходимо менять. Поэтому при вёрстке необходимо внимательно следить соотношением размера шрифта и площади блока.
Размер шрифта можно отображать и в единицах "em". Чтобы корректно выставить значением этой единицы, необходимо размер шрифта в пикселях разделить на 16, например:
шрифт Arial, размер - 24px (пикселя), следовательно, 24 : 16 = 1,5em.
Тогда мы сменим значения селекторов в нашем контейнере "common":
font-family: Arial, sens-serif; font-size: 1,5em;
Получаем код:
Дизайн верхнего блока вновь немного изменился:
Изменился и шрифт, и его размер. По этой причине первые два блока у меня практически вышли за пределы своих границ, которые я им определил, поэтому я должен буду изменить параметры высоты внутренних контейнеров контейнера "common" и самого этого контейнера. Если у вас также вышло, то предлагаю попробовать увеличить высоту контейнеров на 50 пикселей:
Мы сразу получим опять более приемлемый вариант проекта страницы:
Также размер шрифта можно назначать в процентах от размера по умолчанию, например:
font-size: 120%;
Есть варианты назначения селектора сравнительными словесными значениями:
- xx-small,
- x-small,
- small,
- medium,
- large,
- x-large,
- xx-large.
Эти обозначения определяют относительные размеры текста CSS, вычисляемые браузером. Запись селектора тогда принимает такой вариант, например:
font-size: x-small;
В остальном, как я уже говорил, вы - проектировщики, верстальщики, дизайнеры своего проекта, поэтому многие значения селекторов CSS можете изменять под ваш вкус и желания. В этом сила веб-проектирования, которое во многом схоже с дизайном или художественным искусством как областью отображения индивидуального взгляда на окружающий мир.
Дополнительные характеристики шрифтов
Также с помощью селекторов CSS из семейства "font" можно назначать толщину (аналог тегу <b>) и курсив (аналог тегу <i>):
- font-weight - селектор CSS семейства "font", который указывает толщину элементов печатного контента (букв и цифр);
- font-style - селектор CSS семейства "font", который указывает начертание шрифта;
- font-variant - селектор CSS семейства "font", который указывает на размерность заглавных букв.
Селектор font-weight может принимать следующие значения:
- normal - нормальная толщина шрифта;
- bold - жирный шрифт;
- inherit - наследует толщину шрифта от родительского контейнера.
Также жирность (прозрачность) шрифта можно обозначать абсолютными величинами от 100 до 900 (сотнями!!!), т.е. от "normal" до "bold" в промежуточном значении сотнями.
Примеры написание селектора font-weight и его значения:
- font-weight: bold;
- font-weight: 400;
- font-weight: inherit;
Селектор font-style может принимать следующие значения:
- normal - обычное, вертикальное начертание шрифта;
- italique - курсивное начертание шрифта;
- oblique - наклонное начертание шрифта;
- inherit - начертание шрифта наследуется от родительского контейнера.
Примеры написание селектора font-style и его значения:
- font-style: italique;
- font-style: oblique;
- font-style: inherit;
Селектор font-variant может принимать следующие значения:
- normal - нормальное написание;
- small-caps - написание прописных букв в словах заглавными за истинно заглавных, но размером прописных букв;
- inherit - наследует значение от родительского контейнера.
Примеры написание селектора font-variant и его значения:
- font-variant: small-caps;
- font-variant: oblique;
- font-variant: inherit;
Практика
Задание 8.
- Создать новый проектный файл "project15.html".
- Скопировать код моего проекта и текст всех блоков моего варианта.
- Назначить различные цвета, шрифты, размеры, толщину, начертание и размерность в каждом блоке.
На следующем уроке мы научимся делать полноформатный html-файл, читабельный в любом браузере.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472