使用组件的样式

网络对用户界面来说是一个灵活的环境,各式各样的网站样式各异.层叠样式表(CSS)的普遍使用是造成Web设计丰富多彩

的原因.所有的ASP.NET的HTML组件和网络服务器端组件都都被设计成为对层叠样式表具备很好的支持.这部分讨论如何将样式关

联到服务器组件并在你的Web窗体中使用ASP.NET2.0提供的样式美观的组件.

  在HMTL组件(HTML Controls)上使用样式
 

标准的HTML标记通过一个样式属性支持CSS,并通过一对分号将这个属性值括起来.如果想了解更多关于IE浏览器支持的CSS

属性信息,请浏览MSDN Web Workshop的 层叠样式表属性参考页面.所有的ASP.NET HTML服务组件都可以以标准HTML标记的方

 

式正确接受到样式设置.下面的例子用与示例在不同的HTML服务器组件使用样式.如果你看到浏览器的页面上显示源代码,你

将看到已经被浏览器支持的组件样式是如何显现的.

          VB Style1.aspx

 
  CSS 也定义了一类属性,这类属性可以在文档的<style>...</style>部分用CSS样式定义设置.这类属性使一次定义多次调

用变得更简单而无须重新定义.HTML服务器组件的样式也可以通过下面这样的方式被设置,类似下面这样示例的实现.

        VB Style2.aspx


当一个ASP.NET页面被解析,样式信息被组装到System.Web.UI.HtmlControls.HtmlControl类的一个样式属性(CssStyleColl

ection类型).这个属性在本质上是一个针对没一个属性关键字对应一个组件属性表现的排序了的字符串字典.例如,你可以

使用下面的代码设置并返回一个HTMLInputText服务器组件的宽度(Width)样式.

<script language="VB" runat="server" >

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

</script>

<input type="text" id="MyText" runat="server"/>

VB
下面的一个例子展现如何让你熟练的使用样式集合属性(Style collection property)编写HTML服务器组件的样式.

        VB Style3.aspx


在网络服务器端组件(Web Server Controls)上使用样式
网络服务器端组件通过添加对一些经常使用的属性设置的强类型属性，以对样式提供一组增强级别的支持。(这些属性设置

)比如说背景和前景的颜色，字体名称和大小，宽度，高度，等等。这些样式属性描述了一个HTML中的可用样式的子集，直

接从基类System.Web.UI.WebControls.WebControl继承得到，使用这些属性的优势在于它们是编译时(进行)类型检查的并

且可以在例如Microsoft Visual Studio .NET这样的开发工具中编码完成。
下面的例子展现一个网络日历的样式设置(同时提供一个未进行样式设置的日历进行对比)。注意设置的属性是一个类的特

性，比如字体，你必须使用子属性语法属性名-子属性名

      VB Style4.aspx


System.Web.UI.WebControls命名空间包括一个压缩了通用样式属性的样式基础类(额外的样式类,比如表样式(TableStyle)

和表项目样式(TableItemStyle),都是继承于这个公共基础类),很多网络服务器端组件通过从通用样式导出个性化的属性以

表现组件元素,网络日历(WebCalendar)导出许多这样的样式属性:DayStyle, WeekendDayStyle, TodayDayStyle,

SelectedDayStyle, OtherMonthDayStyle,

和NextPrevStyle,你可以通过设置子属性语法属性-子属性(PropertyName-SubPropertyName)来单独的设置这些属性中的一

些,例如下面的事例示范.

     VB Style5.aspx


一个细微不同的语法允许在服务器端组件中的每一个样式属性被声明成子元素嵌套的形式.

<ASP:Calendar ... runat="server">
    <TitleStyle BorderColor="darkolivegreen" BorderWidth="3"
            BackColor="olivedrab" Height="50px" />
</ASP:Calendar>

下面的例子展示了另一个可供选择的语法,该示例的功能等同于前一个示例.

   VB Style6.aspx


类似于HTML服务器组件,你可以通过使用CSS类定义来应用网络服务器端组件的样式.WebControl基类导出一个名为CssClass

的字符串属性以用语设置样式类.

     VB Style7.aspx


如果设置一个服务器组件属性(attribute)时,这个属性不符合服务器组件的任何强类型属性(property),那么这个属性和值

被组装到组件的一个属性集合中.缺省下,服务器组件将放弃这些属性,不对HTML进行更改直接返回到发出请求的浏览器客户

端(译者注:当客户端浏览器发送对某一个服务器组件的属性更改的命令时,如果这个属性不属于强类型的属性,则服务器端

将放弃对这个属性的更改,不对浏览器客户端的HTML页面代码进行更改).这意味着样式和类特性可以直接在网络服务器端组

件上被设置以取代使用强类型属性.当这些命令能被组件的实际表现部分理解的时候,它也可以是一种灵活使用样式的方式

它对标准窗体的输入组件特别的有用,比如下面的这个示例.

VB Style8.aspx


网络服务器组件样式也是程序化的设置的,使用基类WebControl的ApplyStyle方法,例如下面的代码.

<script language="VB" runat="server">
    Sub Page_Load(Src As Object, E As EventArgs)
        Dim MyStyle As New Style
        MyStyle.BorderColor = Color.Black
        MyStyle.BorderStyle = BorderStyle.Dashed
        MyStyle.BorderWidth = New Unit(1)

        MyLogin.ApplyStyle (MyStyle)
        MyPassword.ApplyStyle (MyStyle)
        MySubmit.ApplyStyle (MyStyle)
    End Sub
</script>

Login: <ASP:TextBox id="MyLogin" runat="server" />/<p/>
Password: <ASP:TextBox id="MyPassword" TextMode="Password" runat="server" />
View:  <ASP:DropDownList id="MySelect" runat="server">  ...  </ASP:DropDownList

VB
下面的势利用于示范上面的代码.

   VB Style9.aspx