Поделиться через


Диалоговое окно "Построитель стилей"

Обновлен: Ноябрь 2007

Диалоговое окно Построитель стилей предоставляет параметры, позволяющие определять атрибуты стиля таблицы каскадных стилей (CSS). Стиль CSS объединяет отдельные атрибуты форматирования и позиционирования в пригодный для единовременного применения набор атрибутов.

Диалоговое окно Построитель стилей делится на две области. В левой области отображается список из восьми основных категорий (Шрифт, Фон, Текст, Положение, Макет, Границы, Списки и Прочее). При выборе категории в правой панели отображаются параметры выбранной категории. После выбора параметров диалоговое окно Построитель стилей создает определения стилей CSS.

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

Вызов диалогового окна "Построитель стилей"

  1. Нажмите в главном меню Формат, а затем Стиль.

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

  2. Выберите в левой области параметр, чтобы определить атрибуты стилей CSS.

Создание встроенных стилей CSS в режиме разработки

При форматировании элемента HTML, выбранного в режиме разработки, атрибуты стиля встраиваются в разметку этого элемента. Перейдите в режим редактирования кода HTML для просмотра и проверки вставленных атрибутов нового стиля.

Применение атрибутов стиля CSS непосредственно к элементам HTML на веб-странице

  1. Откройте документ HTML в конструкторе HTML в режиме разработки.

  2. Откройте окно "Структура документа", выберите элемент, который необходимо отформатировать, а затем выберите Стиль в меню Формат, чтобы открыть диалоговое окно Построитель стилей.

  3. Выберите в левой области параметр, чтобы определить атрибуты стилей CSS.

Заголовок диалогового окна Построитель стилей будет содержать имя выбранного элемента. Стили CSS можно применять к элементам, находящимся внутри элемента <BODY> документа HTML.

Разметка стиля CSS в режиме редактирования кода HTML

При добавлении встроенного стиля к элементу HTML в режиме разработки в его открывающий тег добавляется разметка HTML, которую затем можно просмотреть и отредактировать в режиме редактирования кода HTML, как показано в следующем примере кода.

<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>

Кроме того, можно создать блок STYLE внутри элемента <HEAD> документа HTML. Пример:

<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>

Стили CSS во внешних таблицах стилей

Стили также можно создавать в отдельном документе таблицы стилей с расширением CSS.

Создание стилей в отдельном документе таблицы стилей с расширением CSS

  1. Откройте внешнюю таблицу стилей (документ CSS) для редактирования или создайте ее, если ее еще нет в веб-приложении, выполнив следующие действия:

    1. Щелкните правой кнопкой мыши веб-узел и выберите Добавление нового элемента.

    2. Из списка Установленные шаблоны Visual Studio в диалоговом окне Добавление нового элемента выберите таблица стилей и нажмите кнопку Добавить, чтобы добавить к веб-узлу новую таблицу стилей.

    3. Дважды щелкните на таблице стилей, чтобы открыть ее для редактирования.

  2. Выберите команду Добавить правило стиля в меню Стили для вставки нового пустого определения стиля.

  3. Поместите курсор внутрь фигурных скобок ("{ }"), которые следуют за селектором правила стиля, нажмите Стили, затем выберите в меню Стили команду Построить стиль, чтобы открыть диалоговое окно Построитель стилей, и добавьте в определение стиля атрибуты.

692as472.alert_note(ru-ru,VS.90).gifПримечание.

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

Чтобы сделать стили, определенные во внешней таблице стилей, доступными для элементов HTML на веб-странице, создайте на странице ссылку на внешнюю таблицу стилей внутри элемента <HEAD>, как показано в следующем примере.

<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">

Применение определений стилей к элементам с помощью свойств CLASS и ID

Начните определение стиля с точки, чтобы определить свойство стиля CLASS, как показано в следующем примере.

.term { font-size:9pt; font-weight:bold; color:darkblue;}

Определенное в конструкторе HTML свойство стиля CLASS можно применить к элементу на веб-странице в режиме разработки или редактирования кода HTML. В режиме разработки текст и элементы можно выбирать в редакторе WYSIWYG, или же использовать для этого окно "Структура документа". В раскрывающемся меню Стиль в панели инструментов Формат выберите нужный стиль — он будет применен к выбранному элементу.

В режиме редактирования кода HTML можно выбрать элемент в окне "Структура документа", затем открыть окно "Свойства", перейти к свойству CLASS выбранного элемента и указать в нем селектор нужного стиля CSS (без точки). В результате свойство CLASS будет вставлено в разметку HTML для данного элемента. Пример:

<DIV CLASS="term">World Wide Web</DIV> 

При использовании предыдущего определения стиля "term" слова "World Wide Web" будут отображаться жирным шрифтом размером 9 pt, темно-синего цвета.

Можно также определять уникальные стили, используемые только в одном месте на странице. Имя уникального стиля начинается с символа решетки ("#"), как показано в следующем примере.

#bigdeal {font-decoration:underline; font-size:24pt; color:red;}

Применение уникального стиля к элементу на веб-странице

  1. Откройте страницу в конструкторе HTML в режиме редактирования кода HTML.

  2. Используйте окно "Структура документа" для выбора элемента, после чего откройте окно "Свойства".

  3. В качестве значения свойства ID этого элемента укажите селектор нужного стиля.

В результате атрибут ID будет вставлен в разметку данного элемента. Пример:

<P ID="bigdeal">Happy Birthday</P>
  1. При использовании предыдущего определения стиля "term" слова "Happy Birthday" будут отображаться шрифтом размером 24 pt красного цвета с подчеркиванием.

Задачи

Пошаговое руководство. Базовое редактирование HTML в Visual Web Developer

Пошаговое руководство. Создание и изменение CSS-файла

Элементы пользовательского интерфейса

Дополнительные сведения

См.

Шрифты

страница "Шрифт", диалоговое окно "Построителе стилей"

Фоны

Диалоговое окно "Фон, Построитель стилей"

Текст

Диалоговое окно "Построитель стилей", страница "Текст"

Позиционирование элементов на странице

Диалоговое окно "Построитель стилей", страница "Положение"

Управление потоком, переполнением, отсечением и печатью разрывов страниц.

Диалоговое окно "Построитель стилей", страница "Макет"

Границы, поля и интервалы заполнения.

Диалоговое окно "Построитель стилей", страница "Края"

Списки

Диалоговое окно "Построитель стилей", страница "Списки"

Пользовательский интерфейс, таблицы и визуальные эффекты

Диалоговое окно "Построитель стилей", страница "Прочее"

См. также

Основные понятия

Общие сведения о работе с CSS

Ссылки

Диалоговое окно "Палитра цветов"

Диалоговое окно "Выбор шрифтов"