使用HTML服务器控件的时候,你可以使用CSS类定义给Web服务器控件应用样式。WebControl基类暴露了一个叫做CssClass的字符串属性,用于设置样式类:
<style> .calstyle { font-size:12pt; font-family:Tahoma,Arial; } </style>
<ASP:Calendar CssClass="calstyle" runat="server" …… /> | 如果某个服务器控件上设置的属性没有与该控件的强类型属性相对应,那个该属性和值就被填充到控件的Attributes集合中。在默认情况下,服务器控件会把这些属性不作更改地呈现在HTML中,并返回给作出请求的浏览器客户端。这意味着,我们可以直接设置Web服务器控件的样式和类属性,而不必使用强类型的属性。尽管它要求我们理解控件的实际显示过程,但是它也是应用样式的一个灵活的途径。对于标准的输入控件,这样的操作用处很大,如下面的例子所示:
<ASP:TextBox runat="server" class="beige" style="font-weight:700;"/> <ASP:TextBox TextMode="Password" runat="server" class="beige"/> <ASP:DropDownList class="beige" runat="server"> <ASP:ListItem>Default Desktop</ASP:ListItem> <ASP:ListItem>My Stock Portfolio</ASP:ListItem> <ASP:ListItem>My Contact List</ASP:ListItem> </ASP:DropDownList> <ASP:Button Text="Submit" runat="server" class="beige"/> | 我们也可以使用WebControl基类的ApplyStyle方法来编程设置Web服务器控件的样式,如下面的代码所示:
<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> | 利用主题来定制站点
前面的部分演示了几种通过设置控件自身的样式属性来指定控件样式的方法。例如,我们看看如下的页面(代码),在这个页面上的各个控件上都应用了很多样式设置。
<asp:Label ID="Label1" runat="server" Text="Hello 1" Font-Bold="true" ForeColor="orange" /><br />
<asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" ID="Calendar1" NextPrevFormat="ShortMonth" runat="server" Width="330px"> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#999999" ForeColor="White" /> <DayStyle BackColor="#CCCCCC" /> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" /> </asp:Calendar> | 作为在各个控件上指定样式的补充,ASP.NET 2.0引入了"主题"的概念,它提供了一种定义站点的控件和页面的样式设置的简单途径,而且它与应用程序的页面是分离的。主题的优势在于,你在设计站点的时候不用考虑它的样式,在将来应用样式的时候,不必更新页面或应用程序代码。你还可以从外部获取定制的主题,然后应用到自己的应用程序上。主题的优势是,样式设置都存储在一个单独的位置,它的维护与应用程序是分离的。
下面的例子演示了一个带有主题的页面。请注意,这个页面本身没有包含任何样式信息。主题在运行时自动地把样式属性应用到页面的控件上。
<%@ Page Language="VB" Theme="ExampleTheme" %>
<asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Calendar ID="Calendar1" runat="server"/> <asp:GridView ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="au_id" runat="server"> …… </asp:GridView> <asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:Pubs %>" ID="SqlDataSource1" runat="server" SelectCommand="SELECT [au_id], [au_lname], [au_fname], [state] FROM [authors]"> </asp:SqlDataSource> |
上一页 [1] [2] [3] [4] [5] [6] [7] [8] 下一页 |