webtemplates.aspx

书籍教程 >> .Net教程 >> asp.net编程精彩百例


<%@ Register TagPrefix="Acme" Namespace="Acme" Assembly="QSTools" %> <%@ Register TagPrefix="Acme" TagName="SourceRef" Src="/quickstart/aspplus/util/SrcRef.ascx"%>

<!-- #include virtual="/quickstart/aspplus/include/header.inc" -->

<h4>对控件应用样式</h4>
<p>

<div class="indent" style="font-family:Verdana; font-size:8pt;">
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#htmlstyles">对 HTML 控件应用样式</a><br>
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#webstyles">对 Web 服务器控件应用样式</a><br>
    <b> <img align="middle" src="/quickstart/images/bullet.gif">&nbsp;&nbsp;</b><a class="toc2" href="#summary">本节小结</a><br>
</div>
<p>
<hr>

Web 是一个灵活的用户界面环境，不同 Web 站点的外观差别极大。Web 上的丰富设计是广泛采用级联样式表 (CSS) 的结果。ASP.NET 的所有 HTML 服务器控件和 Web 服务器控件都已被设计为提供一流的 CSS 样式支持。本节讨论如何将样式与服务器控件一起使用，并说明如何很好地控制服务器控件所提供的 Web 窗体外观。

<!--BEGIN SECTION--> <br> <a name="htmlstyles"><br> <span class="subhead">对 HTML 控件应用样式</span>
<p>

标准 HTML 标记通过样式属性支持 CSS，而样式属性可以设置为用分号分隔的属性/值对列表。有关 Internet Explorer 浏览器支持的 CSS 属性的更多信息，请参阅 MSDN Web Workshop 的 <a target="_blank" href="http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp">CSS Attributes Reference</a> 页。所有的 ASP.NET HTML 服务器控件都可以采用与标准 HTML 标记完全一样的方式接受样式。下面的示例阐释若干应用于各种 HTML 服务器控件的样式。如果在返回到客户端的页上查看源代码，您会看到这些样式在控件的呈现中传递给了浏览器。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style1.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style1.src"
  Icon="/quickstart/aspplus/images/style1.gif"
  Caption="C# Style1.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style1.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style1.src"
  Icon="/quickstart/aspplus/images/style1.gif"
  Caption="VB Style1.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style1.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style1.src"
  Icon="/quickstart/aspplus/images/style1.gif"
  Caption="JScript Style1.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>


<p>
CSS 还定义了一个类属性，该属性可设置为文档的 &lt;style&gt;...&lt;/style&gt; 节中包含的 CSS 样式定义。该类属性使您可以轻松地一次性定义样式并将它们应用于若干标记，而不必重新定义样式本身。HTML 服务器控件上的样式也可以以这种方式设置，如下面的示例所示。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style2.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style2.src"
  Icon="/quickstart/aspplus/images/style2.gif"
  Caption="C# Style2.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style2.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style2.src"
  Icon="/quickstart/aspplus/images/style2.gif"
  Caption="VB Style2.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style2.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style2.src"
  Icon="/quickstart/aspplus/images/style2.gif"
  Caption="JScript Style2.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
在分析 ASP.NET 页时，样式信息被填充到 <b>System.Web.UI.HtmlControls.HtmlControl</b> 类上的 <b>Style</b> 属性（<b>CssStyleCollection</b> 类型）中。该属性本质上是一个词典，它将控件的样式公开为每个样式属性键值的字符串索引集合。例如，可以使用下面的代码在 <b>HtmlInputText</b> 服务器控件上设置并随后检索 <b>width</b> 样式属性。

<p>
<Acme:TabControl runat="server">
<Tab Name="C#">
&lt;script language="C#" runat="server" &gt;

    void Page_Load(Object sender, EventArgs E) {
        MyText.Style["width"] = "90px";
        Response.Write(MyText.Style["width"]);
    }

&lt;/script&gt;

&lt;input type="text" id="MyText" runat="server"/&gt;
</Tab>

