自己翻译的书（关于ASP.NET），希望对大家有帮助（十）

最新推荐文章于 2024-09-09 22:16:15 发布

mashimaro24

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量298

点赞数

文章标签： asp.net html 文档报表 css 浏览器

使用透明图像控制元素位置
你现在被限制在使用单元背景图片的方法上。你只可以赋予<td>标签的align和valign属性如下的值：left，right，center，以及top，bottom，center。然而，你可以使用一个小技巧来更准确的放置元素。
记住，使用<img>标签的width和height属性你只能够控制图像的宽度和高度。那个属性意味着你可以使用一像素宽度的图像并且把它按照任意方式改变宽度和高度。因此，你可以使用透明图像来强制其他的内容放置在它的右边或者下边。清单2.11显示了这门技术。我把文字的颜色改成了白色以使得在图像上方显式得更清晰。
清单2.11：使用透明图像控制元素位置 (ch2-23.htm)
<head>
<title></title>
</head>
<body>
<table border="1" cols="2">
<tr>
<td align="center" valign="center" width="99" height="99">
This cell is <br>100 pixels wide
</td>
<td>
 
</td>
</tr>
<tr>
<td width="99" height="99">
 
</td>
<td align="left" valign="top" background="images/bike.gif" WIDTH="227" HEIGHT="179">
<img src="images/transparent.gif" width="50" height="50">
<b><font color="white" size="5">Hello World</font></b>
</td>
</tr>
</table>
</body>
</html>

层叠样式表
层叠样式表(CSS)实在是太复杂的主题，因此在这本书中很难详尽解释。所以我只会在这一章简单地介绍一些基本知识，并且希望能够激起你以后学习CSS的兴趣。一旦你了解了基本知识，那么你就可以引用CSS来提高你的能力。CSS从在一个或者多个网站中控制元素的可视性进化而来。例如，如果你公司的市场部决定所有的公用文档必须使用Garamond字体，你怎么才能简单的做出改变并且保证你对所有的文字都做了相应的改变？一种方法是搜索文档中每一处文字，然后使用<font>标签来指定被包含的都是Garamond字体——但是，这实在是耗时并且容易出错。如果你能够只用一次指定元素的显示方法，然后这种改变可以“传承(Cascade)”下去就好了。
层叠样式表可以做什么
CSS技术允许你很容易的做全局的改变，例如那些在前面描述的。一个层叠样式表定义了元素类型的属性。样式表定义出处现在<style>标签的内部——通常放在文档的<head>部分。这种style定义是一个嵌入式样式表，因为它被嵌入在文档内部。CSS类型包含如下的能力：
你可以定义应用于所有元素类型实体的style类型。
子元素“继承(Inherit)”了它们父元素的style类型。
你可以使用其他的样式表或者是内联style类型来重载(Override)继承的类型。
你可以引用样式表——style类型定义不一定要出现在每一个文档中。
例如，你可以通过定义<body>标签的CSS样式类型来改变文档中的所有文字的字体：
<style type="text/CSS">
body {font: 12pt Garamond;}
</style>
这个style类型包含一个选择器(Selector)，一个body，以及一个规则(Rule) {font: 12pt Garamond;}。规则指定了选择器中文字将会是12号的Garamond字体。一个包含这样规则的文档中的所有文字都会是Garamond字体。
使用样式来控制显示
要看一看CSS是怎么使用的，输入或者是拷贝清单2.12的代码到文件中，然后在你的浏览器中打开文件。注意，你的浏览器会用默认的字体来显示——一会儿你就会改变这个。
清单2.12：层叠样式表例子 (ch2-24.htm)
<html>
<head>
<title>层叠样式表例子</title>

