Серверные веб-элементы управления ASP.NET и стили CSS
Обновлен: Ноябрь 2007
Внешний вид элементов управления ASP.NET можно изменять, задавая различные свойства внешнего вида, такие как ForeColor, BackColor, Height, и Width. Кроме того, некоторые элементы управления поддерживают объекты стиля, представляющие дополнительные параметры стиля.
.gif "Примечание") Примечание. |
|---|
Страницы Web Forms ASP.NET (ASPX-файлы) во время выполнения функционируют как HTML-страницы. Таким образом, можно использовать таблицу каскадных стилей (CSS) для установки внешнего вида любого элемента на странице, кроме серверных веб-элементов управления. Кроме того, можно описывать темы ASP.NET, которые содержат таблицы каскадных стилей, а затем применять их на страницах или сайтах. Дополнительные сведения см. в разделе Темы и обложки ASP.NET. |
В следующих разделах представлены сведения о непосредственной установке стилей и способах работы со стилями в режиме разработки, а также программными методами.
Отрисовка свойств внешнего вида в обозревателе
При запуске страницы свойства внешнего вида воспроизводятся в соответствии с возможностями обозревателя пользователя. Если обозреватель пользователя поддерживает таблицу каскадных стилей (CSS), свойства внешнего вида воспроизводятся как атрибуты стиля HTML-элементов, осуществляющих управление. Например, если описывается серверный элемент управления HyperLink, и свойство ForeColor устанавливается в Red, его свойство Boldв true, и свойство Size в значение xx-small, элемент управления отрисовывается таким образом (если обозреватель поддерживает таблицы стилей):
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
<a id="hyperlink1" style="color: red; font-size: xx-small; font-weight: bold;">HyperLink</a>
С другой стороны, если пользовательский обозреватель не поддерживает стили, элемент управления воспроизводится с помощью других средств, таких как элемент <font>. Ниже показано воспроизведение только что приведенного примера в случае, если обозреватель не поддерживает стили:
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
<a id="a1"><b><font color="red" size="1">HyperLink</font></b></a>
Другими примерами свойств, воспроизводимых различным образом в зависимости от обозревателя, являются свойства BorderWidth и BorderColor.
Некоторые свойства внешнего вида, например BorderStyle, нельзя воспроизвести без использования стилей. Эти свойства, таким образом, игнорируются в обозревателей, не поддерживающем стили. Дополнительные сведения см. в разделе Серверные веб-элементы управления ASP.NET и возможности обозревателей.
Объекты стиля элементов управления
В дополнение к таким простым свойствам внешнего вида как ForeColor и BackColor, элементы управления представляют один или несколько объектов стиля, обладающих дополнительными свойствами внешнего вида. Примером может служить свойство стиля Font, представляющее объект типа FontInfo, содержащий индивидуальные свойства, относящиеся к шрифту, такие как Size, Name, Bold и т. п.
Некоторые элементы управления представляют объекты стиля, которые могут быть использованы при настройке специальных разделов элемента управления. Например, серверный веб-элемент управления Calendar содержит объекты стилей, напримерDayStyle (дни), SelectedDayStyle (день, неделя или месяц, указанные пользователем) и WeekendDayStyle. Например, при использовании объекта стиля SelectedDayStyle можно присвоить свойствам BackColor и ForeColor день, выбранный пользователем.
Многие объекты стиля относятся к типу Style или TableItemStyle, так как они устанавливают атрибуты ячеек таблицы. Свойство Font имеет тип FontInfo.
Приоритет и наследование объектов стиля
В сложных элементах управления объекты стиля часто наследуют характеристики других объектов стиля. Например, в элементе управления Calendar объект SelectedDayStyle основывается на объекте DayStyle. Если какое-либо свойство для объекта SelectedDayStyle не установлено явно, он наследует свои характеристики из объекта DayStyle.
Наследование означает, что установленные свойства объектов стиля имеют порядок приоритетов. Например, в следующем списке представлен порядок свойств объектов стиля для элемента управления Calendar, где наибольшим приоритетом пользуются параметры, расположенные последними в списке.
Свойства внешнего вида основного элемента управления Calendar.
Объект стиля DayStyle.
Объект стиля WeekendDayStyle.
Объект стиля OtherMonthDayStyle.
Объект стиля TodayDayStyle.
Объект стиля SelectedDayStyle.
Если стили разбросаны между элементами в контейнере и текстовыми элементами, могут возникнуть несоответствия. Например, при наличии таблицы стилей элемента управления, если нужно применить свойства текста к ссылке, а прочие стили — к контейнеру. Это легко сделать, если установить стили при помощи свойств стилей элемента управления, например MenuItemStyle для меню или TodayDayStyle для календаря. Однако намного сложнее использовать стили, описанные свойством CssClass, поскольку ASP.NET не может определять содержимое класса на сервере. ASP.NET применяет стили, описанные свойством CssClass, к тексту и элементам контейнера и добавляет встроенный стиль для подавления дублирования (двойные рамки, пропорциональное увеличение шрифтов и пр.).
Лучший метод применить стиль к элементу состоит в использовании свойств стилей, описанных в элементе, и использовании таблицы стилей или встроенных стилей; это обеспечивает минимальную настройку отдельных элементов. Для переопределения стиля, описанного в свойствах стиля элемента управления, используйте правило CSS !important в таблице стилей или встроенном стиле.
В следующем примере кода используется свойство CssClass элемента hovernodestyle. Этот класс описан дважды как myclass и как a.myclass:visited, и, таким образом, переопределяет описание a:visited.
<%@ Page Language="C#" %>
<html>
<head runat="server">
<asp:sitemapdatasource id="SiteMapSource" runat="server" />
<style type="text/css">
a:visited
{
color: #000066
}
myclass, a.myclass:visited {
color: #FF0000
}
</style>
</head>
<body>
<form runat="server">
<a href="https://www.Contoso.com">Contoso</a>
<asp:treeview id="treeview1" runat="server"
initialexpanddepth="1"
datasourceid="SiteMapSource"
forecolor="#444444"
font-names="Verdana"
font-size="0.8em">
<nodestyle font-bold="true" />
<hovernodestyle cssclass=myclass />
</asp:treeview>
</form>
</body>
</html>
При использовании для настройки вида элемента управления каскадных таблиц стилей (CSS) используются либо встроенные стили, либо отдельный CSS-файл (использовать их одновременно нельзя). Одновременное использование встроенных стилей и отдельного CSS-файла может привести к непредвиденным результатам.
Непосредственное управление стилями и классами CSS
В дополнение к свойствам внешнего вида и объектам стиля элементы управления представляют два свойства, дающие возможность более прямого управления стилями CSS: CssClass и Style. Свойство CssClassпозволяет присвоить элементу управления таблицу стилей. Свойство Styleдает возможность записи строки атрибутов стиля как для элемента управления. Свойство Styleпозволяет устанавливать атрибуты стиля, не представленные в других свойствах. Свойство Style представляет коллекцию подобных методов, например Add и Remove, которые можно вызывать для непосредственной установки стилей.
Параметры, установленные в свойстве Style, не отражаются в соответствующем свойстве индивидуального внешнего вида. Например, при установке строки background-color:red в свойстве Style для свойства BackColorне задается значение red, несмотря на то, что элемент управления воспроизводится на красном фоне. Более того, при задании обоих свойств внешнего вида и свойства Style индивидуальные свойства внешнего вида имеют приоритет над свойством Style.
См. также
Основные понятия
Серверные веб-элементы управления ASP.NET и возможности обозревателей