Применение стилей в представлении «Конструктор»

С помощью представления Конструктор можно применять стили к элементам страницы и сразу просматривать результаты. Не требуется писать код CSS и затем открывать страницу, чтобы увидеть, что применены нужные стили.

В представлении Конструктор можно применять стили к отдельным элементам на странице несколькими способами. Можно использовать встроенные стили, написанные как атрибут style отдельного элемента. Эти правила стилей можно применить только к данному элементу.

Правила стилей можно написать в элементе style элемента head HTML-кода страницы. Эти правила стилей можно применить к элементам на текущей странице. Наконец, можно написать правила стилей во внешний CSS-файл. В этом случае правила стилей можно применить к любым страницам в веб-узле.

В этом пошаговом руководстве запишите сведения о применении стилей и форматирования в разделе элемента style страницы и как встроенные стили. Позже можно переместить сведения CSS во внешнюю таблицу стилей для использования других возможностей в Visual Studio 2008.

Форматирование заголовка на странице

Первым элементом для форматирования будет раздел заголовка, который содержит элементы, заключенные в теге <div ID="banner">. В этом примере, чтобы выбрать стиль и положение заголовка, используйте панель инструментов Непосредственное применение стиля. Также можно задать размер области заголовка и добавить фоновый цвет.

Форматирование текста заголовка

1. В представлении Конструктор в области заголовка щелкните заголовок текста «AdventureWorks Styling Page».

Обратите внимание, что выделение отмечено полем синего цвета и имеет вкладку, которая указывает, что был выбран элемент h1.

2. В панели инструментов Применение стиля в списке Целевое правило щелкните Применить новый стиль.

Откроется диалоговое окно Новый стиль.

Параметр Непосредственное применение стиля имеет по умолчанию значение Вручную, поэтому примените стиль вручную.

3. В списке Значение выбора щелкните h1, чтобы можно было создать стиль, применяемый ко всем элементам h1.

Обратите внимание, что для списка Определить в установлено значение Текущая страница. Это указывает, что правило стиля создается в элементе style для текущей страницы.

4. В списке font-family выберите жирный шрифт, например Impact.

5. В поле font-size введите или выберите xx-large.

6. В поле font-variant введите или выберите small-caps.

7. Нажмите кнопку ОК.

8. Чтобы просмотреть созданное правило стиля, перейдите к представлению Источник и прокрутите до элемента style, который размещается внутри элемента head.

Можно увидеть, что для элемента h1 было создано правило стиля CSS.

9. Используйте следующие шаги, чтобы применить стиль к элементу h2 для заголовка таким же способом:

   1. Откройте диалоговое окно Новый стиль, как на шаге 2.

   2. Выберите элемент h2.

   3. Установите для параметра Значение выбора в диалоговом окне Новый стиль значение h2.

   4. Задайте для font-family — comic Sans MS и для font size — small.

Выбор элементов страницы

В Visual Studio 2008 имеется несколько способов выбора элементов на странице. Можно использовать быстрый выбор тега в нижней части области представления Конструктор. При помещении точки вставки в любое место на странице быстрый выбор тега отображает тег, показывающий HTML-код данной области. Теги, которые содержат текущий тег, отображаются слева от тега в панели быстрого выбора тега. Например, если точка вставки находится в ячейке таблицы, в панели быстрого выбора тега отображается тег td, ему предшествует тег tr строки таблицы и тег table таблицы.

При наведении указателя мыши на тег в панели быстрого выбора тега, содержимое тега отображается в представлении Конструктор, а также появляется стрелка на теге. Можно щелкнуть эту стрелку, чтобы выбрать тег и его содержимое, выбрать только содержимое тега, изменить или удалить тег, открыть диалоговое окно Быстрый редактор тегов или диалоговое окно Свойства для элемента.

Также можно использовать клавишу ESC для перехода вверх по иерархии элементов. Например, элемент h1 вложен в элемент div заголовка. Чтобы выбрать весь элемент div, щелкните элемент h1 чтобы выбрать его, и затем используйте клавишу ESC, чтобы выбрать элемент div заголовка. Обратите внимание, что первое нажатие клавиши ESC выделяет элемент h1 и отображает его внутренние и внешние поля. (Используются параметры по умолчанию, так как они не изменялись.) При повторном нажатии клавиши ESC выделяется весь элемент div. Когда элемент выбран, тег отображает div#banner.