资源描述
用ASP.NET进行HTML和CSS设计
HTML最初是由Tim Berners-Lee引入的，那时它仅仅是研究人员使用Internet格式化和交叉链接其研究文档的一种简单方式。Web仍主要基于文本，因此这些文档的格式化要求是相当基本的。HTML只需要很少的基本布局概念，例如标题、段落、页眉和列表。随着Web向一般公众开放，引入了图形浏览器，格式化Web页面的要求也在不断增加，此时就开发出了HTML的新版本。这些新版本扩展了HTML的最初功能，以适应新的、丰富的图形浏览器环境，允许采用表格布局，有更丰富的字体样式、图像和框架。
对HTML的所有这些改进都是有益的，但HTML仍不允许开发人员创建复杂、高度样式化的Web页面。因此1994年，引入了一种新技术--层叠样式表(Cascading Style Sheets，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在Visual Studio中创建Web站点。最后论述如何使用ASP.NET和CSS。
18.1 警告
本章包含HTML和CSS的许多信息，以及如何在ASP.NET和Visual Studio 2008中使用它们，但应注意几个事项。
首先，因为无法用1章的篇幅包含HTML和CSS的所有内容，所以如果需要深入理解这些主题，可以查阅Wrox的Beginning CSS: Cascading Style Sheets for Web Design，2nd Edition，Richard York著，Wiley出版社，2007)。
第二，因为CSS只是一个规范，所以每个浏览器供应商都需要解释和实现这个规范。在Web开发中，每个浏览器常常用不同的方式实现(有时不实现)不同的CSS特性。本章的示例都在Internet Explorer 7中进行了测试，读者应确保在多个平台的多个浏览器上全面测试自己的Web站点，使CSS在每个目标浏览器上都能正确显示。
最后，在Web页面上使用的DOCTYPE可能影响浏览器在Web页面上应用CSS样式的方式。读者应理解不同的DOCTYPES如何在Web页面上影响浏览器的显示过程。
18.2 HTML和CSS概述
从Web诞生一直到今天，HTML都是定义Web页面上的内容块的主要机制，也是定义Web页面布局的最简单方式。HTML包含非常多的可用布局标记，包括Table、List和Grouping元素。可以合并这些元素，在Web页面上创建出非常复杂的布局。图18-1是一个简单的Web页面，它使用各种HTML元素定义了一个基本布局。
这个布局很有趣，但它只有最基本的样式。为了解决这个问题，许多开发人员都尝试添加基于HTML的格式化标记。例如，如果要改变第一段文本的字体和颜色，就需要修改HTML，如下所示：
<font face="Arial" Color="Maroon">
实际上，在Web设计工具的早期，这就是用户在其Web页面上添加样式而生成的结果，那时，使用Font标记似乎是使Web页面样式化的极佳解决方案。
但Web开发人员和设计人员很快意识到，使用Font标记会很快使HTML变得混乱起来，因为Font标记散布在整个HTML中。在前面的例子中，假定不仅要设置控件和样式，还需要使一些字体变成粗体，一些字体采用不同的颜色或字体系列，一些文本使用另一种字体大小，一些字体要加上下划线，一些字体要显示为超级脚本。需要这么多Font标记，它们会增大Web页面，减少其可维护性。使用Font标记(和其他与样式相关的标记)，Web页面的结构和内容就不再能清楚地分开，它们会混合在一起，成为一个复杂的文档。
（点击查看大图）图 18-1
18.2.1 CSS的引入
在Web开发和设计领域中引入CSS，是Web页面样式化的一种清晰、简洁的解决方案。CSS表示，用于整个Web站点的样式可以在一个地方定义，再在需要该样式的元素上引用它。使用CSS使Web页面的内容和用于显示它的样式再次清楚地分隔开。
18.2.2 创建样式表
与HTML一样，CSS也是一种解释性语言。Web服务器处理一个Web页面请求时，服务器的响应可以包含样式表，样式表就是CSS指令的简单集合。样式表包含在服务器的响应中有3种方式：使用外部样式表文件、直接内嵌在Web页面中的内部样式表、在线样式表。
1. 外部样式表
外部样式表是在Web页面外部存储的CSS样式集合，一般是扩展名为.css的文件。Visual Studio很容易在如图18-2所示的Add New Item对话框中包含一个Style Sheet文件模板，从而把外部样式表文件添加到应用程序中。
（点击查看大图）图18-2
Visual Studio创建了样式表后，就很容易插入新样式了。Visual Studio甚至在处理文档中的样式表时，提供了CSS IntelliSense，如图18-3所示。
图18-3
外部样式表使用HTML<link>标记链接到Web页面上。一个Web页面可以包含多个样式表引用，如程序清单18-1所示。
程序清单18-1 在Web页面中使用外部样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS Inheritance Sample</title>
<link href="SampleStyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>Lorum Ipsum</div>
</form>
</body>
</html>
可以在一个Web页面中添加多个link标记，把几个不同的样式表链接到页面上。也可以在样式表中直接使用CSS import语句，链接多个样式表。
@import url("layout.css");
使用import语句的优点是，可以一次改变链接的样式表，而无需修改站点中的每个Web页面。也可以把每个页面链接到一个主外部样式表时，主外部样式表再使用import语句链接其他外部样式表。注意旧浏览器不理解这个语法，而是简单地忽略该命令。
在Web站点上使用外部样式表有几个优点。第一，外部样式表在站点中保存在Web页面的外部，所以更容易给所有的Web页面添加link标记，而无需直接管理每个页面中的样式。这也更便于维护，因为如果要在将来更新Web站点的样式，只需在保存该样式的一个位置修改样式即可。最后，使用外部样式表还有助于提高Web站点的性能，允许浏览器利用其高速缓存功能。与浏览器下载的其他文件一样，样式表下载后，会高速缓存到客户机上。
2. 内部样式表
内部样式表是在单个Web页面内部存储的CSS样式集合。该样式位于HTML<style>标记中，这个标记一般位于Web页面的<head>部分。内部样式表的示例如程序清单18-2所示。
程序清单18-2 在Web页面中使用内部样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS Inheritance Sample</title>
<style type="text/css">
div
{
font-family:Arial;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>Lorum Ipsum</div>
</form>
</body>
</html>
在创建内部样式表的样式块时，一定要在样式标记中包含type属性，这样浏览器才知道如何正确解释该样式快。另外，与外部样式表一样，Visual Studio也提供了IntelliSense支持，以便于添加属性。
3. 内嵌样式
内嵌样式是使用大多数HTML元素都有的Style属性直接应用于单个HTML元素的CSS样式。内嵌样式的示例如程序清单18-3所示。
程序清单18-3 在Web页面中使用内嵌样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS Inheritance Sample</title>
</head>
<body>
<form id="form1" runat="server">
<div style="font-family:Arial;">Lorum Ipsum</div>
</form>
</body>
</html>
18.2.3 CSS规则（1）
无论CSS样式存储在什么地方，它们一旦从服务器发送到客户机上，浏览器就负责解析样式，把它们应用于Web页面中相应的HTML元素。如果样式存储在外部或内部样式表中，样式就定义为CSS规则。浏览器使用该规则确定应用什么样式，应用于什么HTML元素。
提示：
内嵌样式不需要定义为规则，因为它们会自动应用于包含它们的元素上。因此，浏览器不需要选择要应用该样式的元素。
规则由两部分组成：选择器和属性。图18-4是CSS规则的一个例子。
图 18-4
1. 选择器
选择器是规则中明确指定Web浏览器如何选择要应用样式的元素的部分。CSS包含许多类型的选择器，每种选择器都定义了不同的元素选择技术。
通用选择器
通用选择器指定样式应用于Web页面的所有元素。下面的示例演示了一个通用选择器，它把支持字体系列属性的元素的字体改为Arial。
*
{
font-family:Arial;
}
类型选择器
类型选择器可以创建样式，应用于指定类型的HTML元素。接着把该样式应用于Web页面上该类型的所有元素。下面的示例演示了一个为HTM段落标记配置的类型选择器，它会把Web页面上所有<p>标记的字体系列改为Arial。
p
{
font-family:Arial;
}
派生选择器
派生选择器可以创建样式，其目标HTML元素是指定类型的元素的派生元素。下面示例中的样式应用于派生自<div>的所有<span>标记。
div span
{
font-family:Arial;
}
子选择器
子选择器类似于派生选择器，但派生选择器会搜索一个元素的整个派生层次结构，而子选择器把其元素搜索范围限制在父元素的直接子元素上。下面的代码修改了派生选择器示例，使之变成子选择器示例。
div > span
{
font-family:Arial;
}
属性选择器
属性选择器可以定义样式，根据元素是否存在某个属性(而不是元素名称)，把样式应用于元素。例如，下面的示例创建了一个样式，它应用于Web页面上所有设置了href属性的元素。
*[href]
{
font-family:Arial;
}
注意Internet Explorer 6及其早期版本不支持属性选择器，Visual Studio 2008设计界面也不支持它。
邻近选择器
邻近选择器可以选择紧邻另一个元素类型的HTML元素。例如，在无序列表中，需要突出显示第一个列表项，再对其后的所有项使用另一种样式。此时就可以使用邻近选择器，如下面的示例所示：
li
{
font-size:xx-large;
}
li+li
{
font-size:medium;
}
在这个例子中，为列表项元素<li>创建了一个默认的类型选择器，它会把元素中文本的字号改为非常非常大。又创建了第二个邻近选择器，它将覆盖第一个列表项后面的所有列表项的类型选择器，把字号改回正常大小。
类选择器
类选择器是一种特殊类型的CSS选择器，可以把样式应用于有指定类名称的元素。类名在HTML中使用几乎每个元素都有的Class属性定义，类选择器与其他选择器的区别是它有前缀--句点(.)。
.title
{
font-size:larger;
font-weight:bold;
}
这个CSS规则会应用于class属性值匹配规则名的所有元素，例如：
<div class="title">Lorum Ipsum</div>
创建类选择器时，注意类名不能以数字开头。另外，CSS类名只能包含字母和数字，不能包含空格、符号，甚至下划线。最后，在HTML中使用时，应确保类名的大小写是匹配的。CSS本身不区分大小写，但一些HTML DocType要求，class和id属性应区分大小写。
ID选择器
ID选择器是另一种特殊的CSS选择器，它可以创建样式，其目标元素有特定的ID值。ID选择器与与其他选择器的区别是它有前缀--#。
＃title
{
font-size:larger;
font-weight:bold;
}
这个CSS规则会应用于id属性匹配规则名的元素，例如：
<div id="title">Lorum Ipsum</div>
18.2.3 CSS规则（2）
2. 伪类
CSS还包含一系列伪类选择器，在创建样式规则时提供了额外的选项。伪类可以添加到其他选择器上，创建更复杂的规则。
第一个子伪类
第一个子伪类可以指定，规则应选择元素N的第一个子元素M。下面是使用第一个子伪类的例子：
#title p:first-child
{
font-size:xx-small;
}
上面定义的规则指定，样式应用于id属性值为title的样式中的第一个段落标记。在下面的HTML中，这表示文本First Child要应用该样式：
<div id="title">Lorum <p>First Child</p><p>Second Child</p> Ipsum</div>
注意Visual Studio 2008设计界面不支持第一个子伪类，因此即使样式在浏览器上显示正确，也不能在设计界面上看到正确的预览。
链接伪类
CSS包含与anchor标记相关的许多伪类。这些特殊的伪类可以为anchor标记的不同状态定义样式。
a:link
{
color:Maroon;
}
a:visited
{
color:Silver;
}
在这个例子中，创建了两个规则，第一个把样式应用于页面上未访问的链接，第二个把另一个样式应用于已访问的链接。
动态伪类
动态伪类是浏览器根据终端用户执行的操作(如把鼠标停放在元素上，激活某个元素或给元素指定焦点)，应用样式的特殊CSS类。
a:hover
{
color:Maroon;
}
a:active
{
color:Silver;
}
a:focus
{
color:Olive;
}
该示例演示了给anchor标记使用动态伪类，这些伪类也可以用于其他HTML元素。但注意，对动态伪类的支持在不同的浏览器上是不同的。
语言伪类
语言伪类可以根据终端用户的语言设置定义特殊的规则。
:lang(de)
{
quotes: '《' '》' '\2039' '\203A'
}
在这个例子中，lang伪类用于设置德语Web页面的引号。Internet Explorer 7不支持lang伪类。
3. 伪元素
CSS还包含几个伪元素，它们可以在Web页面上选择不是真正元素的项。
可用的伪元素有：first-line、first letter、before和after。下面的示例演示了这些伪元素的使用：
p:first-line
{
font-style:italic;
}
p:first-letter
{
font-size:xx-large;
}
伪元素first-line和first-letter可以把特定的样式应用于内容块的第一行和第一个字母。
p:before
{
content: url(images/quote.gif);
}
p:after
{
content: '<<end>>';
}
伪元素before和after可以在目标元素的前面或后面插入内容，在上面的例子中就是插入一个段落元素。插入的内容可以是URL、字符串、引号字符、计数器或元素的属性值。
4. 选择器的组合
创建CSS规则时，CSS允许把几个选择器组合到一个规则中。下面的示例演示了合并3个类型选择器的规则：
h1, h2, h3
{
color:Maroon;
}
这个规则把h1、h2或h3标记的文本内容的前景色改为栗色。
5. 选择器合并
CSS还允许合并多个选择器类型。例如，可以创建类选择器，应用于特定的HTML元素，且匹配Class属性值。
程序清单18-4 在一个CSS规则中合并多个选择器类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.title
{
font-family:Courier New;
}
div.title
{
font-family:Arial;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p class="title">Lorum Ipsum</p>
<div class="title">Lorum Ipsum</div>
</form>
</body>
</html>
18.2.3 CSS规则（3）
6. 合并的样式
在定义几个应用于给定HTML元素的样式规则时，CSS还会合并样式。例如，在下面的示例代码中，定义了一个类选择器和一个类型选择器。这两个选择器都应用于HTML中的段落元素。当浏览器解释这些样式时，会把它们合并到元素上。
程序清单18-5 把多个规则中的样式合并到一个元素上
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.title
{
font-family:Courier New;
}
p
{
color:Green;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p class="title">Lorum Ipsum</p>
</form>
</body>
</html>
如图18-5所示，单个段落元素的字体和颜色都应用了样式，但实际上有两个样式规则定义了这个样式。
（点击查看大图）图 18-5
还可以使用不同的选择器类型定义多个规则，来合并多个样式。如果单个HTML元素匹配所有的规则，就把每个规则中的样式合并在一起。在程序清单18-6的例子中，单个元素匹配多个规则。
程序清单18-6 多个选择器匹配单个元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS Inheritance Sample</title>
<style type="text/css">
p
{
font-family:Arial;
color:Blue;
}
p#book
{
font-size:xx-large;
}
p.title
{
font-family: Courier New;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p id="book" class="title" style="letter-spacing:5pt;">Lorum Ipsum</p>
</form>
</body>
</html>
在这个例子中，由于段落标记定义了id、class和style属性，每个样式规则都匹配，因此，这些样式合并到元素上。
最后，Class属性本身也可以用于把多个样式合并到同一个元素上。Class属性可以在空格分隔的字符串中指定多个类名。
程序清单18-7 把多个类选择器赋予单个元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>CSS Inheritance Sample</title>
<style type="text/css">
p.title
{
font-family: Courier New;
letter-spacing:5pt;
}
p.summer
{
color:Blue;
}
p.newproduct
{
font-weight:bold;
color:Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p class="title newproduct summer">Lorum Ipsum</p>
</form>
</body>
</html>
在这个例子中，3个类title、summer和newproduct都在Class属性中定义了。这表示，这3个样式会合并到段落元素上。
注意在这种情况下，CSS类在内部样式表中的定义顺序也会影响样式合并到段落标记上的方式。即使summer类在Class属性定义的类列表中的最后，newproduct规则也会覆盖summer规则的颜色属性，因为在内部样式表中，newproduct规则是在summer规则的后面定义的。
18.2.4 CSS继承
CSS包含样式继承的概念。这是有效的，因为浏览器把可以定义样式的不同位置(外部、内部和内嵌)看作一个层次结构。图18-6显示了这个继承关系，演示了在3个不同位置定义的、段落类型选择器规则的font-family属性可以被其他样式规则覆盖。
（点击查看大图）图18-6
从图18-6中可以看出，应用样式的元素越接近样式的定义，优先级就越高。在前面的例子中，段落文本最终应使用Courier New字体系列显示，因为它是在内嵌样式中定义的。
继承关系不仅应用于在不同文件位置中保存的样式，还应用于同一个位置的样式。这说明，有时还需要考虑定义样式的顺序。例如，程序清单18-8显示了一个样式表，它包含两个类型选择器，这两个选择器都应用于段落元素，都设置了font-family属性。显然。它们不可能应用于同一个元素，所以CSS选择最接近段落标记的选择器。
程序清单18-8 在同一个内部样式表中使用样式覆盖功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
p
{
font-family:Arial;
}
p
{
font-family: Courier New;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>Lorum Ipsum</p>
</form>
</body>
</html>
运行这个示例，会看到所应用的字体是Courier New。
注意合并外部样式表和内部样式表中的样式时应小心。浏览器最终选择最接近特定元素的样式，这说明浏览器开始分析Web页面时，在外部样式之前定义的内部样式应远离HTML元素。因此，浏览器会使用外部样式表中的样式。如果打算在内部和外部样式表中存储样式规则，应在Web页面的内部样式表<style>块之前包含外部样式表<link>标记。
18.2.5 元素的布局和定位（1）
CSS不仅可用于使页面上的元素样式化，还可以定位元素。CSS为定位元素提供了比HTML更灵活的系统。CSS把Web页面上的元素定位建立在方框模型的基础上。元素的方框行为确定后，就可以使用几种不同的技术定位元素了。
1. CSS的方框模型
在CSS中定位的核心元素是方框模型。方框模型定义了浏览器如何把HTML中的每个元素看作一个矩形方框。该方框由不同的部分组成，包括页边距、填充空间、边框和内容。图18-7显示了这些元素如何合并，构成该方框。
图18-7
构成该方框的所有元素可以影响元素在Web页面中的位置，除非特别指定，否则每个元素的默认值都是0。元素的高度和宽度等于页边距外边界的高度和宽度，如图18-7所示，它们不一定等于内容的高度和宽度。
HTML提供了两种不同类型的方框：块框和内嵌框。块框一般用<p>、<div>或<table>等标记表示，块框的包含块用于确定其子块的位置。另外，块框可以包含内嵌框或块框，但不能同时包含两者。
程序清单18-9显示的页面包含一个父块和两个子块元素。
程序清单18-9 创建块框元素
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div>
Donec et velit a risus convallis porttitor.
Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna.\ </div>
<div>Duis lobortis felis in est. Nulla eu velit ut nisi consequat vulputate.</div>
Vestibulum vel metus. Integer ut quam. Ut dignissim, sapien sit amet
malesuada aliquam,
quam quam vulputate nibh, ut pulvinar velit lorem at eros.
Sed semper lacinia diam. In
faucibus nonummy arcu. Duis venenatis interdum quam. Aliquam ut dolor id leo
scelerisque convallis. Suspendisse non velit. Quisque nec metus.
Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Praesent pellentesque interdum magna.
</div>
第二个框类型是内嵌框。内嵌框一般用B、I和SPAN等标记和实际的文本和内容表示。程序清单18-10说明了前面的清单如何修改为包含内嵌框。
程序清单18-10 创建内嵌框元素
<div>
Lorem <b>ipsum</b> dolor sit amet, consectetuer adipiscing elit.
<div>
Donec et velit a risus <b>convallis</b> porttitor.
Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna.
</div>
<div>Duis lobortis felis in est.
<span>Nulla eu velit ut nisi consequat vulputate.</span>
</div>
<i>Vestibulum vel metus.</i> Integer ut quam. Ut dignissim, sapien sit
amet malesuada
aliquam, quam quam vulputate nibh, ut pulvinar velit lorem at eros.
Sed semper lacinia
diam. In faucibus nonummy arcu. Duis venenatis interdum quam.
Aliquam ut dolor id leo
scelerisque convallis. Suspendisse non velit. Quisque nec metus.
Lorem ipsum dolor sit
amet, consectetuer adipiscing elit. Praesent pellentesque interdum magna.
</div>
显示这个页面，会使每个块从一个新行开始。图18-8是在浏览器中显示的标记。
图 18-8
Visual Studio设计界面也有助于清晰地绘制出div的布局。选择某个div元素时，设计界面会突出显示选中的元素，如图18-9所示。
在本节的开头提到，块总是内嵌块或块框的容器，但注意在这里，由于第一行文本包含一个内嵌块，下一行包含一个块框，所以看起来父div元素违反了该规则。但是，实际上在显示页面时，浏览器自动在第一行文本的周围添加了一个匿名的块框。图18-10突出显示了浏览器中的块框。
图 18-9
图 18-10
可以使用position属性显式指定元素的框行为。例如，设置第二个div元素的position属性，会改变内容的布局，如下所示：
<div style="display:inline;">Donec et velit
a risus <b>convallis</b> porttitor.
Vestibulum nisi metus, imperdiet sed, mollis
condimentum, nonummy eu, magna.</div>
图18-11说明了添加这个属性如何改变Visual Studio设计界面上标记的显示结果。可以看出，元素的内容不显示在新行上，而是显示在上一个块的后面。
还可以把display属性设置为none，从Web页面布局中完全删除元素。如果元素的display属性设置为none，或visibility属性设置为hidden，Visual Studio就在其设计界面上给出显示或隐藏这些元素的选项。
图 18-11
如图18-12所示，在View菜单上有两个选项，用于使设计界面切换设置了这些属性的元素的可见性。
图 18-12
18.2.5 元素的布局和定位（2）
2. 定位CSS元素
CSS提供了3种主要的定位机制：Normal、Absolute和Relative。每种机制都提供了不同的行为，用于定位页面上的元素。要指定元素使用的布局类型，可以设置CSS的position属性。每个元素都可以设置它自己的position属性，从而在同一个Web页面上使用多种定位方案。
一般定位机制
使用一般定位机制，块项会垂直布置，内嵌项会从左到右水平布置。这是默认方式，如果没有给position属性提供其他值，就使用该方式。图18-13演示了4个块使用一般定位机制的布局。
可以看出，每个块项垂直布置。
图 18-13
相对定位机制
使用相对定位机制，元素最初仍使用一般布局方式来定位。先定位包围框，再根据偏移属性top、bottom、left和right移动该框。图18-14显示了与上一节相同的内容，但现在第三个块框设置为使用相对定位机制。Visual Studio可以提供块的定位线，显示其顶部偏移是根据块的正常顶部位置计算出来的，左边的偏移是根据正常的左边位置计算出来的。Visual Studio甚至允许抓取元素的标记标签，在设计界面上拖动它，可视化地定位块。
图 18-14
在设计界面上定位元素时，元素的top和left值会更新。最后，元素如下所示：
<div style="position: relative;top: 214px;left:
62px;width: 239px;height: 81px">
Donec et velit a risus <b>convallis</b>
porttitor. Vestibulum nisi metus,
imperdiet sed, mollis con
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
