images/img_for_site/135.jpeg

Приступим к форматированию абзаца. Определим параметры полей, отступов и границ.

Для установки ширины полей используется свойство margin. Правило margin:50px установит для каждого поля ширину 50 пикселей.

Большинство случаев требует чтобы каждое поле имело свою ширину. Для задания ширины верхнего поля используйте margin-top, для правого - margin-right, для нижнего - margin-bottom, для левого - margin-left.

Для указания отступов следует пользоваться свойством padding. Оно работает аналогично свойству margin.

border - ещё одно полезное свойство. Оно предназначено для задания стиля границам (ширина, начертание). Свойство border-width определяет значение ширины границы блока Свойство border-color устанавливает цвет границы блока. Border-style задаёт стиль линии(сплошная, двойная, пунктирная и т.д.). Border-style может принимать следующие значения:
none - граница отсутствует;
hidden - граница не отображается;
dotted - пунктирная линия;
dashed - штрихпунктирная линия;
solid - сплошная линия;
double - две сплошные линии;
groove - вдавленная линия;
ridge - выпуклая линия;
inset - весь блок выглядит как бы вдавленным;
outset - весь блок выглядит как бы выпуклым.

Наиболее важные абзацы можно выделить цветом (color - цвет текста, background-color - цвет фона).

Приведём пример:

p
{
margin:5px;
padding:20px;
background-color:#eee;
border-style:solid;
border-width:1px;
text-align:justify;
}


Результат будет выглядеть так:



Получилось неплохо. Теперь для сделаем аккуратней: выровняем текст по правой и левой границам (text-align:justify;), зададим отступ для первой строки (text-indent:30px;).

Спецификация CSS2 предусматривает псевдоэлементы first-line и first-letter - первая строка и первая буква соответственно. Создадим стили и для них. В итоге получится что-то вроде:

p
{
margin:5px;
padding:20px;
background-color:#eee;
border-style:solid;
border-width:1px;
text-align:justify;
text-indent:30px;
}
p:first-line
{
font-family:arial;
}
p:first-letter
{
font-size:30px;
}