Диалоговое окно "Построитель стилей"
Обновлен: Ноябрь 2007
Диалоговое окно Построитель стилей предоставляет параметры, позволяющие определять атрибуты стиля таблицы каскадных стилей (CSS). Стиль CSS объединяет отдельные атрибуты форматирования и позиционирования в пригодный для единовременного применения набор атрибутов.
Диалоговое окно Построитель стилей делится на две области. В левой области отображается список из восьми основных категорий (Шрифт, Фон, Текст, Положение, Макет, Границы, Списки и Прочее). При выборе категории в правой панели отображаются параметры выбранной категории. После выбора параметров диалоговое окно Построитель стилей создает определения стилей CSS.
Атрибуты стиля CSS можно применять непосредственно к отдельным элементам HTML на одиночной веб-странице или добавлять их к правилам стилей CSS, хранящимся во внешних таблицах стилей. Внешние таблицы стилей можно использовать для одновременного задания общего внешнего вида нескольких веб-страниц.
Вызов диалогового окна "Построитель стилей"
Нажмите в главном меню Формат, а затем Стиль.
Появится диалоговое окно Построитель стилей.
Выберите в левой области параметр, чтобы определить атрибуты стилей CSS.
Создание встроенных стилей CSS в режиме разработки
При форматировании элемента HTML, выбранного в режиме разработки, атрибуты стиля встраиваются в разметку этого элемента. Перейдите в режим редактирования кода HTML для просмотра и проверки вставленных атрибутов нового стиля.
Применение атрибутов стиля CSS непосредственно к элементам HTML на веб-странице
Откройте документ HTML в конструкторе HTML в режиме разработки.
Откройте окно "Структура документа", выберите элемент, который необходимо отформатировать, а затем выберите Стиль в меню Формат, чтобы открыть диалоговое окно Построитель стилей.
Выберите в левой области параметр, чтобы определить атрибуты стилей 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
Откройте внешнюю таблицу стилей (документ CSS) для редактирования или создайте ее, если ее еще нет в веб-приложении, выполнив следующие действия:
Щелкните правой кнопкой мыши веб-узел и выберите Добавление нового элемента.
Из списка Установленные шаблоны Visual Studio в диалоговом окне Добавление нового элемента выберите таблица стилей и нажмите кнопку Добавить, чтобы добавить к веб-узлу новую таблицу стилей.
Дважды щелкните на таблице стилей, чтобы открыть ее для редактирования.
Выберите команду Добавить правило стиля в меню Стили для вставки нового пустого определения стиля.
Поместите курсор внутрь фигурных скобок ("{ }"), которые следуют за селектором правила стиля, нажмите Стили, затем выберите в меню Стили команду Построить стиль, чтобы открыть диалоговое окно Построитель стилей, и добавьте в определение стиля атрибуты.
![]() |
---|
Меню Стили, включающее команды Добавить правило стиля и Построить стиль, появляется, когда внешняя таблица стилей 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;}
Применение уникального стиля к элементу на веб-странице
Откройте страницу в конструкторе HTML в режиме редактирования кода HTML.
Используйте окно "Структура документа" для выбора элемента, после чего откройте окно "Свойства".
В качестве значения свойства ID этого элемента укажите селектор нужного стиля.
В результате атрибут ID будет вставлен в разметку данного элемента. Пример:
<P ID="bigdeal">Happy Birthday</P>
- При использовании предыдущего определения стиля "term" слова "Happy Birthday" будут отображаться шрифтом размером 24 pt красного цвета с подчеркиванием.
Задачи
Пошаговое руководство. Базовое редактирование HTML в Visual Web Developer
Пошаговое руководство. Создание и изменение CSS-файла
Элементы пользовательского интерфейса
Дополнительные сведения |
См. |
---|---|
Шрифты |
|
Фоны |
|
Текст |
|
Позиционирование элементов на странице |
|
Управление потоком, переполнением, отсечением и печатью разрывов страниц. |
|
Границы, поля и интервалы заполнения. |
|
Списки |
|
Пользовательский интерфейс, таблицы и визуальные эффекты |