Оформление абзаца стилями CSS

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

Для установки ширины полей используется свойство 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 - цвет фона).

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

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

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

 

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

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

<style>
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;
}
</style>

Вот итог наших стараний:


Автора автора