当前位置导航:炫浪网>>网络学院>>网页制作>>ASP.NET教程

ASP.NET 2.0 Master Page主题以及皮肤的使用

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         日历控件的子属性

ü         除去标准外观属性,日历控件还有它特有的子属性,

共3页 首页 上一页 1 2 3 下一页 尾页 跳转到
相关内容
赞助商链接