</head>
<body>
<h1>层叠样式表例子</h1>
<h2>注意如下文字的字体和大小。</h2>
<p>这是一个简单的HTML文件。文件的开头部分，有一个层叠样式表。当<style>标签被注释掉的时候，你的浏览器会用默认字体显示文字。当你去掉<style>标签的注释时，文字会显示为14号Garamond字体（如果你的电脑中安装了Garamond字体）。
</p>
</body>
</html>
现在重新打开文件，并且移除包围<style>标签的注释标签。保存文件，并且刷新你的浏览器。你应该可以看到屏幕的改变。图2.21和2.22显示了没有样式表的文件和样式表生效的文件的区别。两个文件都使用清单2.12中的代码，但是在图2.22中我为<style>标签移除了注释。

图2.21：没有应用样式表的文字 (ch2-24.htm)

图2.22：样式表生效的文字 (ch2-24.htm)
层叠样式表的分类
有四种类型的层叠样式表。你已经看到了两种，内连(Inline)样式和嵌入(Embedded)样式。
内连(Inline)样式元素的属性。你在一个元素标签的内部使用style="style definition（类型定义）"的属性来定义。
嵌入(Embedded)样式是嵌入在文档<head>部分的类型标签。
链接(Linked)样式引用外部样式表。你可以在文档的<head>部分使用<link>标签来使用它们。包含样式表定义的文档通常有一个CSS的扩展。
导入(Imported)样式被导入到嵌入的或者是链接的<style>标签的外部样式表。你可以使用@import: url(someURL.css)命令来导入样式表。浏览器会在它处理<style>标签中显式地规则之前导入和处理导入的样式表规则。
浏览器会按照style类型规则出现的顺序来处理规则，后面出现的规则会取代前面出现的规则。相似的，应用于一个特定元素的规则会取代原本的继承的规则。
重载层叠样式表的类型
可以定义应用于所有元素类型的全局的style类型是很好的，但是当你不想要一个可以用于特定元素的全局类型时，那这个实体又该怎么办呢？你可以应用多个规则到一个元素。指定可以覆盖通用样式规则的style类型规则。例如，如果你想要body内的文字以Garamond字体显示，但是不包含标题文字，你可以在你的<style>标签中增加第二个规则：
<style type="text/css">
body {font: 14pt Garamond;}
h1 {font: 24pt Arial;}
h2 {font: 18pt Arial;}
</style>
你总是可以用内联样式属性来重载类型。例如，假设下面的<h1>标签和如上<style>标签出现在同一个文档中：
<h1 style="font: 10pt Arial">
那么，标题会以10号的Arial字体显示，因为内联规则取代了更通用的样式规则。
引用外部样式表
你不必在每个页面都包含一个样式表；相反的，你可以把样式表保存到一个独立的页面并且在每个文件中引用它。其他文件中的样式表叫做链接或者是外部样式表。例如，下面的<link>标签告诉浏览器找到被文件中href属性指定的样式表定义：
<link rel="stylesheet" type="text/css" href="mystyles.css">
你把<link>标签放到文档的head部分。
另一种方式来引用外部样式规则就是把它们导入到一个已经存在的<style>标签中。例如，假设下面的类型规则存在于一个叫做siteRules.css的文件中。
<style type="text/css">
body {font: 14pt Garamond;}
h1 {font: 24pt Arial;}
h2 {font: 18pt Arial;}
</style>
在你的文档中，你可以在<style>标签中使用@import命令来导入siteRuless.css文件中的规则：
<style type="text/css">
@import: url(siteRules.css);
li {font: 10pt Times New Roman;}
</style>
前面的<style>标签的效果就和你如下定义是一样的：
<style type="text/css">
body {font: 14pt Garamond;}
h1 {font: 24pt Arial;}
h2 {font: 18pt Arial;}
li {font: 10pt Times New Roman;}
</style>
在样式表中使用类(Class)
除了为标准的HTML元素定义style类型，你可以通过创建一个选择器的名字来定义你自己的类型。你自己创建的有选择器名称的类型叫做类(Class)，因为你可以使用它们来分类元素。创建类类型的好处是你可以使用类属性来应用它们到任何元素。例如，如果你创建了一个可以把文字变红的类型，你可以简单地把它应用于你文档中的任何元素：
<style type="text/css">
.redText {color:red;}
</style>
<p class="redText">
这段文字是红色的。
</p>
<p>
这段文字是默认颜色的。
</p>
控制超链接显示
在大部分静态网站，当你点击它们链接会改变颜色，来显示你已经访问了那个链接目标。在一个应用中，如果一个人需要多次点击相同的链接来完成一个任务，那么这种表现不会是用户想要的。你可以使用CSS样式来控制你的链接显示。链接有三种伪类(Pseudo-Class)，分别叫做:link，:visited，以及:active。:link伪类控制链接自然的显示，当它没有被激活(Active)（用户已经在链接上点击了）或者是访问(Visited)（用户已经浏览到链接目标）。为了组织被访问的链接改变颜色，把:link和:visited伪类设置成相同的style类型：
<style type="text/css">
a:link {color:blue}
a:visited {color:blue}
</style>
关于CSS样式的最后几句话
除了改变字体，你还可以使用CSS样式来做更多的事情；然而，在本书中，你不需要更多的经验来在例子和工程中使用它。然而，我还是劝你开始学习并且应用CSS样式。当你建立更大的网站时，CSS样式在控制和改变你的页面的显示和感觉上变得越来越重要。

