1. Style Themes and Skin
l ASP.Net 2.0 新应用样式
ASP.Net 2.0包含大量用于定制外观的新特性。其中,服务器端控件提供Style对象模型,用于定制字体、边界、背景前景颜色、宽度、高度等等信息。同时,控件还支持使用CSS定制其外观。还可以把所有这些定制在一些skin文件里,并把这些描述控件外观的skin文件放置在theme文件夹中,反复使用
l 为控件定制风格
ü 为HTML控件定制外观
CSS是一套统一的描述标记,这套标记是相对于HTML相对独立的,这套标记使用很多特殊的符号来定制一些自己的外观描述方式。比如,CSS可以方便的描述一个文字的大小,尺寸,宽度,高度,文字的前景演示背景颜色,以及控件的各种各样的属性。CSS是一套开放性国际标准,目前被各个浏览器广泛兼容,我们在.NET中可以方便的引入CSS为我们的控件定制外观。
? 对于HTML控件,可以使用CSS来定制其外观,无论是客户端的HTML控件还是服务器端HTML控件,其定制方法都一样
? CSS既可以直接定制每个控件的显示风格,也可以定制一种风格并命名为一个类,只需要指定一个控件的显示风格是该类即可。
? 代码示例:通过CSS定制显示HTML控件
一种方式:在控件定义过程中使用style定义,如下:
<button id="Button1" style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server">Click me!</button>
<input id="Text1" type="text" value="One, Two, Three" style="font: 14pt verdana;background-color:yellow;border-tyle:dashed;border-color:red;width:300;" runat="server"/>
<select id="Select1" style="font: 14pt verdana;background-color:lightblue;color:purple;" runat="server">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<span style="font: 16 pt verdana;font-weight:300">
<input id="Radio1" type="radio" name="Mode" checked style="width:50;background-color:red;zoom:200%" runat="server"/>Option 1<br>
<input id="Radio2" type="radio" name="Mode" style="width:50;background-color:red;zoom:200%" runat="server"/>Option 2<br>
<input id="Radio3" type="radio" name="Mode" style="width:50;background-color:red;zoom:200%" runat="server"/>Option 3
</span>
第二种方式是我们把CSS先提前定制出来,然后把控件指定他的style。如下定义:(放在<head></head>里面)
<style>
.spanstyle
{
font: 12pt verdana;
font-weight:700;
color:orange;
}
.buttonstyle
{
font: 8pt verdana;
background-color:lightgreen;
border-color:black;
width:100
}
.inputstyle
{
font: 14pt verdana;
background-color:yellow;
border-style:dashed;
border-color:red;
width:300;
}
.selectstyle
{
font: 14pt verdana;
background-color:lightblue;
color:purple;
}
.radiostyle
{
width:50;
background-color:red;
zoom:200%
}
</style>
然后我们在定义控件的时候,调用前面设计的类。调用方式如下:
<span id="Span1" class="spanstyle" runat="server">
<button id="Button1" class="buttonstyle" runat="server">Click me!</button>
<input id="Text1" type="text" value="One, Two, Three" class="inputstyle" runat="server"/>
<select id="Select1" class="selectstyle" runat="server">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
<input id="Radio1" type="radio" name="Mode" checked class="radiostyle" runat="server"/>Option 1<br>
第二种方法显然比第一种要好,把描述风格都写在前面并命名。同时,把控件样式设计和其他工作分离开来。
ü 为服务器端控件定制外观
? 使用CSS定制WebControll
使用CSS同样可以定制web控件
? Web控件的CSS示例
定义类:
<style>
.beige { background-color:beige }
</style>
使用定义的样式:
<ASP:DropDownList ID="DropDownList1" 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:Calendar ID="Calendar1" runat="server" />
<ASP:Calendar ID="Calendar2" runat="server"
BackColor="Beige"
ForeColor="Brown"
BorderWidth="3"
BorderStyle="Solid"
BorderColor="Black"
Height="450"
Width="450"
Font-Size="12pt"
Font-Names="Tahoma,Arial"
Font-Underline="false"
CellSpacing=2
CellPadding=2
ShowGridLines=true />
l 日历控件的子属性
ü 除去标准外观属性,日历控件还有它特有的子属性,