[Table]
Автор: Лещик Виталий[/Table]
[Table]Приступим к форматированию абзаца. Определим параметры полей, отступов и границ.
Для установки ширины полей используется свойство 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 - цвет фона).
Приведём пример:
Code
<style>
p
{
margin:5px;
padding:20px;
background-color:#eee;
border-style:solid;
border-width:1px;
text-align:justify;
}
</style>
[Table]
[/Table]
Получилось неплохо. Теперь для сделаем аккуратней: выровняем текст по правой и левой границам (text-align:justify;), зададим отступ для первой строки (text-indent:30px;).
Спецификация CSS2 предусматривает псевдоэлементы first-line и first-letter - первая строка и первая буква соответственно. Создадим стили и для них. В итоге получится что-то вроде:
Code
<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>
Вот итог наших стараний:
[Table]
[/Table]
[/Table]
