Для начала давайте уясним, что под термином «блок текста», понимается, прежде всего, абзац. Определяется оный, как вы помните, тэгом P, имеющим одно скупое свойство align=”…”. Непорядок, да? CSS предоставляет нам огромные возможности для работы с абзацами, и этой актуальной теме я решил посвятить текущий урок.

Давайте рассмотрим несколько параметров, а затем перейдем к примеру, наглядно иллюстрирующему все изученное.

Line-height – задает межстрочное расстояние. Например, p {line-height: 50px;}

Text-decoration – эта штука позволяет немного приукрасить текст. Какие значения принимает свойство? Давайте посмотрим:
- Underline – подчеркивание.
- Overline – линия над текстом.
- Line-through – перечеркивание.
- Blink – мерцание.
- None – значений нет, идем пить пиво!
Приведу такой пример: p {text-decoration: overline;}

Text-transform – преобразовывает символы текста тем или иным образом. Значения:
- Capitalize – преобразует выделенный блок так, что первая буква каждого слова становится заглавной.
- Uppercase – выделенный блок пишется прописными буквами.
- Lowercase – выделенный блок пишется строчными буквами.

Text-align - уже знакомое нам свойство, определяющее выравнивание текста. Значения, как вы уже знаете, выглядят следующим образом:
- Left – по левому краю.
- Right – по правому краю.
- Center – по центру.
- Justify – по ширине.

Text-Indent – задает красную строку от левого края. Значение можно указать, как в пикселях, так и в процентах.

Margin-left – задает величину левого поля. (Расстояние между блоком текста и его соседями)

Margin-right – задает величину правого поля.

Margin-top – задает величину верхнего поля.

Margin-bottom – задает величину нижнего поля.

Margin – задает величину всех полей.
Например: p {margin: top right bottom left;}
Вместо top right bottom left нужно поставить значения в пикселях или процентах.

Padding-top – задает внутреннее поле (расстояние между текстом и рамкой, его обрамляющей. Как задать рамку смотрите ниже).

Padding-right – правое внутреннее поле.

Padding-bottom – нижнее внутреннее поле.

Padding-left – левое внутреннее поле.

Paddings – общее значение всех внутренних полей. Имеет тот же синтаксис, что и Margin.

Border – задает рамку, обрамляющую абзац. Имеет такой вид:
border: color style width;

Но бывают (и очень часто) такие случаи, когда необходимо задать свойства для каждой части рамки (левой, правой, нижней и верхней). В таком случае, параметр border по известным причинам не покатит. Тогда можно использовать следующие свойства:

Border-top-width – ширина верхней границы.

Border-bottom-width – ширина нижней границы.

Border-left-width – ширина левой границы.

Border-right-width – ширина правой границы.

Border-width – ширина всей границы.

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

Border-style – задает стиль рамки. Значения имеет следующие:
- None – я крутой и рамки не юзаю!
- Dotted – задается точечная рамка.
- Dashed – штрихованная рамка.
- Double – двойная рамка.
- Groove – трехмерная вдавленная рамка.
- Ridge – трехмерная выпуклая рамка.
- Inset – трехмерная выпуклая ступенчатая рамка.
- Outset – трехмерная вдавленная ступенчатая линия.

Border-color – задает цвет границы. Использовать можно и для отдельной линии, например, так: p {Border-left-color: green;}

Теперь вы знаете очень много параметров, применимых к абзацам и не только. Взять тот же border. Догадайтесь, где еще его можно использовать? Правильно в таблицах! Давайте рассмотрим очередной пример: