1、用ASP.NET进行HTML和CSS设计 HTML最初是由Tim Berners-Lee引入的，那时它仅仅是研究人员使用Internet格式化和交叉链接其研究文档的一种简单方式。Web仍主要基于文本，因此这些文档的格式化要求是相当基本的。HTML只需要很少的基本布局概念，例如标题、段落、页眉和列表。随着Web向一般公众开放，引入了图形浏览器，格式化Web页面的要求也在不断增加，此时就开发出了HTML的新版本。这些新版本扩展了HTML的最初功能，以适应新的、丰富的图形浏览器环境，允许采用表格布局，有更丰富的字体样式、图像和框架。 对HTML的所有这些改进都是有益的，但HTML仍不允许开发人员
2、创建复杂、高度样式化的Web页面。因此1994年，引入了一种新技术--层叠样式表(Cascading Style Sheets，CSS)。CSS是HTML的一种补充技术，为Web页面的开发人员提供了他们需要的功能，可以精细地控制Web页面的样式。 随着Web的日益成熟，CSS也变得更常见，因为开发人员认识到，与标准的HTML样式功能相比，CSS有显著的优点。HTML最初主要用作一种布局机制，而CSS从一开始就为Web页面提供了丰富的样式功能。CSS的层叠本质便于把带宽笔划的样式应用于整个应用程序，并可以在需要的地方覆盖该样式。CSS很容易在外部定义Web站点的样式信息，与Web页面的样式和结
3、构清楚地分开。CSS还允许开发人员极大地减小Web页面的文件大小，缩短页面加载时间，减少带宽消耗。 本章的重点不是说明CSS是使Web站点样式化的最佳解决方案，而是理解如何在基于ASP.NET的Web应用程序中应用这些技术。首先简要介绍CSS以及它与HTML如何一起工作，然后讨论使用HTML和CSS在Visual Studio中创建Web站点。最后论述如何使用ASP.NET和CSS。 18.1 警告 本章包含HTML和CSS的许多信息，以及如何在ASP.NET和Visual Studio 2008中使用它们，但应注意几个事项。 首先，因为无法用1章的篇幅包含HTML和CSS的所有内容
4、所以如果需要深入理解这些主题，可以查阅Wrox的Beginning CSS: Cascading Style Sheets for Web Design，2nd Edition，Richard York著，Wiley出版社，2007)。 第二，因为CSS只是一个规范，所以每个浏览器供应商都需要解释和实现这个规范。在Web开发中，每个浏览器常常用不同的方式实现(有时不实现)不同的CSS特性。本章的示例都在Internet Explorer 7中进行了测试，读者应确保在多个平台的多个浏览器上全面测试自己的Web站点，使CSS在每个目标浏览器上都能正确显示。 最后，在Web页面上使用的DOCT
5、YPE可能影响浏览器在Web页面上应用CSS样式的方式。读者应理解不同的DOCTYPES如何在Web页面上影响浏览器的显示过程。 18.2 HTML和CSS概述 从Web诞生一直到今天，HTML都是定义Web页面上的内容块的主要机制，也是定义Web页面布局的最简单方式。HTML包含非常多的可用布局标记，包括Table、List和Grouping元素。可以合并这些元素，在Web页面上创建出非常复杂的布局。图18-1是一个简单的Web页面，它使用各种HTML元素定义了一个基本布局。 这个布局很有趣，但它只有最基本的样式。为了解决这个问题，许多开发人员都尝试添加基于HTML的格式化标记。例如
6、如果要改变第一段文本的字体和颜色，就需要修改HTML，如下所示： 实际上，在Web设计工具的早期，这就是用户在其Web页面上添加样式而生成的结果，那时，使用Font标记似乎是使Web页面样式化的极佳解决方案。 但Web开发人员和设计人员很快意识到，使用Font标记会很快使HTML变得混乱起来，因为Font标记散布在整个HTML中。在前面的例子中，假定不仅要设置控件和样式，还需要使一些字体变成粗体，一些字体采用不同的颜色或字体系列，一些文本使用另一种字体大小，一些字体要加上下划线，一些字体要显示为超级脚本。需要这么多F
7、ont标记，它们会增大Web页面，减少其可维护性。使用Font标记(和其他与样式相关的标记)，Web页面的结构和内容就不再能清楚地分开，它们会混合在一起，成为一个复杂的文档。 （点击查看大图）图 18-1 18.2.1 CSS的引入 在Web开发和设计领域中引入CSS，是Web页面样式化的一种清晰、简洁的解决方案。CSS表示，用于整个Web站点的样式可以在一个地方定义，再在需要该样式的元素上引用它。使用CSS使Web页面的内容和用于显示它的样式再次清楚地分隔开。 18.2.2 创建样式表 与HTML一样，CSS也是一种解释性语言。Web服务器处理一个Web页面请求时，服务
8、器的响应可以包含样式表，样式表就是CSS指令的简单集合。样式表包含在服务器的响应中有3种方式：使用外部样式表文件、直接内嵌在Web页面中的内部样式表、在线样式表。 1. 外部样式表 外部样式表是在Web页面外部存储的CSS样式集合，一般是扩展名为.css的文件。Visual Studio很容易在如图18-2所示的Add New Item对话框中包含一个Style Sheet文件模板，从而把外部样式表文件添加到应用程序中。 （点击查看大图）图18-2 Visual Studio创建了样式表后，就很容易插入新样式了。Visual Studio甚至在处理文档中的样式表时，提供了CSS
9、IntelliSense，如图18-3所示。 图18-3 外部样式表使用HTML标记链接到Web页面上。一个Web页面可以包含多个样式表引用，如程序清单18-1所示。 程序清单18-1 在Web页面中使用外部样式表
10、at="server">
11、rt url("layout.css"); 使用import语句的优点是，可以一次改变链接的样式表，而无需修改站点中的每个Web页面。也可以把每个页面链接到一个主外部样式表时，主外部样式表再使用import语句链接其他外部样式表。注意旧浏览器不理解这个语法，而是简单地忽略该命令。 在Web站点上使用外部样式表有几个优点。第一，外部样式表在站点中保存在Web页面的外部，所以更容易给所有的Web页面添加link标记，而无需直接管理每个页面中的样式。这也更便于维护，因为如果要在将来更新Web站点的样式，只需在保存该样式的一个位置修改样式即可。最后，使用外部样式表还有助于提高Web站点的性能，允许
12、浏览器利用其高速缓存功能。与浏览器下载的其他文件一样，样式表下载后，会高速缓存到客户机上。 2. 内部样式表 内部样式表是在单个Web页面内部存储的CSS样式集合。该样式位于HTML