3. Найдите закрывающий тег абзаца </р> сразу после изображения и введите
</ di v>. Теперь код должен выглядеть следующим образом:
<div class="figure">
<img src=" .. 1
images/grass.jpg" alt="Creeping Bentgrass" width="200"
height="200"/>
<p>Figure 1: Creeping Bentgrass is best suited for outdoor use and should Ье
avoided Ьу the indoor farmer·.~/p>
</div>
Как и в предыдущем обучающем уроке, отредактируем уже имеющуюся внешнюю
Таблицу стилей ( sty l es. css ), которая присоединена к настоящей веб-странице.
4. Откройте файл styl es. css из папки 08\caption_ex.
Обратите внимание, что, поскольку это внешняя таблица стилей, в ней нет тега
<style>. Он нужен только для внутренних таблиц стилей.
5. Перейдите в конец файла и добавьте следующий стиль:
.figure img {
border: lpx solid #666:
padding: lOpx;
Этот производный селектор воздействует на любой тег <img>, вложенный в другой
Тег, к которому применен стилевой класс figure,- в данном случае на только
что добавленный <di v>. Поскольку мы используем производный селектор
здесь (и в шаге 7), нам не нужно присваивать стилевой класс <img>. В результате
Не нужно набирать лишний код, то есть мы сокращаем НТМL-код, обеспечивая
Посетителям сайта более быструю загрузку веб-страницы.
