Основы работы в Dreamweaver


           

Заголовок будет обновлен не только


Заголовок будет обновлен не только в режиме Design (Дизайн), – новый стиль отобразится и в исходном коде, и в самом селекторе тегов.


увеличить изображение


Код выглядит следующим образом:

<p class="navhead">Explore the Site</p>

В предыдущем упражнении при переопределении HTML-тегов внешний вид страниц мгновенно обновлялся, и менять код не требовалось. Однако для применения класса CSS, требуется добавить к нужному тегу атрибут class, а в качестве значения атрибута указать имя стиля (без точки). Класс прикрепляется ко всему тегу, и все, что расположено внутри тега, в том числе текст, изображения и прочие теги, меняется в соответствии с примененным стилем.

Таким образом, присоединить класс к части тега нельзя. Например, прикрепив стиль navhead к тегу <p>, не получится распространить влияние стиля только на слово "Explore", поскольку стиль распространится на все, что расположено внутри тега. Чтобы достичь нужного эффекта, следует создать дополнительный тег вокруг слова "Explore" и прикрепить класс к этому тегу. В таких случаях обычно используется строковый тег <span>, предназначенный для создания произвольных строковых контейнеров, которые определяют внешний вид какой-то части блока. Итак, если по какой-то причине требуется применить стиль .navhead только к слову "Explore", код должен выглядеть следующим образом:

<p><span class="navhead">Explore</span> the Site</p>

Примечание. Другой подходящий способ прикрепления стилей CSS – использовать панель Property Inspector (Инспектор свойств). Для этого достаточно поместить курсор внутри любого абзаца с текстом и на указанной панели щелкнуть на значке "A", расположенном между полями Format (Формат) и Font (Шрифт). Этот значок переключает панель инспектора свойств в режим CSS Mode (Режим CSS). В режиме CSS Mode становятся доступны наиболее распространенные HTML-теги и пользовательские классы CSS.
  • Повторите шаги 7 и 8, чтобы удалить теги <em>, расположенные вокруг подписи к фотографии с изображением буддистского храма в Японии. После чего примените к абзацу класс .caption.


    Содержание  Назад  Вперед