Знакомство с HTML и CSS

Часть 3. Применение каскадных правил. Центрирование элементов, добавление границ и полей

1. Создание рамки изображения.

Добавьте стилевое правило для элемента img, включающее тонкую сплошную серую рамку и поле:

img {
  padding: 10px;
  border: 1px solid #777;
}

2. Центрирование изображения с подписью

Поместите изображение (элемент img ) и его подпись (следующий элемент p ) в секцию, т.е. создайте пустой элемент div и переместите в него элементы img и p (вместе с элементом a ). Теперь позиционируем секцию горизонтально по центру страницы - для этого нужно явно задать ее ширину и затем установить автоматические отступы слева и справа. Ширина секции равна ширине изображения плюс удвоенный отступ изображения плюс удвоенная толщина рамки изображения.

Добавьте элементу div атрибуты class="pic" style="width:689px": стилевое правило, центрирующее секцию, имеет смысл определить для множества (класса) секций; а ширина секции привязана к ширине изображения, поэтому атрибут ширины лучше определить во встроенном стиле. Для класса pic стиль должен выглядеть следующим образом:

.pic {
  margin-left: auto;
  margin-right: auto;
}

Проверьте, что получилось в результате.

3. Добавление рамки и фона абзацу.

Создайте стилевое правило для абзаца, помещенного в секцию с классом pic:

.pic p {
}

Селектор .pic p означает: элемент p, находящийся на произвольном уровне вложенности в элемент класса pic.

Определите в этом стилевом правиле следующие свойства:

• выравнивание текста - по центру;
• поле - 5 пикселов;
• рамка - тонкая пунктирная ( dashed ) серая;
• шрифт полужирный;
• фон - серый (немного темнее общего фона).

В качестве последнего штриха визуально отделим абзацы друг от друга буквицей: