4.2.2 使用层叠样式表改变样式
改变ASP .NET页面上特定元素的外观和操作方式的一种方法是对元素应用样式.对页面元素应用已定义好的外观和操作方式的最常见方法是直接使用各种改变样式的HTML元素,例如,和.
提示:
所有的ASP .NET开发人员都应很好地掌握HTML.HTML的更多信息可参阅Wrox的Beginning Web Programming with HTML,XHTML,and CSS(Wiley出版).
使用各种HTML元素可以改变页面上许多项的外观.例如,可以改变字符串的样式,如下所示:
Pork chops and applesauce
可以遍历整个应用程序,使用任一合适的HTML元素,改变页面元素的样式.这种方法很有效,但很难维护.为了对应用程序进行全局的样式修改,这种方法需要逐行遍历应用程序,改变每一项.这是非常麻烦的.
除了把HTML元素应用于项,以改变它们的样式之外,还可以使用另一种方法,称为层叠样式表(CSS).这种改变样式的方法比较好,可以用两种不同的方 法,把格式化属性应用于整个文档的HTML标记上.一种方法是使用内置样式,把这些样式直接应用于页面的HTML元素.另一种方法是把这些样式放在一个外 部的样式表中,该样式表可以直接放在ASP .NET页面上,也可以保存在一个独立的文档中,该文档在ASP .NET页面上引用.下面几小节就介绍这些方法.
1. 把样式直接应用于HTML元素
使用CSS的第一种方法是直接把样式应用于ASP .NET页面包含的标记上.例如,把样式应用于字符串上,如程序清单4-3所示.
程序清单4-3 把CSS样式直接应用于HTML元素上
Pork chops and applesauce
这个文本字符串由包含在元素中的CSS修改,呈现为蓝色黑体.使用元素的样式属性,可以修改开和闭元素之间的所有内容.在生成页面时,第一个应用的样式改 变是元素之间的文本.在这个例子中,文本改变为蓝色,因为使用了color:blue命令,然后应用了font-weight:bold命令.可以使用分 号把样式命令分隔开,并且可以对元素应用任意多种样式.
以这种方式应用CSS样式与简单地应用各种HTML样式元素有相同的问题:其结构很难维护.如果样式散布在整个页面上,进行全局样式修改要花很长时间.把所有的样式都放在一个样式表中就比较好.可以使用两种方法建立样式表.
2. 使用Visual Studio样式构建器
Visual Studio 2005提供了样式构建器,这个工具使CSS样式的建立非常简单.它节省了大量的时间,因为可以使用非常多的CSS定义.如果读者对CSS不熟悉,使用这个工具就不觉得CSS样式很难了.
Visual Studio样式构建器可以把CSS样式应用于单个元素,或者构建自己的样式表.为了在把样式应用于单个页面元素时访问样式构建器,可以突出显示该页面元素,再右击它.从弹出的菜单中选择Style.样式构建器如图4-5所示.
图 4-5
可以使用样式构建器对所选的项进行许多修改.进行完这些修改后,单击OK,这些样式就应用到所选的元素上.
下面看看如何在样式表中创建样式.
3. 创建外部样式表
可以使用两种不同的方法创建样式表.最常见的方法是创建一个外部样式表,即一个在页面中引用的独立样式表文件,以使用定义好的样式.为了开始外部样式表的创建,先在项目中添加一个新项.从Add New Item对话框中创建一个样式表StyleSheet.css,按下Add按钮,把该文件添加到项目中.图4-6显示了结果.
图 4-6
使用Visual Studio的CSS下拉列表框(在图4-6的左面板),可以用如下3种方法应用样式规则:
按照元素来应用:把样式应用于特定的HTML元素,例如,或.
按照类来应用:把样式定义打为一个包,或者称为类.然后把所选的类应用于特定的页面元素或整个页面.
按照元素ID来应用:这个方法表示,所选的样式只应用于有特定ID名称的控件,例如Table1 或Button1.
使用Visual Studio可以构建如程序清单4-4所示的样式表:
程序清单4-4 外部样式表
body {
font-weight: normal;
font-family: Verdana,Helvetica,sans-serif;
font-size: .8em;
letter-spacing: normal;
text-transform: none;
word-spacing: normal;
background-color: white;
}
H1,H2,H3,H4,TH,THEAD,TFOOT {
color: #003366;
}
H1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 2em;
font-weight: 700;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
在定义了每个可能的HTML元素(尽管没有要求)后,样式表才能使用.这个例子中的第一个定义用于整个页面体(开和闭元素之间的所有内容).样式的应用顺 序就是它们在样式表中出现的顺序.所以首先把一个样式应用于整个文档,接着应用特定HTML元素进一步定义的样式.所有的样式定义都遵循如下格式:
Definition: Value;
首先是要应用的CSS属性名,之后是一个冒号,然后是这个属性的值.该定义以一个分号结束.
程序清单4-4中的CSS文件还说明,可以用逗号把元素名分隔开来,例如H1,H2,H3,H4,TH,THEAD,TFOOT,这样就把一个样式同时应用于许多不同的元素.
在Visual Studio中使用CSS文件的另一个优点是,这些都可以使用IntelliSense功能,如图4-7所示.
图 4-7
创建好样式文件之后,即使它已包含在项目中,也不能应用于任何内容,除非专门把样式表应用于页面.有两种方法可完成这个任务.
一种方法是在Visual Studio的Properties窗口中打开DOCUMENT属性,给StyleSheet属性赋值.把上面的样式表StyleSheet.css赋予StyleSheet属性值,会在部分中给ASP .NET页面添加如下代码行:
My ASP .NET page
把这行代码添加到页面上后,ASP .NET页面就应用了StyleSheet.css中定义的样式.
把这行代码添加到页面中的另一种方法是在Visual Studiod的Document窗口中,将StyleSheet.css文件从Solution Explorer拖放到页面的Design或Source视图上.这样也会应用前面使用的元素.
在应用程序中使用外部样式表,可以对应用程序的外观和操作方式快速进行全局修改.在这个中心位置进行一处修改,就可以通过样式表把这一变化应用于整个应用程序.
4. 创建内部样式表
把样式表应用于某个ASP .NET页面的第二种方法是通过创建内部样式表,将定义好的样式表引入实际的文档.这不是引用外部样式表文件,而是把样式定义引入文档.但要这样,最好使用外部样式表,而不是内部样式表.
只有把某些样式应用于应用程序中的少量页面时,才考虑使用内部样式表.程序清单4-5说明了内部样式表的使用.
程序清单4-5 使用内部样式表
My ASP .NET Page
Home
在这个文档中,内部样式表在开闭元素中设置.尽管这不是必需的,但最好这么做.样式表放在元素之间,其类型属性定义为text/css.
其中还包含了HTML注释标记,因为并不是所有的浏览器都支持内部样式表(一般旧浏览器不接受内部样式表).把HTML注释放在样式定义的外部,会在非常旧的浏览器中隐藏这些定义.除了注释标记之外,样式定义的处理方式与外部样式表相同.
4.3 HTML服务器控件
ASP .NET允许提取HTML元素,通过少量的工作,把它们转换为服务器端控件.之后,就可以使用它们控制在ASP .NET页面中实现的元素的行为和操作了.
当然,可以把需要的任意HTML放在页面上.可以把页面上的HTML用作服务器端控件.在Visual Studio的Toolbox中包含了一个HTML元素列表,如图4-8所示.
图 4-8
在Document窗口中,把这些HTML元素中的任何一个从Toolbox拖放到ASP .NET页面的Design或Source视图上,就可以生成相应的HTML元素.例如,把一个HTML Button控件放在页面上,就会在代码中生成如下结果:
在此状态下,Button控件不是一个服务器端控件,而只是一个HTML元素.可以用两种不同的方式把它转换为HTML服务器控件.在Design视图中,右击该元素,从菜单中选择Run As Server Control.这会导致几个操作的发生.首先,可视化元素上会出现一个绿色的小三角形.Button元素转换为HTML服务器控件后,如图4-9所示.
图 4-9
在Source视图中,只需添加runat="server",就把HTML元素转换为控件:
转换为服务器控件之后,就可以像处理任何Web服务器控件那样处理所选的元素了.例如,在页面的Design视图中双击按钮,就会为控件生成一个按钮单击事件.程序清单4-6是一些HTML服务器控件的一个示例:
程序清单4-6 使用HTML服务器控件
VB
Protected Sub Button1_ServerClick(ByVal sender As Object,-
ByVal e As System.EventArgs)
Response.Write("Hello " & Text1.Value)
End Sub
Using HTML Server Controls
What is your name
C#
protected void Button1_ServerClick(object sender,EventArgs e)
{
Response.Write("Hello " + Text1.Value);
}
在这个例子中,页面上有两个HTML服务器控件.它们都是一般的HTML元素,只是添加了runat="server"属性.如果要把HTML元素用作服务器控件,就必须包含id属性,这样服务器控件才能在服务器端代码中识别出来.
Button控件使用OnServerClick属性包含一个对服务器端事件的引用.这个属性指向的服务器端事件在终端用户单击按钮时触发,在这里是Button1_ServerClick事件.在Button1 _ServerClick事件中,使用Value属性输出文本框中的值.
4.3.1 HtmlControl基类
所有的HTML服务器控件都使用一个派生于HtmlControl基类(完整名称是System.Web.UI. HtmlControls)的类.这个类从控件的派生类中继承了许多属性.表4-3列出了从这个基类继承的一些属性,其中一些属性本身派生于Control基类.
表 4-3
方法或属性
说 明
Attributes
为控件中指定的所有可用属性提供名称/值的集合,包括定制的属性
Disabled
允许使用Boolean值设置控件是否禁用
EnableTheming
允许使用Boolean值设置控件是否参与页面主题功能
EnableViewState
允许使用Boolean值设置控件是否参与页面的视图状态功能
ID
获取或设置控件的唯一标识符
Page
获取包含特定服务器控件的Page对象的引用
Parent
在页面控件层次结构中获取对父控件的引用
Site
提供服务器控件所属的Web站点的信息
SkinID
EnableTheming 属性设置为True时,SkinID属性指定在设置主题时使用的skin文件
Style
引用应用于特定控件的CSS样式集合
TagName
提供从指定控件中生成的元素名
Visable
指定控件在生成的页面上是否可见
更完整的列表请参阅SDK.
4.3.2 HtmlContainerControl类
基类HtmlContainerControl用于一些HTML类,这些类注重于可以包含在单个节点中的HTML元素.例如,,和元素用于派生于HtmlControl类的类.
其他HTML元素,例如,和,需要一对开闭标记.这些元素使用派生于HtmlContainerControl类的类,HtmlContainerControl类是专门为处理需要闭标记的HTML元素而设计的.
HtmlContainerControl类派生于HtmlControl类,所以拥有HtmlControl类的所有属性和方法,还拥有一些在HtmlContainerControl类中声明的新属性.其中最重要的是InnerText和InnerHtml属性:
InnerHtml:允许指定包含HTML元素的内容,这些HTML元素放在特定控件的开闭标记之间.
InnerText:允许指定要放在特定控件的开闭标记之间的纯文本.
4.3.3 所有的HTML类
可以使用所有的HTML元素,因为它们都有对应的类..NET Framework文档说明列出了下述处理HTML服务器控件的类:
HtmlAnchor控制元素.
HtmlButton控制元素.
HtmlForm控制元素.
HtmlHead控制元素,这是.NET Framework 2.0的一个新类.
HtmlImage控制元素.
HtmlInputButton控制元素.
HtmlInputCheckBox控制 元素.
HtmlInputFile控制元素.
HtmlInputHidden控制元素.
HtmlInputImage控制元素.
HtmlInputPassword控制元素,这是.NET Framework 2.0的一个新类.
HtmlInputRadioButton控制 元素.
HtmlInputReset 控制元素,这是.NET Framework 2.0的一个新类.
HtmlInputSubmit控制元素,这是.NET Framework 2.0的一个新类.
HtmlInputText 控制元素.
HtmlLink 控制元素,这是.NET Framework 2.0的一个新类.
HtmlSelect 控制元素.
HtmlTable 控制元素.
HtmlTableCell控制元素.
HtmlTableRow控制元素.
HtmlTextArea控制元素.
HtmlTitle 控制元素,这是.NET Framework 2.0的一个新类.
把HTML元素转换为HTML服务器控件时,可以访问上述列表中的一个类.例如,把元素转换为服务器控件:
此时可以访问这个HTML元素的HtmlTitle类.使用这个类实例,可以执行许多任务,包括给页面标题动态地提供文本值:
VB
Title1.Text = DateTime.Now.ToString()
C#
Title1.Text = DateTime.Now.ToString();
使用这些类可以获得所需要的大多数HTML元素,但这些HTML类并没有明确包含相当多的其他HTML元素.例如,HtmlGenericControl类可以对任意HTML元素进行服务器端的访问.
4.3.4 使用HtmlGenericControl类
我们应注意到HtmlGenericControl类的重要性:它的一些功能不能从ASP .NET提供的其他服务器控件处获得.例如,使用HtmlGenericControl类可以对,,或其他元素进行服务器端的访问,但使用其他类不能进行这样的访问.
程序清单4-7说明了如何使用HtmlGenericControl类修改页面中的元素.
程序清单4-7 使用HtmlGenericControl类修改元素
VB
Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs)
Meta1.Attributes("Name") = "description"
Meta1.Attributes("CONTENT") = "Generated on: " & DateTime.Now.ToString()
End Sub
Using the HtmlGenericControl class
The rain in Spain stays mainly in the plains.
C#
protected void Page_Load(object sender,EventArgs e)
{
Meta1.Attributes["Name"] = "description";
Meta1.Attributes["CONTENT"] = "Generated on: " + DateTime.Now.ToString();
}
在这个例子中,页面的元素添加了id和runat属性,转换为HTML服务器控件.因为HtmlGenericControl类可以处理许多HTML元 素,所以不能用处理其他HTML类(如HtmlInputButton)的方式给HTML属性赋值,而必须使用HtmlGenericControl类的 Attributes属性,给HTML元素的属性赋值,把要处理的属性指定为一个字符串值.
下面是运行示例页面的部分结果:
Using the HtmlGenericControl class
使用HtmlGenericControl类和其他HTML类,可以在服务器端代码中操纵ASP .NET页面上的所有元素.
4.4 通过JavaScript处理页面和服务器控件
开发人员一般喜欢在ASP .NET页面上包含一些自己定制的JavaScript函数.这有两种方式.第一种方式是把JavaScript直接应用于ASP .NET页面上的控件.例如,在程序清单4-8中的Label服务器控件上,显示了当前的日期和时间.
程序清单4-8 显示当前的日期和时间
VB
Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs)
TextBox1.Text = DateTime.Now.ToString()
End Sub
C#
protected void Page_Load(object sender,EventArgs e) {
TextBox1.Text = DateTime.Now.ToString();
}
这几行代码在终端用户的页面上显示了当前的日期和时间.问题是所显示的日期和时间对于生成页面的Web服务器来说是正确的.如果用户位于美国西部标准时区 (PST),而Web服务器位于东部时区(EST),页面对于访问者来说就是不正确的.如果希望该时间对于浏览站点的任何人来说都是正确的,无论他们在世 界的哪个角落,就可以使用JavaScript处理TextBox控件,如程序清单4-9所示.
程序清单4-9 使用JavaScript显示当前时间给终端用户
Using JavaScript
在这个例子中,即使使用Web服务器控件系列中的标准TextBox服务器控件,也可以使用JavaScript在元素的onload属性中访问这个控 件.通过使用服务器控件的ID属性值TextBox1,使onload属性的值指向特定的服务器控件.采用这个方法还可以在页面上访问其他服务器控件.这 几行代码生成了如图4-10所示的结果.
图 4-10
ASP .NET使用新增的Page.ClientScript属性在ASP .NET页面上注册和使用JavaScript函数.这里复习其中的3个方法.更多的方法和属性可通过ClientScript对象来获得,但这3个方法比较有用.其他方法可参阅SDK文档.
提示:
.NET Framework 1.0/1.1中的Page.RegisterStartupScript和Page.RegisterClientScriptBlock方法现在已废弃.这两个用于注册脚本的方法需要一组键/脚本参数对.因为这两个方法比较复杂,很可能发生键名冲突.Page.ClientScript属性把所有的脚本注册都放在一起,使代码不容易出错.
4.4.1 使用Page.ClientScript.RegisterClientScriptBlock
RegisterClientScriptBlock方法可以把JavaScript函数放在页面的顶部.也就是说,该脚本用于在浏览器中启动页面.其用法如程序清单4-10所示.
程序清单4-10 使用RegisterClientScriptBlock方法
VB
Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs)
Dim myScript As String = "function AlertHello() { alert('Hello ASP .NET'); }"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(),"MyScript",_
myScript,True)
End Sub
Adding JavaScript
C#
protected void Page_Load(object sender,EventArgs e)
{
string myScript = @"function AlertHello() { alert('Hello ASP .NET'); }";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"MyScript",myScript,true);
}
在这个例子中,把JavaScript函数AlertHello()创建为一个字符串myScript.然后使用Page. ClientScript.RegisterClientScriptBlock方法编写放在页面上的脚本.RegisterClientScriptBlock方法的两个构建方式如下:
RegisterClientScriptBlock (type,key,script)
RegisterClientScriptBlock (type,key,script,script tag specification)
在程序清单4-10的例子中,把类型指定为Me.GetType(),还指定了键,要包含的脚本,然后是一个设置为True的Boolean值,这样.NET就自动把脚本放在ASP .NET页面上的标记中.在运行页面时,可以查看页面的源代码,如下所示:
Adding JavaScript
1555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