<Tab Name="VB">
&lt;script language="VB" runat="server" &gt;

    Sub Page_Load(Sender As Object, E As EventArgs)
        MyText.Style("width") = "90px"
        Response.Write(MyText.Style("width"))
    End Sub

&lt;/script&gt;

&lt;input type="text" id="MyText" runat="server"/&gt;
</Tab>

<Tab Name="JScript">
&lt;script language="JScript" runat="server" &gt;

    function Page_Load(sender : Object, E : EventArgs) : void {
        MyText.Style("width") = "90px";
        Response.Write(MyText.Style("width"));
    }

&lt;/script&gt;

&lt;input type="text" id="MyText" runat="server"/&gt;
</Tab>
</Acme:TabControl>

<p>
下一个示例显示可以如何使用此 <b>Style</b> 集合属性以编程方式操作 HTML 服务器控件的样式。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style3.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style3.src"
  Icon="/quickstart/aspplus/images/style3.gif"
  Caption="C# Style3.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style3.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style3.src"
  Icon="/quickstart/aspplus/images/style3.gif"
  Caption="VB Style3.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style3.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style3.src"
  Icon="/quickstart/aspplus/images/style3.gif"
  Caption="JScript Style3.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<!--BEGIN SECTION--> <br> <a name="webstyles"><br> <span class="subhead">对 Web 服务器控件应用样式</span>
<p>

Web 服务器控件通过为常用的样式设置（如背景色和前景色、字体名称和大小、宽度、高度等等）添加若干强类型属性，提供了附加的样式支持级别。这些样式属性表示可在 HTML 中使用的样式行为的子集，它们被表示为直接在 <b>System.Web.UI.WebControls.WebControl</b> 基类上公开的“平面”属性。使用这些属性的优点是它们在开发工具（如 Microsoft Visual Studio .NET）中提供编译时类型检查和语句结束。
<p>
下面的示例显示一个应用了若干样式的 <b>WebCalendar</b> 控件（还包括一个未应用样式的日历以便对比）。注意，当设置的属性是类类型（如 <b>Font</b>）时，需要使用子属性语法 <i>PropertyName-SubPropertyName</i>。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style4.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style4.src"
  Icon="/quickstart/aspplus/images/style4.gif"
  Caption="C# Style4.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style4.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style4.src"
  Icon="/quickstart/aspplus/images/style4.gif"
  Caption="VB Style4.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style4.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style4.src"
  Icon="/quickstart/aspplus/images/style4.gif"
  Caption="JScript Style4.aspx"
  runat="server" />
  </JsTemplate>
</Acme:LangSwitch>

<p>
<b>System.Web.UI.WebControls</b> 命名空间包括一个封装公共样式属性（其他样式类如 <b>TableStyle</b> 和 <b>TableItemStyle</b> 从该公共基类继承）的 <b>Style</b> 基类。许多 Web 服务器控件公开该类型的属性，以指定控件的个别呈现元素的样式。例如，<b>WebCalendar</b> 公开许多这样的样式属性：<b>DayStyle</b>、<b>WeekendDayStyle</b>、<b>TodayDayStyle</b>、<b>SelectedDayStyle</b>、<b>OtherMonthDayStyle</b> 和 <b>NextPrevStyle</b>。可以使用子属性语法 <i>PropertyName-SubPropertyName</i> 设置这类样式的个别属性，如下面的示例所示。
<p>


<Acme:LangSwitch runat="server">
  <CsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/CS/style5.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style5.src"
  Icon="/quickstart/aspplus/images/style5.gif"
  Caption="C# Style5.aspx"
  runat="server" />
  </CsTemplate>
  <VbTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/VB/style5.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style5.src"
  Icon="/quickstart/aspplus/images/style5.gif"
  Caption="VB Style5.aspx"
  runat="server" />
  </VbTemplate>
  <JsTemplate>
<Acme:SourceRef
  RunSample="/quickstart/aspplus/samples/webforms/customize/JS/style5.aspx"
  ViewSource="/quickstart/aspplus/samples/webforms/customize/style5.src"