В данном уроке будут продолжаться разбираться методы стилизации элементов с помощью CSS. Во второй части будут рассмотрены основные правила стилизации текста в CSS.
Бесспорно, цвета - это важная составляющая пользовательского интерфейса (UX), но и следует обратить внимание а то, что большая часть важной информации, которую пользователь видит на веб-странице, будет отображаться в виде текста.
В этой части урока мы узнаем все о шрифтах и о том, как стилизовать их внешний вид с помощью CSS.
Семейство шрифта
font-family - устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого.
h1 {
font-family: Garamond;
}
При настройке шрифтов на веб-странице следует учитывать следующие моменты:
- Чтобы не возникало проблем с отображением шрифта на веб-странице, он должен быть установлен на компьютере пользователя.
- По умолчанию шрифт для всех элементов HTML - Times New Roman.
- Рекомендуется ограничить количество шрифтов, используемых на веб-странице, до 2 или 3.
- Если имя шрифта состоит из нескольких слов, оно должно быть заключено в двойные кавычки (иначе оно не будет распознано), например:
h1 {
font-family: "Courier New";
}
Шрифты с засечками и без засечек
- Serif - буквы в этих шрифтах содержат дополнительные засечки на концах. Среди примеров такие шрифты, как Times New Roman, Georgia и другие.
- Sans-Serif - буквы в этих шрифтах не содержат дополнительных засечек на концах. Вместо этого они имеют прямые и плоские края. Среди примеров такие шрифты, как Arial, Helvetica и другие.
Резервные шрифты
Когда в CSS указывается шрифт, не установленный на компьютере пользователя, нам предварительно необходимо добавить резервные шрифты.
Чтобы использовать резервные шрифты, требуется следующий синтаксис:
h1 {
font-family: Garamond, Times, serif;
}
Дополнительные шрифты
Для этого в сети существуют специализированные ресурсы, например Google предлагает Google Fonts - каталог тысяч шрифтов с открытым исходным кодом, которые могут быть использованы любым пользователем.
Чтобы использовать эти шрифты, нам необходимо сослаться (указать) на определенный шрифт от Google в своем HTML-коде и сразу же применить его в CSS. Это позволяет избежать необходимости определять, установлен ли этот шрифт на компьютере пользователя.
Для того, чтобы привязать шрифт от Google, как и для таблицы стилей CSS, нам необходимо использовать тег <link>.
<head>
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet" >
</head>
https://fonts.googleapis.com/css?family=Raleway
URL-адрес указывает шрифт Raleway из Google Fonts.
Теперь мы можем использовать новый шрифт так же, как и любой другой:
h1 {
font-family: Raleway, Georgia, serif;
}
Теперь у нас имеется доступ к тысячам новых, современных, бесплатных шрифтов!
Размер шрифта
p {
font-size: 18px;
}
В приведенном выше примере размер шрифта для всех абзацев был установлен в значение 18px.
Существуют три единицы измерения размера шрифта:
- px - представляет собой единицу пикселей. Дисплей монитора компьютера можно измерить в пикселях, которые представляет из себя небольшую точку на экране. Пиксели используются для установки точного размера элемента, в данном случае текста.
p {
font-size: 18px;
}
- em - относительная единица измерения. Определяет размер текста относительно размера текста родительского элемента.
p {
font-size: 1.3em;
}
- % - проценты также являются относительной единицей измерения. Размер текста по умолчанию в веб-браузерах - 16 пикселей. Когда используются проценты, они устанавливают размер текста относительно этого размера по умолчанию. Например, установка размера шрифта на 200% эквивалентна установке его на 32 пикселя.
p {
font-size: 150%;
}
Интервалы
Интервал между строками
line-height - устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта. При обычных обстоятельствах расстояние между строками зависит от вида и размера шрифта и определяется браузером автоматически.
p {
line-height: 1.5em;
}
Интервал между словами
Размер пространства между словами обычно равен 0.25em.
h1 {
word-spacing: 0.3em;
}
Практика изменения интервала между словами не является распространенной и применяется в основном для того, чтобы улучшить читаемость полужирного или увеличенного текста.
Интервал между буквами
h1 {
letter-spacing: 0.3em;
}
Насыщенность шрифта
p {
font-weight: bold;
}
Стиль шрифта
font-style - определяет начертание стиля шрифта - обычное, курсивное или наклонное.
h3 {
font-style: italic;
}
Трансформация текста
text-transform - управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен. Может принимать следующие значения:
- lowercase - все символы текста становятся строчными (нижний регистр).
- uppercase - все символы текста становятся прописными (верхний регистр).
h1 {
text-transform: uppercase;
}
Выравнивание текста
Для того, чтобы переместить или выровнять текст, в CSS применяется свойство text-align.
h1 {
text-align: right;
}
- left - выравнивание текста по левому краю.
- center - выравнивание текста по центру.
- right - выравнивание текста по правому краю.
Подводим итоги
Давайте посмотрим чему мы научились и что нового мы для себя узнали:
- Свойство CSS
font-familyизменяет шрифт текста. - Шрифты семейства
Serifсодержат дополнительные засечки на концах каждой буквы. - Шрифты семейства
Sans-Serifтаких засечек не содержат. - Резервные шрифты используются, когда определенный шрифт не установлен на компьютере пользователя.
- Google Fonts предоставляет бесплатные шрифты, которые можно подключить в HTML-файле с помощью элемента
<link>. - Размер шрифта может быть задан в пикселях, em или процентах.
- Вертикальное расстояние между строками текста может быть изменено с помощью свойства межстрочного интервала
line-height. - Горизонтальное расстояние между словами может быть изменено с помощью свойства
word-spacing. - Интервал между буквами, может быть изменен с помощью свойства
letter-spacing. - Текст может быть выделен жирным шрифтом с использованием свойства
font-weight. - Текст может быть выделен курсивом с помощью свойства
font-style. - Для отображения текста во всех строках прописным или строчным в CSS применяется свойство
text-transform. - Текст можно выровнять с помощью свойства
text-align.
Свое мнение и личные впечатления
На сайте также очень грамотно реализована возможность моментальной практики в виде всевозможных заданий после каждой части урока. Все это позволяет легко осваивать новый материал.
Предыдущие части курса Сodecademy - "Learn HTML & CSS"
4.1 Стилизация с помощью CSS (Цвета)
Конспект подготовлен для Академии Голоса @academy.
Ваш пост поддержали следующие Инвесторы Сообщества "Добрый кит":
knopki, litrbooh, neo, mir, natalia, tristamoff, ohlamoon, lira, orezaku, yuriks2000, galerina, vika-teplo, borisss, ogion, bombo, lomekhuza, stereo, dimas102, lokkie, dim447, now, zhasmin, smartell, vsebudethorosho, katherina
Поэтому я тоже проголосовал за него!
Узнать подробности о сообществе можно тут:
Разрешите представиться - Кит Добрый
Правила
Инструкция по внесению Инвестиционного взноса
Вы тоже можете стать Инвестором и поддержать проект!!!
Если Вы хотите отказаться от поддержки Доброго Кита, то ответьте на этот комментарий командой "!нехочу"
@arey1983 Поздравляю! Вы добились некоторого прогресса на Голосе и были награждены следующими новыми бейджами:
Вы можете нажать на любой бейдж, чтобы увидеть свою страницу на Доске Почета.
Чтобы увидеть больше информации о Доске Почета, нажмите здесь
Если вы больше не хотите получать уведомления, ответьте на этот комментарий словом
стопЖелаю вам успеха и чудесного дня!