Оформляємо абзац

Приступимо до форматування абзацу. Визначимо параметри полів, відступів і кордонів.

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

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

Для вказівки відступів слід користуватися властивістю padding. Воно працює аналогічно властивості margin.

border – Ще одна корисна властивість. Воно призначене для завдання стилю кордонів (ширина, накреслення). Властивість border-width визначає значення ширини рамки блоку Властивість border-color встановлює колір рамки блоку. Border-style задає стиль лінії (суцільна, подвійна, пунктирна і т.д.). Border-style може приймати такі значення:

Найбільш важливі абзаци можна виділити кольором (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>

Ось підсумок наших старань:

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*