ASP.NET定义主题和外观

ASP.NET定义主题和外观2011-03-18定义

主题由一组元素组成：外观、级联样式表（CSS）、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。

外观

外观文件具有文件扩展名 .skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含您要作为主题的一部分来设置的属性。

有两种类型的控件外观 -“默认外观”和“已命名外观”：

当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有 SkinID 属性，则是默认外观。已命名外观是设置了 SkindID属性的控件外观。

级联样式表

主题还可以包含级联样式表（。css 文件）。将 .css 文件放在主题文件夹中时，样式表自动作为主题的一部分加以应用。使用文件扩展名 .css 在主题文件夹中定义样式表。

主题图形和其他资源

主题还可以包含图形和其他资源，例如脚本文件或声音文件。

例子

1、首先选择网站项目名称→右键单击→添加新项

2.系统会建立一个app_themes文件夹，并在里面建立一个皮肤文件夹sampleTheme，并在里面建立一个皮肤文件sampleTheme.skin.

3.在皮肤文件夹sampleTheme中添加一个Label.skin文件和Calendar.skin文件。

4.文件内容如下：

Label.skin

<asp:label runat="server"
   font-bold="true"
   forecolor="orange" />
   
<asp:label runat="server" SkinID="Blue"
   font-bold="true"
   forecolor="blue" />

Calendar.skin：

<asp:Calendar runat="server"
   BackColor="#FFFFCC"
   BorderColor="#FFCC66"
   BorderWidth="1px"
   DayNameFormat="FirstLetter"
   Font-Names="Verdana"
   Font-Size="8pt"
   ForeColor="#663399"
   Height="200px"
   ShowGridLines="True"
   Width="220px">
   
   <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
   <SelectorStyle BackColor="#FFCC66" />
   <OtherMonthDayStyle ForeColor="#CC9966" />
   <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
   <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
   <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
   <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
</asp:Calendar>
<asp:Calendar SkinID="Simple" runat="server"
   BackColor="White"
   BorderColor="#999999"
   CellPadding="4"
   DayNameFormat="FirstLetter"
   Font-Names="Verdana"
   Font-Size="8pt"
   ForeColor="Black"
   Height="180px"
   Width="200px">
   
   <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
   <SelectorStyle BackColor="#CCCCCC" />
   <WeekendDayStyle BackColor="#FFFFCC" />
   <OtherMonthDayStyle ForeColor="#808080" />
   <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
   <NextPrevStyle VerticalAlign="Bottom" />
   <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
   <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>