ASP.NET Web 服务器控件和 CSS 样式

2014-10-22

更新：2007 年 11 月

您可以通过设置各种外观属性（如 ForeColor、BackColor、Height 和 Width）来控制 ASP.NET 服务器控件的外观。此外，部分控件支持公开附加样式相关设置的样式对象。

说明：
ASP.NET 网页在运行时可以当作 HTML 页。您因此可以使用级联样式表 (CSS) 设置页（而不是 Web 服务器控件）上任何元素的外观。另外，您可以定义包括级联样式表设置的 ASP.NET 主题，然后将这些主题应用于页或网站。有关详细信息，请参见 ASP.NET 主题和外观。

以下各部分提供关于直接设置样式的信息，包括在设计时以及通过编程方式时如何使用样式表。

将外观属性呈现到浏览器

当页运行时，外观属性将根据用户浏览器的功能呈现。如果用户的浏览器支持级联样式表 (CSS)，外观属性将呈现为构成控件的 HTML 元素的样式属性。例如，如果您定义了一个 HyperLink Web 服务器控件，并将其 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 Web 服务器控件和浏览器功能。

控件样式对象

除了 ForeColor 和 BackColor 等外观属性之外，控件还会公开一个或多个样式对象，用于封装附加的外观属性。Font 样式属性就是一个示例，它公开 FontInfo 类型的对象，这种类型的对象包含与字体有关的单个属性，如 Size、Name 和 Bold。

部分控件公开您可以用于设置控件特定部分的外观的样式对象。例如，Calendar Web 服务器控件包含 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 属性中定义的样式同时应用于文本和容器元素，并会添加内联样式，以消除双重应用的影响（双边框、字体倍增等）。

控件样式的最佳设置方法是，使用该控件定义的样式属性，并在必要时使用样式表或内联样式对个别元素进行微调。若要重写控件的样式属性定义的样式，请在样式表或内联样式中使用 !important CSS 规则。

下面的代码示例在 hovernodestyle 元素上使用了 CssClass 属性。该类进行了两次定义（分别定义为 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 属性中作出的设置并未在相应的各个外观属性中反映出来。例如，如果您在 Style 属性中将一个字符串设置为 background-color:red ，BackColor 属性不会同时也设置为 red，即使控件将显示为红色背景。此外，如果您同时设置了外观属性和 Style 属性，则各个外观属性的优先级高于 Style 属性。

通过