搜索
用ASP.NET进行HTML和CSS设计HTML最初是由TimBerners-Lee引入的，那时它仅仅是研究人员使用Internet格式化和交叉链接其研究文档的一种简单方式。Web仍主要基于文本，因此这些文档的格式化要求是相当基本的。HTML只需要很少的基本布局概念，例如标题、段落、页眉和列表。随着Web向一般公众开放，引入了图形浏览器，格式化Web页面的要求也在不断增加，此时就开发出了HTML的新版本。这些新版本扩展了HTML的最初功能，以适应新的、丰富的图形浏览器环境，允许采用表格布局，有更丰富的字体样式、图像和框架。对HTML的所有这些改进都是有益的，但HTML仍不允许开发人员创建复杂、高度样式化的Web页面。因此1994年，引入了一种新技术--层叠样式表(CascadingStyleSheets，CSS)。CSS是HTML的一种补充技术，为Web页面的开发人员提供了他们需要的功能，可以精细地控制Web页面的样式。随着Web的日益成熟，CSS也变得更常见，因为开发人员认识到，与标准的HTML样式功能相比，CSS有显著的优点。HTML最初主要用作一种布局机制，而CSS从一开始就为Web页面提供了丰富的样式功能。CSS的层叠本质便于把带宽笔划的样式应用于整个应用程序，并可以在需要的地方覆盖该样式。CSS很容易在外部定义Web站点的样式信息，与Web页面的样式和结构清楚地分开。CSS还允许开发人员极大地减小Web页面的文件大小，缩短页面加载时间，减少带宽消耗。本章的重点不是说明CSS是使Web站点样式化的最佳解决方案，而是理解如何在基于ASP.NET的Web应用程序中应用这些技术。首先简要介绍CSS以及它与HTML如何一起工作，然后讨论使用HTML和CSS在VisualStudio中创建Web站点。最后论述如何使用ASP.NET和CSS。18.1警告本章包含HTML和CSS的许多信息，以及如何在ASP.NET和VisualStudio2008中使用它们，但应注意几个事项。首先，因为无法用1章的篇幅包含HTML和CSS的所有内容，所以如果需要深入理解这些主题，可以查阅Wrox的BeginningCSS:CascadingStyleSheetsforWebDesign，2ndEdition，RichardYork著，Wiley出版社，2007)。第二，因为CSS只是一个规范，所以每个浏览器供应商都需要解释和实现这个规范。在Web开发中，每个浏览器常常用不同的方式实现(有时不实现)不同的CSS特性。本章的示例都在InternetExplorer7中进行了测试，读者应确保在多个平台的多个浏览器上全面测试自己的Web站点，使CSS在每个目标浏览器上都能正确显示。最后，在Web页面上使用的DOCTYPE可能影响浏览器在Web页面上应用CSS样式的方式。读者应理解不同的DOCTYPES如何在Web页面上影响浏览器的显示过程。18.2HTML和CSS概述从Web诞生一直到今天，HTML都是定义Web页面上的内容块的主要机制，也是定义Web页面布局的最简单方式。HTML包含非常多的可用布局标记，包括Table、List和Grouping元素。可以合并这些元素，在Web页面上创建出非常复杂的布局。图18-1是一个简单的Web页面，它使用各种HTML元素定义了一个基本布局。这个布局很有趣，但它只有最基本的样式。为了解决这个问题，许多开发人员都尝试添加基于HTML的格式化标记。例如，如果要改变第一段文本的字体和颜色，就需要修改HTML，如下所示：fontface=ArialColor=Maroon实际上，在Web设计工具的早期，这就是用户在其Web页面上添加样式而生成的结果，那时，使用Font标记似乎是使Web页面样式化的极佳解决方案。但Web开发人员和设计人员很快意识到，使用Font标记会很快使HTML变得混乱起来，因为Font标记散布在整个HTML中。在前面的例子中，假定不仅要设置控件和样式，还需要使一些字体变成粗体，一些字体采用不同的颜色或字体系列，一些文本使用另一种字体大小，一些字体要加上下划线，一些字体要显示为超级脚本。需要这么多Font标记，它们会增大Web页面，减少其可维护性。使用Font标记(和其他与样式相关的标记)，Web页面的结构和内容就不再能清楚地分开，它们会混合在一起，成为一个复杂的文档。（点击查看大图）图18-118.2.1CSS的引入在Web开发和设计领域中引入CSS，是Web页面样式化的一种清晰、简洁的解决方案。CSS表示，用于整个Web站点的样式可以在一个地方定义，再在需要该样式的元素上引用它。使用CSS使Web页面的内容和用于显示它的样式再次清楚地分隔开。18.2.2创建样式表与HTML一样，CSS也是一种解释性语言。Web服务器处理一个Web页面请求时，服务器的响应可以包含样式表，样式表就是CSS指令的简单集合。样式表包含在服务器的响应中有3种方式：使用外部样式表文件、直接内嵌在Web页面中的内部样式表、在线样式表。1.外部样式表外部样式表是在Web页面外部存储的CSS样式集合，一般是扩展名为.css的文件。VisualStudio很容易在如图18-2所示的AddNewItem对话框中包含一个StyleSheet文件模板，从而把外部样式表文件添加到应用程序中。（点击查看大图）图18-2VisualStudio创建了样式表后，就很容易插入新样式了。VisualStudio甚至在处理文档中的样式表时，提供了CSSIntelliSense，如图18-3所示。图18-3外部样式表使用HTMLlink标记链接到Web页面上。一个Web页面可以包含多个样式表引用，如程序清单18-1所示。程序清单18-1在Web页面中使用外部样式表!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==servertitleCSSInheritanceSample/titlelinkhref=SampleStyles.cssrel=stylesheettype=text/css//headbodyformid=form1runat=serverdivLorumIpsum/div/form/body/html可以在一个Web页面中添加多个link标记，把几个不同的样式表链接到页面上。也可以在样式表中直接使用CSSimport语句，链接多个样式表。@importurl(layout.css);使用import语句的优点是，可以一次改变链接的样式表，而无需修改站点中的每个Web页面。也可以把每个页面链接到一个主外部样式表时，主外部样式表再使用import语句链接其他外部样式表。注意旧浏览器不理解这个语法，而是简单地忽略该命令。在Web站点上使用外部样式表有几个优点。第一，外部样式表在站点中保存在Web页面的外部，所以更容易给所有的Web页面添加link标记，而无需直接管理每个页面中的样式。这也更便于维护，因为如果要在将来更新Web站点的样式，只需在保存该样式的一个位置修改样式即可。最后，使用外部样式表还有助于提高Web站点的性能，允许浏览器利用其高速缓存功能。与浏览器下载的其他文件一样，样式表下载后，会高速缓存到客户机上。2.内部样式表内部样式表是在单个Web页面内部存储的CSS样式集合。该样式位于HTMLstyle标记中，这个标记一般位于Web页面的head部分。内部样式表的示例如程序清单18-2所示。程序清单18-2在Web页面中使用内部样式表!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==servertitleCSSInheritanceSample/titlestyletype=text/cssdiv{font-family:Arial;}/style/headbodyformid=form1runat=serverdivLorumIpsum/div/form/body/html在创建内部样式表的样式块时，一定要在样式标记中包含type属性，这样浏览器才知道如何正确解释该样式快。另外，与外部样式表一样，VisualStudio也提供了IntelliSense支持，以便于添加属性。3.内嵌样式内嵌样式是使用大多数HTML元素都有的Style属性直接应用于单个HTML元素的CSS样式。内嵌样式的示例如程序清单18-3所示。程序清单18-3在Web页面中使用内嵌样式!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==servertitleCSSInheritanceSample/title/headbodyformid=form1runat=serverdivstyle=font-family:Arial;LorumIpsum/div/form/body/html18.2.3CSS规则（1）无论CSS样式存储在什么地方，它们一旦从服务器发送到客户机上，浏览器就负责解析样式，把它们应用于Web页面中相应的HTML元素。如果样式存储在外部或内部样式表中，样式就定义为CSS规则。浏览器使用该规则确定应用什么样式，应用于什么HTML元素。提示：内嵌样式不需要定义为规则，因为它们会自动应用于包含它们的元素上。因此，浏览器不需要选择要应用该样式的元素。规则由两部分组成：选择器和属性。图18-4是CSS规则的一个例子。图18-41.选择器选择器是规则中明确指定Web浏览器如何选择要应用样式的元素的部分。CSS包含许多类型的选择器，每种选择器都定义了不同的元素选择技术。通用选择器通用选择器指定样式应用于Web页面的所有元素。下面的示例演示了一个通用选择器，它把支持字体系列属性的元素的字体改为Arial。*{font-family:Arial;}类型选择器类型选择器可以创建样式，应用于指定类型的HTML元素。接着把该样式应用于Web页面上该类型的所有元素。下面的示例演示了一个为HTM段落标记配置的类型选择器，它会把Web页面上所有p标记的字体系列改为Arial。p{font-family:Arial;}派生选择器派生选择器可以创建样式，其目标HTML元素是指定类型的元素的派生元素。下面示例中的样式应用于派生自div的所有span标记。divspan{font-family:Arial;}子选择器子选择器类似于派生选择器，但派生选择器会搜索一个元素的整个派生层次结构，而子选择器把其元素搜索范围限制在父元素的直接子元素上。下面的代码修改了派生选择器示例，使之变成子选择器示例。divspan{font-family:Arial;}属性选择器属性选择器可以定义样式，根据元素是否存在某个属性(而不是元素名称)，把样式应用于元素。例如，下面的示例创建了一个样式，它应用于Web页面上所有设置了href属性的元素。*[href]{font-family:Arial;}注意InternetExplorer6