在控件中运用样式

haidong

<p >Web的用户界面是很灵活的，每个网站都有完全不同的外观和感受。样式层叠表（CSS）的大量采用很大程度上也是为了满足Web的设计需求。所有ASP.NET的HTML服务器控件和Web 服务器控件都可以很好的支持CSS样式。本文将讨论如何将样式与服务器控件相结合，并演示由此提供的对Web Form外观的精巧控制。 <p ><ccid_nobr><b>在HTML 控件中运用样式 </b></ccid_nobr><p >标准HTML标签通过style属性来支持CSS，可以用以分号分隔的属性/值串对来设置。想要得到更多关于Internet Explorer浏览器支持的CSS属性的信息，请查阅MSDN Web Workshop中Workshop's CSS Attributes Reference页。所有ASP.NET的HTML 服务器控件可以同标准HTML标签一样支持样式。以下的例子是HTML服务器控件中运用的多种样式。如果你查看返回客户端页面的源代码，可以发现这些样式通过控件输出，传至浏览器。 <p >CSS还定义了class属性，可以通过文档中<style>…</style>段中CSS样式定义来设置。Class属性使得一次定义的样式可以方便地在多个标签中使用而无需重复定义。 <p >当ASP.NET页面进行解析时，样式信息会载入System.Web.UI.HtmlControls.HtmlControl 类的Style属性（CssStyleCollection类型）。该属性本质上是一个字典，将控件的样式以集合形式提供出来，该集合中为字符串索引的样式名和对应的样式属性值。例如，你可以用下面的代码在HtmlInputText server控件中设置然后取得width样式属性： <p ><ccid_nobr><table width="580" border="1" cellspacing="0" cellpadding="0" bordercolorlight = "black" bordercolordark = "#FFFFFF"><tr><td bgcolor="e6e6e6" class="code">&lt;script language=&quot;VB&quot; runat=&quot;server&quot; &gt; <br><br>Sub Page_Load(Sender As Object, E As EventArgs)<br>　　　　MyText.Style(&quot;width&quot;) = &quot;90px&quot;<br>　　　　Response.Write(MyText.Style(&quot;width&quot;))<br>　　End Sub <br><br>&lt;/script&gt; <br><br>&lt;input type=&quot;text&quot; id=&quot;MyText&quot; runat=&quot;server&quot;/&gt;     </td></tr></table></ccid_nobr><p ><ccid_nobr><b>在Web服务器控件中运用样式</b></ccid_nobr><p >Web服务器控件还提供更进一步的样式支持，它为一些常用的样式设置如背景和前景颜色、字体名称和大小、宽度、高度等加入了一些强类型的属性。这些样式属性代表了HTML中可用的样式的子集，并在System.Web.UI.WebControls.WebControl基类中直接提供。使用这些属性的好处是它们提供了编译时的类型检查，并可以在Microsoft Visual Studio.NET等开发工具中自动语句补写。<p >System.Web.UI.WebControls名字空间包含Style基类，封装了常用的样式属性（其他的样式类，如TableStyle 和TableItemStyle，派生于这个基类）。许多Web服务器控件提供了这些类的属性，用来指定该控件输出的每个元素的样式。例如，WebCalendar提供了许多这样的样式属性：DayStyle, WeekendDayStyle, TodayDayStyle, SelectedDayStyle, OtherMonthDayStyle, 和NextPrevStyle。可以使用子属性语法PropertyName-SubPropertyName来设置这些样式的属性，通过另一种不同的语法可以将每个Style属性在Web服务器控件标签中声明为一个子元素。<p ><ccid_nobr><table width="580" border="1" cellspacing="0" cellpadding="0" bordercolorlight = "black" bordercolordark = "#FFFFFF"><tr><td bgcolor="e6e6e6" class="code">   &lt;ASP:Calendar ... runat=&quot;server&quot;&gt;<br>　　&lt;TitleStyle BorderColor=&quot;darkolivegreen&quot; BorderWidth=&quot;3&quot;<br>　　　　BackColor=&quot;olivedrab&quot; Height=&quot;50px&quot; /&gt;<br>&lt;/ASP:Calendar&gt;         </td></tr></table></ccid_nobr><p >正如HTML服务器控件一样，可以在Web服务器控件中通过定义CSS class来运用样式。WebControl基类提供了String类的CssClass属性来设置class。<p >除了已经定义过的强类型的属性，如果在服务器控件中设置了其他属性，那么该属性及其值会载入到控件的Attributes集合中。默认情况下，服务器控件将这些属性直接输出至HTML中，返回请求的浏览器客户端。这意味着style和class属性可以直接通过Web服务器控件设置而无需通过强类型属性。这里需要理解控件是如何进行输出的，它也可以灵活的运用样式。这对于标准的表单输入控件特别有用，<p >Web服务器控件样式也可以通过编程来控制，可以使用WebControl基类的ApplyStyle方法来实现，如以下代码所示：<p ><ccid_nobr><table width="580" border="1" cellspacing="0" cellpadding="0" bordercolorlight = "black" bordercolordark = "#FFFFFF"><tr><td bgcolor="e6e6e6" class="code"> &lt;script language=&quot;VB&quot; runat=&quot;server&quot;&gt; <br>　　Sub Page_Load(Src As Object, E As EventArgs)<br>　　　　Dim MyStyle As New Style<br>　　　　MyStyle.BorderColor = Color.Black<br>　　　　MyStyle.BorderStyle = BorderStyle.Dashed<br>　　　　MyStyle.BorderWidth = New Unit(1) <br><br>　　　　MyLogin.ApplyStyle (MyStyle)<br>　　　　MyPassword.ApplyStyle (MyStyle)<br>　　　　MySubmit.ApplyStyle (MyStyle)<br>　　End Sub <br><br>&lt;/script&gt;<br>Login: &lt;ASP:TextBox id=&quot;MyLogin&quot; runat=&quot;server&quot; /&gt;/&lt;p/&gt;<br>assword: &lt;ASP:TextBox id=&quot;MyPassword&quot; TextMode=&quotassword&quot; runat=&quot;server&quot; /&gt;<br>View: &lt;ASPropDownList id=&quot;MySelect&quot; runat=&quot;server&quot;&gt; ... &lt;/ASPropDownList&gt;          </td></tr></table></ccid_nobr><p ><ccid_nobr><b>小结</b></ccid_nobr><p ><ccid_nobr><ol><li>ASP.NET的HTML服务器控件和Web服务器控件家族提供了直接的CSS样式支持。</li><li>样式可以通过控件的style和class属性来设置。这些设置可以通过控件的Attributes集合进行编程。在HTML服务器控件中，每一个样式的属性值可以通过控件的Style集合来获得。 </li><li>大部分常用的样式设置在Web服务器控件中作为强类型属性在控件中直接提供。 </li><li>System.Web.UI.WebControls名字空间包含了Style基类，它封装了常用的样式属性。许多Web服务器控件提供了这样的属性，用来控制每一个输出的元素。 </li><li>Web服务器控件中的样式可以通过WebControl基类中ApplyStyle方法来进行编程控制。 </li></ol></ccid_nobr><p >（责任编辑 <ccid_nobr>尤北</ccid_nobr>）                                 <p align="center"></p></p>