总结
尽管出现了更稳定且功能更强大的HTML编辑器，我们还是处在一个开发者需要理解怎样阅读，写作以及改变元HTML的时代。当你开始操作动态生成的HTML时，你不能总是简单的替换一个值称为预先定义的HTML模板，这是非常正确的。例如，想象你有一个HTML报表模板，改模板包含了一个固定的页头和页脚。页面的中间包含报表本身。你的工作是通过查询数据库和在表格中显示结果来生成报表。
HTML模板看起来是这样的：
<html>
<head>
<title>***报表标题***, ***报表日期***
</title>
</head>
<body>

<table width="90%" align="center">
***报表体***
</table>

</body>
</html>
作为开发者，你应该使用报表的标题和日期替换 ***报表标题*** 和 ***报表日期*** 两个占位符，并且用包含报表内容的表行来替换***表格体***占位符。你可以把这个模板加载到HTML编辑器中，但是那不会帮你，因为你需要动态的创建行。你可以要求模板开发者提供一个实例行，但是你还是需要提取内容并且在报表体中为每一个表格行复制它一次。那意味着你将要不得不使用脚本创建HTML。
这种类型的操作——合并模板HTML和动态内容——构成了基本的动态网络应用。从下一章开始，你将会详细看到什么是动态网络应用。大部分动态应用包含像是这个简单的例子的大部分操作。你操作动态网络内容越久，你就会知道学好CSS样式，绝对定位，以及DHTML会多么简化你的生活。直到你彻底熟悉这些简单的技术，用脚本创建它们——在这时，HTML编辑器是没有用的除了看一下输出——将会是非常乏味以及痛苦的工作。因此，如果你在过去没有使用过HTML,，CSS和DHTML，那么你应该花一点时间从头开始创建它们——而不使用HTML编辑器。

mashimaro24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己翻译的书（关于ASP.NET），希望对大家有帮助（十）

<br />使用透明图像控制元素位置<br />你现在被限制在使用单元背景图片的方法上。你只可以赋予<td>标签的align和valign属性如下的值：left，right，center，以及top，bottom，center。然而，你可以使用一个小技巧来更准确的放置元素。<br />记住，使用<img>标签的width和height属性你只能够控制图像的宽度和高度。那个属性意味着你可以使用一像素宽度的图像并且把它按照任意方式改变宽度和高度。因此，你可以使用透明图像来强制其他的内容放置在它的右边或者下边。
复制链接

扫一扫