Межстрочные интервалы, CSS, основы

Сегодня мы с вами будем разбирать межстрочные интервалы CSS. Данное свойство помогает сделать текст более удобным для чтения. Также оно часто используется для уменьшения размера, занимаемого контентом на странице. Специально для самых неопытных чуть ниже будет предоставлен краткий экскурс по истории вопроса. Итак, далее вы узнаете, как устанавливать межстрочные интервалы CSS.

Необходимые сведения

CSS расшифровывается как Cascading Style Sheet, что в переводе значит «каскадные таблицы стилей». Данный язык используется для оформления веб-страниц, которые были написаны на языке разметки (например, HTML). До появления CSS дизайн документов устанавливался с использованием встроенных тегов HTML, но они были крайне неудобны и заполоняли весь код. Поэтому было принято решение создать новый язык, который будет отвечать за оформление. Сегодня CSS и HTML - это два неразрывных понятия. Синтаксис каскадных таблиц очень прост, здесь используется свойства и их значения, например «background: red». Чтобы назначить область действия, нужно просто написать перед свойством имя тега (или идентификаторы): «body { background: red; }», а сама команда помещается между фигурными скобками. В конце каждой записанной строчки с описанием характеристики должна ставиться точка с запятой, иначе возникнет ошибка.

Интервалы

Но хватит вступительных фраз, перейдем к делу. Межстрочные интервалы CSS устанавливаются при помощи свойства line-height. Применяться оно может ко всем элементам. Само свойство наследуется, это означает, что дочерние элементы будут копировать интервал от своих родителей. Например, если написать следующую команду: body {line-height: 20px}, то у всех элементов на странице межстрочный интервал будет равняться 20 пикселям. В качестве значения данное свойство может использовать любые известные в CSS единицы измерения (пункты – pt, пиксели – px, дюймы – in и т. д.). Также можно использовать относительные величины, например проценты или множители. В этом случае CSS-интервал между строками будет высчитываться от родительского элемента. Значением по умолчанию считается ключевое слово normal.

Дополнительные сведения

Раз уж мы заговорили про интервалы, то стоит упомянуть про расстояние между буквами. Для определения этой характеристики в CSS отведено отдельное свойство, а именно letter-spacing. Принцип действия данной команды схож с line-height. Единицы измерения и другие значения одинаковые. CSS-интервал между буквами может также применяться ко всем элементам, и имеет поддержку во всех версиях языка. Пример использования свойства: «h2 { letter-spacing: 10px; }». Если назначить интервал между буквами для элемента body, то все элементы унаследуют эту характеристику (если значение явно не переназначено).

Заключение

Следует отметить, что некоторые браузеры неправильно определяют межстрочные интервалы CSS. Например, программа IE (до 7.0 версии) некорректно высчитывает расстояние. В этом случае следует учитывать разницу интервала. В новых версиях этого браузера ошибка полностью исправлена. Схожая проблема встречается при использовании свойства для определения расстояние между буквами. Во всех остальных программах данные команды определяются в соответствии с W3C (Консорциум мировой паутины).