Лекция 4

Единицы измерения
Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.
Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc.
Вот их значения:
1mm (мм) = 3.8px
1cm (см) = 38px
1pt (типографский пункт) = 4/3 px
1pc (типографская пика) = 16px
Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Относительно шрифта: em
1em – текущий размер шрифта. Размеры в em – относительные, они определяются по текущему контексту.

Относительно шрифта: em
1em – текущий размер шрифта. Размеры в em – относительные, они определяются по текущему контексту.

Проценты %
Проценты %, как и em – относительные единицы. Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Единица rem: смесь px и em
Итак, мы рассмотрели:
px – абсолютные, чёткие, понятные, не зависящие ни от чего.
em – относительно размера шрифта.
% – относительно такого же свойства родителя
(а может и не родителя, а может и не такого же – см. примеры выше).

Единица rem: смесь px и em
Теперь уменьшим размер шрифта до 0.8em, вот что получится:

Единица rem: смесь px и em
Единица rem задаёт размер относительно размера шрифта элемента .

Шрифты
Шрифт — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка.

Растровые шрифты
Представляют собой набор растровых изображений каждого символа.

Векторные шрифты
Представляют собой набор описаний символов с помощью математических формул.
Как и любое векторное изображение, векторные шрифты можно масштабировать без потери качества.

Типографика
Базовая линия — воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов.
Высота прописных знаков — расстояние от базовой линии до верхней линии прописных, то есть высота прописных букв без учета свисаний.
Высота строчных знаков — расстояние от базовой линии до верхней линии строчных, то есть высота строчных букв без свисаний и выносных элементов.
Интерлиньяж (межстрочный интервал) — расстояние между базовыми линиями строк.

Кегельная площадка
Кегельная площадка — верхняя прямоугольная часть ножки литеры, на которой расположено выпуклое (печатающее) изображение знака. В цифровом шрифте кегельная площадка важна при проектировании шрифта и представляет собой прямоугольник, в который вписывается изображение знака.

Размер шрифта
Размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки. Размер шрифта элемента определяется с помощью свойства font-size. Размер шрифта можно установить с помощью ключевых слов или единиц измерения длины.

Ключевые слова
Первый набор — ключевые слова, задающие абсолютные значения:
xx-small, x-small, small, medium, large, x-large, xx-large
По сути такие ключевые слова являются прямыми наследниками
с небольшим сдвигом.

Ключевые слова
Второй набор ключевых слов задают относительные значения: smaller и larger. Они изменяют размер шрифта относительно размера шрифта родителя примерно на 20%.

Единицы измерения длины
Пиксель
em, %
rem

Высота строки
Высота строки устанавливается свойством line-height двумя типами значений: единицами измерения длины или множителем.
Множитель использует размер шрифта элемента, к которому применено свойство, а не родительского элемента, как в случае с em.

Расстояние между буквами
Для изменения расстояния между буквами предусмотрено свойство letter-spacing со значением в любой единице измерения длины кроме процентов.

Расстояние между словами
Аналогичным свойством является свойство word-spacing, которое устанавливает расстояние между словами. Значение может быть в любой единице измерения длины кроме процентов.

Начертание
Капитель — начертание, в котором строчные знаки выглядят как уменьшенные прописные. Устанавливается с помощью свойства font-variant, у которого есть два значения: normal и small-caps.

Характеристики рисунка:
наклон, насыщенность и плотность
Свойство font-style

Характеристики рисунка: наклон, насыщенность и плотность
Свойство font-weight

Характеристики рисунка:
наклон, насыщенность и плотность
Также можно установить значение числом от 100 до 900 с шагом 100:

Характеристики рисунка:
наклон, насыщенность и плотность
Также можно указать относительное значение.

Характеристики рисунка:
наклон, насыщенность и плотность
Свойство font-stretch

Семейства шрифтов
serif — шрифты с засечками (антиква)
sans-serif — шрифты без засечек (гротески)
cursive — рукописные шрифты (каллиграфические)
monospace — моноширинные шрифты (непропорциональные)
fantasy — декоративные шрифты (акцидентные)

Семейства шрифтов
Существует ряд шрифтов, которые есть практически в каждой ОС, таким образом их использование считается наиболее безопасным. Самые известные из них:
Без засечек: Arial
С засечками: Times New Roman
Моноширинный: Courier New

Семейства шрифтов
Чтобы использовать нужный шрифт, нужно указать свойство font-family с названием нужного шрифта:
Можно писать название шрифта без кавычек:
Также можно писать несколько шрифтов через запятую:

Семейства шрифтов
Чтобы указать браузеру, что нужно установить шрифт по умолчанию нужного семейства, можно в качестве значений использовать:

Нестандартные шрифты
Всегда есть возможность подключить свой шрифт на страницу с помощью at правила @font-face.
После этого можно написать:

Нестандартные шрифты
Если есть вероятность, что какой-либо шрифт уже установлен на пользовательский компьютер, можно указать его через local():

Нестандартные шрифты
Подключенный шрифт жирного начертания и, например, курсивного начертания – два разных файла, и подключать их нужно отдельно.

Нестандартные шрифты
В таком случае приходится запоминать название шрифта вместе с начертанием.

Нестандартные шрифты
Но можно привязывать определенный файл к определенному начертанию с помощью свойств font-weight и font-style, указанных в @font-face:

Свойство font
Свойство font — универсальное свойство, которое позволяет контролировать каждое свойство, связанное с шрифтами.

Текст
Выравнивание текста осуществляется с помощью свойства text-align:
Свойство text-decoration:
overline (надчеркивание)
line-through (зачеркивание)
underline (подчеркивание)

Текст
Свойство text-transform:
capitalize
lowercase
uppercase

Цвет текста
Цвет текста задается с помощью свойства color
Свойство color устанавливает так называемый «цвет переднего плана» (в противовес background-color – цвет фона), поэтому он имеет влияние на многие свойства
Свойства, которые не наследуют цвет от color автоматически, могут сделать это при помощи ключевого слова currentColor.

Цвет текста
Cвойство text-shadow:

Многоколоночность
Нужное количество колонок можно указать с помощью column-count:
Расстояние между колонками можно задать, используя column-gap:

Многоколоночность
С помощью column-rule можно добавить разделитель между колонками, задав ширину, тип и размер разделителя:
С помощью column-width можно указать ширину колонок:

Переполнение текста
Пусть дана следующая таблица.
В данном случае переполнение контента следует скрыть c помощью overflow: hidden.

Переполнение текста
Свойство text-overflow имеет два значения: clip (значение по умолчанию) и ellipsis.

Переносы внутри слов
Чтобы использовать автопереносы, нужно указать свойство lang для параграфа, а также установить автопереносы с помощью свойства свойство hyphens.

Мягкие переносы
Переносы без дефиса устанавливаются c помощью
:
Если слово разрывать можно в любом месте, то это можно указать, используя свойство word-break со значением break-all

Мягкие переносы
Существуют ситуации, когда слово или словосочетание не нужно разрывать ни при каких обстоятельствах.
Перенос нужно запретить

Если же указать

Если установить значение pre-line,

Если указать значение pre-wrap,

Если установлено значение nowrap

Псевдоэлементы для работы с текстом
Псевдоэлемент первой строки