Свойства текста

CSS «Свойства текста»

В чем разница между текстом и шрифтами?

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

Отступ {text-indent: ...}

В случае применения text indent первая строка любого элемента может быть смещена на заданную величину, даже если эта величина отрицательная. Чаще всего это свойство применяется, для создания абзацного отступа в первой строке. В общем случае свойство text indent можно применять к любому блочному элементу. Его нельзя применять к строковым элементам или к замещаемым элементам, таким как изображения.

Пример 1:

p {text-indent: 3em;}

Согласно этому правилу первая строка любого абзаца будет сдвинута на 3em.

p {text-indent: -4em;}

Можно также задавать отрицательные значения. Чаще всего таким способом создают «выступы» – при этом первая строка выдвигается влево относительно края элемента.

Пример 2:

p{text-indent: 10%;}

div {width: 400px;}

<div>

<p> Этот абзац содержится внутри контейнера, размер которого 400px шириной и отступ 40px =(400 * 10%)

</p>

</div>

С text indent могут применяться любые единицы измерения длины, в том числе процентные значения. В нашем случае процентное значение вычисляется относительно ширины родительского элемента.

Иначе говоря, если значение отступа задается равным 10%, то первая строка элемента будет сдвинута на 10% ширины его родительского элемента

Горизонтальное выравнивание

{ text-align: … }

Свойство определяет, как выравниваются строки текста элемента относительно границ блока.

Пример 1:

p {text-align: left;}

Согласно этому правилу текст выравнивается по левому краю это характерно для западных языков которые читаются слева на право.

p {text-align: right;}

Для языков Иврит и Арабский по умолчанию задается занчение выравнивания «right» поскольку текст читается справа налево.

Пример 2:

p {text-align: center;}

Значение center, центрирует каждую строку текста элемента.

.

p {text-align: justify;}

В выровненном по ширине тексте оба конца строки размещаются вплотную к внутренним краям родительского элемента.

Высота строк {line-height: … }

Свойство line-height задает расстояние между базовыми линиями строк текста, а не размер шрифта, и определяет величину, на которую увеличивается или уменьшается высота блока каждого элемента.

Высота строк {line-height: … }

Каждый элемент строки текста генерирует область содержимого (content area), которая определяется размером шрифта. Эта область содержимого, в свою очередь, генерирует строковый блок (inline box), который в отсутствие каких либо других факторов эквивалентен области содержимого.

Свойство line-height управляет межстрочным интервалом (leading), или интерлиньяжем, – дополнительным расстоянием между строками текста над и под шрифтом.