Одним из самых важных моментов при создании и оформлении сайта является легковоспринимаемое и привлекательное
представление контента - его содержимого: изображений, текста, ссылок и т.д. Мы уже частично касались вопросов
представления текста в уроках раздела "HTML-технологии" и определили, что лучше всего использовать для
оформления текстов таблицу стилей CSS. В данном уроке мы дополним уже частично рассмотренные ранее вопросы
оформления внешнего вида текстов.
В CSS имеется универсальное свойство font, которое в совокупности с дополнительными свойствами
определяем всё многообразие представления текста. Давайте рассмотрим все его свойства по поряду:
font-family - устанавливает семейство шрифта, которое будет использоваться. Значением
может быть любое количество наименований шрифтов, разделённых запятыми. Если в названии присутствует 2
слова или более, то это название нужно заключить в кавычки. Список шрифтов обычно заканчивают указанием семейства
шрифтов.
Пример использования:
h2 {font-family: Arial, Helvetica, sans-serif;} p {font-family: Georgia, 'Times New Roman', Times, serif;}
Необходимость планирования
В своей работе вы неизбежно столкнётесь с необходимостью планирования. Чем бы вы ни занимались,
что бы ни делали, чёткий и ясный план действий поможет правильно распределить время и не запутаться
в делах окончательно и бесповоротно. Особенно это важно для выполнения сложных, многоступенчатых
проектов, в которых занято большое количество человек.
font-size - устанавливает размер шрифта. Есть несколько способов установить размер шрифта:
с использованием значений-констант (абсолютный размер): при этом используются ключевые
слова xx-small (1), x-small, small (2), medium (3), large (4),
x-large (5), xx-large (6). В скобках указаны соответствия этих названий размерам шрифта в HTML.
Эти значения зависят от настроек браузера и операционной системы.
относительные размеры, задаются константами smaller, larger и вычисляются исходя
из размеров родительского элемента.
с помощью любых допустимых единиц CSS: px (пикселей), pt (пунктов), % (процентов),
em (размер шрифта текущего элемента), ex (высота символа х текущего шрифта в нижнем регистре).
Пример использования:
h1 {font-size: 24px;} p {font-size: larger;}
Как нажимать на кнопки
Чтобы нажать на кнопку, нужно сначала определиться, на какую именно
кнопку вы собираетесь нажать, а самое главное - что хотите получить, нажав на эту кнопку, потому что
результат может оказаться неожиданным. Если вы уверены, что
ничего неадекватного не произойдёт, то выберите то, чем именно вы будете нажимать на кнопку.
font-style - это свойство определяет начертание шрифта:
italic - курсивное начертание,
oblique - наклонный шрифт, в отличие от курсива, имитирующего рукописный текст,
при выборе наклонного начертания буквы просто будут наклоняться вправо.
normal - обычное начертание.
Пример использования:
p {font-style: italic; font-size: 14px/10px;} h2 {font-style: normal;}
Поиски
Если вы вдруг что-то потеряли и не можете отыскать, не стоит впадать в панику
и пугаться. Этим вы себе не поможете. Для начала нужно попытаться вспомнить, когда вы видели это последний раз.
Можно даже проследить всю цепочку событий с того момента, когжа вы использовали этот предмет.
Прислушайтесь к себе и к своей интуиции - она часто помогает отыскать пропажу.
Примечание: в описании свойств шрифта вы можете также задать расстояние между строками (интерлиньяж), как
сделано в примере выше. Эта запись означает, что размер шрифта задан как 14 пикселей, а межстроковое расстояние
составляет 10 пикселей.
font-weight - устанавливает насыщенность шрифта. Для этого мы можем использовать ключевые слова:
bold - полужирное начертание,
bolder - жирное,
normal - нормальное.
lighter - светлое.
Или условные единицы от 100 до 900. При этом самое светлое начертание, которое может быть отображено браузером,
будет иметь значение 100, самое жирое - 900. Стандартному полужирному начертанию соответствует значение 799,
а нормальному (по умолчанию) - 400 единиц.
Пример:
h2 {font-weight: normal;} p {font-weight: 600;}
Тайна
Что такое Тайна? Очевидно, это что-то такое, что не дано знать каждому, однако, у каждого человека
есть своя тайна. Причём, одна и та же Тайна может быть у разных людей, но они об этом не знают.
Тайна может объединять и двух, и более человек. При этом они делают загадочные лица и гордятся осознанием того,
что у них есть общая Тайна. ^_^
font-variant - интересное свойство: определяет, отображать ли все буквы шрифта в обычном представлении
или превратить их в капитель, то есть в прописные буквы, только уменьшенного размера. Возможные значения:
normal - нормальный регистр,
small-caps - капитель,
inherit - наследует значения родителя.
Пример использования:
Традиционно, этап планирования Web-сайта (или любого проекта) может быть несколько напряженным.
У каждого есть свое мнение о том, как должен быть построен Web-сайт, и эти мнения часто конфликтуют
друг с другом. Основной задачей любого Web-сайта должно быть создание чего-то, что будет полезно
людям, которые будут его использовать.
Правило CSS для этого примера:
.capit {font-variant: small-caps;}
Примечание: обязательными значениями свойства font являются размер шрифта и его семейство,
все остальные - по желанию и задумке разработчика.
Пробуйте и экспериментируйте. До встречи в следующем уроке!
