Как правильно задавать размер и тип шрифтов
HTML5
Свойство font-size — задает размер шрифта.
Единицы измерения для задания размеров шрифта:
Относительные единицы em — 1.5em
Пиксели px — 14px
Пункты pt — 14pt
Проценты % — 80%
Размер шрифта лучше всего задавать в em — относительной единице измерения. 1em обычно равен длине буквы «M» в данном шрифте. Также размер шрифта можно задавать с помощью ключевых слов: small, large и т.д., но их обычно не используют.
body { font-size: 1em; }Свойство font-family — задает тип (семейство) шрифта. Можно задавать конкретное название шрифта: "Times New Roman". А можно задавать желаемый тип шрифта, например:
serif — шрифт с засечками;sans-serif — шрифт без засечек.
Обычно в качестве значения свойства задают список шрифтов, перечисляя их через запятую.
body { font-family: "PT Sans", "Verdana", sans-serif; }Свойство font-weight задает жирность текста. Обычно принимает одно из двух свойств: normal или bold, но есть и другие: bold, bolder, lighter, normal, 100, 200, 300 и т.д. Свойство font-styleзадает начертание (обычное или курсив).
body {
font-weight: bold;
font-style: italic;
}К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.
body { text-decoration: underline overline line-through; }Регистр символов можно задать через свойство text-transformсо значениями: lowercase, uppercase, capitalize, none.
body { text-transform: capitalize; }Свойство line-height управляет высотой строки (межстрочным интервалом).
Значение этого свойства можно задавать разными способами:
- с помощью абсолютных единиц измерения
12px,2em - множителем
1.2,2 - в процентах
120% - ключевым словом
Предпочтительнее задавать междустрочный интервал либо множителем 1.2, либо в относительных единицах измерения %,em.
Сокращенная запись font:
font: 14px/1em "PT Sans", Verdana, sans-serif;
Через слэш указывается размер шрифта и междустрочное расстояние. Обычно так принято указывать в типографике. Поэтому 14px в данном случае означает размер основного текста, а 1em — междустрочный интервал. Чуть подробнее про запись font через слэш:
Чтобы сохранить хорошую читабельность текста при любом размере шрифта, желательно задавать размеры шрифта, междустрочный интервал и вертикальные отступы между заголовками и абзацами в относительных единицах.
CSS в HTML
Введение
CSS расшифровывается как «каскадная таблица стилей». CSS состоит из трех слов, то есть «каскад + стиль + лист». Каскад означает, что браузер следует порядку.
Style+sheet означает лист, который используется для стилизации тега.
CSS используется для управления форматированием тега HTML. Как правило, форматирование тегов HTML имеет некоторые ограничения, но таблица стилей открывает перед веб-дизайнером ворота для создания дизайна и форматирования по своему выбору. Используя таблицу стилей, можно создавать стили для нашей веб-страницы и добавлять несколько стилей в HTML-документы. Таблица стилей улучшает различные функции, такие как шрифты, размер, вес, поля, отступ, абзац, фон, графика и т. д.
Типы таблицы стилей
Существуют следующие три типа таблицы стилей в HTML.
- Встроенная таблица стилей
- Внутренняя (встроенная) таблица стилей
- Внешняя таблица стилей (ссылки)
Встроенная таблица стилей
Во встроенной таблице стилей можно применить стиль в той же строке.
Пример
- <голова>
-
Встроенная таблица стилей -
-
-
Встроенная таблица стилей -
- Во встроенной таблице стилей мы можем применять стиль в той же строке. Он добавляет определенный стиль к контролируемому документу .
- по тегам.
-
-
- B.Tech
- MBA
- MCA