附录B 外文原文
Cascading Style Sheets
Abstract
Cascading Style Sheets (CSS) are a powerful way to affect the presentation of a document or a collection of documents. Obviously, CSS is basically useless without a document of some sort, since it would have no content to present. Of course, the definition of 'document' is extremely broad. For example, Mozilla and related browsers use CSS to affect the presentation of the browser chrome itself. Still, without the content of the chrome buttons, address inputs, dialog boxes, windows, and so other would be no need for CSS (or any other information).Selectors are the one thing that user agents usually must get right because the inability to correctly interpret selectors pretty much prevents a user agent from using CSS at all. On the flip side, its crucial for authors to correctly write selectors because errors can prevent the user agent from applying the styles as intended. An integral part of correctly understanding selectors and how they can be combined is a strong grasp of how selectors relate to document structure and how mechanism such as inheritance and the cascade itself come into play when determining how an element will be styled. This is the subject of the next chapter.
1 The Webs Fall from Grace
Back in the dimly remembered, early years of the Web (19901993), HTML was a fairly lean language. It was composed almost entirely of structural elements that were useful for describing things like paragraphs, hyperlinks, lists, and headings. It had nothing even remotely approaching tables, frames, or the complex markup we assume is necessary to create web pages. HTML was originally intended to be a structural markup language, used to describe the various parts of a document; very little was said about how those parts should be displayed. The language wasnt concerned with appearance it was just a clean little markup scheme.
Then came Mosaic.
Suddenly, the power of the World Wide Web was obvious to almost anyone who spent more than 10 minutes playing with it. Jumping from one document to another was no more difficult than pointing the cursor at a specially colored bit of text, or even an image, and clicking the mouse. Even better, text and images could be displayed together, and all you needed to create a page was a plain-text editor. It was free, it was open, and it was cool.
Web sites began to spring up everywhere. There were personal journals, university sites, corporate sites, and more. As the number of sites increased, so did the demand for new HTML elements that would each perform a specific function. Authors started demanding that they be able to make text boldfaced or italicized.
At the time, HTML wasnt equipped to handle those sorts of desires. You could declare a bit of text to be emphasized, but that wasnt necessarily the same as being could be boldfaced instead, or even normal text with a different color, depending on the users browser and preferences. There was nothing to ensure that what the author created was what the reader would see.
As a result of these pressures, markup elements like lt;FONTgt; and lt;BIGgt; started to creep into the language. Suddenly, a structural language started to become presentation.
What a Mess！
Years later, we have inherited the problems of this haphazard process. Large parts of HTML 3.2 and HTML 4.0, for example, were devoted to presentation considerations. The ability to color and size text through the font element, to apply background colors and images to documents and tables, to use table attributes (such as cells pacing), and to make text blink on and off are all the legacy of the original cries for 'more control!'
For an example of the mess in action, take a quick glance at almost any corporate web sites markup. The sheer amount of markup in comparison to actual useful information is astonishing. Even worse, for most sites, the markup is almost entirely comprised of tables and font elements, neither of which conveys any real semantic meaning as to whats being presented. From a structural standpoint, these pages are little better than random strings of letters.
For example, lets assume that for page titles, an author uses font elements instead of heading elements like H1:
lt;font size=' 3' color='red'gt;Page Titlelt;/fontgt;
Structurally speaking, the font tag has no meaning. This makes the document far less useful. What good is a font tag to a speech-synthesis browser, for example? If an author uses heading elements instead of font elements, though, the speaking browser can use a certain speaking style to read the text. With the font tag, the browser has no way to know that the text is any different from other text.
Why do authors run roughshod over structure and meaning this way? Because they want readers to see the page as they designed it. To use structural HTML markup is to give up a lot of control over a pages appearance, and it certainly doesnt allow for the kind of densely packed page designs that have become so popular over the years. But consider the following problems with such an approach:
Unstructured pages make content indexing inordinately difficult. A truly powerful search engine would allow users to search only page titles, or only section headings within pages, or only paragraph text, or perhaps only those paragraphs that are marked as important. To accomplish such a feat, however, the page contents must be contained within some sort of structural markup exactly the sort of markup most pages lack. Google, for example, does pay attention to markup structure when indexing pages, so a structural page will increase your Google rank.
Lack of structure reduces accessibility. Imagine that you are blind and rely on a speech-synthesis browser to search the Web. Which would you prefer
剩余内容已隐藏，支付完成后下载完整资料
附录A 译文
CSS权威指南
摘 要
层叠样式表(Cascading Style Sheets，CSS)的功能非常强大，可以影响一个或一组文档的表现。显然，如果不存在某种文档，CSS基本上毫无用处，因为这样一来它将没有要表现的内容。当然，“文档”的定义相当广泛。例如，Mozilla和相关的浏览器就使用CSS来影响浏览器Chrome本身的表现。不过，如果没有Chrome的内容——按钮、地址栏输入、对话框、窗口等等——也就没有使用CSS（或其它任何表现信息）的必要。选择器是用户代理通常必须正确的一件事，因为无法正确地解释选择器几乎阻止用户代理使用CSS。另一方面，作者正确地编写选择器是至关重要的，因为错误可以防止用户代理将样式应用为预期。正确理解选择器的一个组成部分，以及如何将它们结合起来，是一个很强的把握如何选择器涉及到文档结构和机制，如继承和级联本身发挥作用时，确定一个元素将如何风格。
1 Web的衰落
也许你还能大致记得，在Web早期（1990~1993），HTML是一个很有限的语言。它几乎完全由用于描述段落、超链接、列表和标题的结构化元素组成。我们可能认为表、框架或复杂标记等等内容是创建Web页面必不可少的，可是那时在HTML中连与之稍有些相似的东西都没有。HTML原本是要作为一种结构化标记语言，用于描述文档的各个部分；而对于这些部分应当如何显示则很少谈及。这种语言并不关心外观，它只是一种简洁的小型标记机制。
接下来Mosaic出现了。
仿佛突然之间，在网上流连时间超过十分钟的人几乎都认识到了万维网的强大。从一个文档跳到另一个文档很容易，无非是把光标指向有特殊颜色的部分文本，甚至指向一个图像，再点击鼠标。更妙的是，文本和图像可以同时显示，只需要一个纯文本编辑器就能创建页面。这是免费而且开放的，确实很酷。
网站开始到处涌现。期刊网站、大学网站、公司网站等等应运而生。随着网站数目的增加，人们越来越需要新的HTML元素，希望这些元素各自完成一个特定的功能。创作人员开始要求能够将文本变为粗体或斜体。
而此时HTML却不足以处理这些需求。利用HTML可以声明强调这部分文本，但不一定将其设置为斜体，这取决于用户的浏览器和首选项，可能只改为粗体，或者仍然是正常文本，只不过有不同的颜色而已。这就无法保证读者看到的正是创作人员所创建的文档。
迫于这些压力，开始出现诸如lt;FONTgt;和lt;BIGgt;之类的标记元素。突然之间，原来描述结构的语言开始描述外在表现了。
几年之后，这种随便的做法所存在的问题开始暴露出来。例如，HTML3.2和HTML4.0的很大一部分都是关于表现问题。此时能够通过font元素对文本设置颜色和大小，对文档和表格应用背景色和图像，使用table属性（如cellspacing），并且还能够让文本闪烁，这些都是原先要求“有更多控制”的后果。
下面举例说明这种混乱的具体情况，简单的看一下几乎所有公司网站都用到的标记。这些网站中往往标记相当多，而真正有用的信息并不多，二者差距大得惊人。更糟糕的是，在大多数网站中，标记几乎由表和font元素组成，它们对于所有表现的内容不能传达任何实际含义。从结构化的角度来看，这些网页比随机的字母串强不了多少。
例如，来看页面标题，如果创作人员使用了font元素而不是h1之类的标题元素：
lt;font size=' 3' face='Helvetica' color='red'gt;Page Titlelt;/fontgt;
从结构上来讲，font标记没有任何含义。这会使文档的可用性降低。例如，对于一个语音合成浏览器，font标记有什么意义呢？不过，如果创作人员使用标题元素而不是font元素，语音浏览器就可以使用某种语音样式来读相关文本。倘若使用font标记，这种语音浏览器就无法知道这个文本与其它文本有什么区别。
为什么创作人员这么不看重结构和含义呢？因为他们希望读者看到的页面正如他们设计的那样。使用结构化HTML标记意味着要放弃对页面外观的很多控制，而结构化HTML标记显然不支持多年来已深入人心的那些流行的页面设计。不过还需要考虑上述方法存在的如下一些问题：
非结构化页面使得建立内容引索极为困难。真正的强大搜索引擎允许用户只搜索页面标题，或者搜索页面内的小节标题，或者只搜索段落文本，也可能只搜索那些标记为重要的段落。不过，要完成这样一个任务，页面内容必须包含在某种结构化标记中，而这正是大多数页面所缺少的。例如，Google在索引页面时就会注意标记结构，所以如果你的页面是一个结构化页面，被Google搜中的机会就会增加。
缺乏结构性会降低可访问性。假设你是一个盲人，要依赖一个语音合成浏览器上网搜索。下面的两种页面你会选择哪一个呢？是一个结构化页面，使得你的浏览器可以只读出小节标题，让你选择想听哪一小节；还是一个无结构性的页面，浏览器必须读出所有内容，因为没有提示来指出哪些是标题、哪些是段落、哪些是重要的内容。再来看Google，实际上这个搜索引擎就是世界上最活跃的盲人用户，有数百万的朋友在接受它的建议，了解在哪里网上冲浪和购物。
高级页面表现只能应用于某种文档结构。假设有这样一个页面，其中只显示了小节标题，个标题旁分别有一个箭头。用户可以决定哪些小节标题对他来说需要深入了解，点击相应的箭头就能显示出这一节的文本。
结构化标记更易于维护。你可能曾经花很长的时间在别人（甚至你自己）的HTML中查找一个小错误，由于这个错误，让你的页面在某个浏览器中显得一片混乱，这种情况是不是屡屡出现？你是不是曾经花很长时间来编写嵌套表和font元素，而这只是为了得到一个包含白色超链接的边栏？为了正确地分隔一个标题和它后面的文本，你插入过多少换行元素？通过使用结构化标记，就能清理你的代码，更容易地找到所要寻找的东西。
必须承认，完全结构化的文档有些太古板、太平常了。“一白遮百丑”，就是因为这么一个原因，尽管有几百个理由要求使用结构化标记，但仍然不能阻挡HTML的使用，知道20世纪末它还能如此流行，甚至到今天它还依然盛行。我们需要一种合适的方法，将结构化标记与丰富多彩的页面表现结合起来。
2 CSS作救星
当然，HTML中充斥着的表现标记的问题并没有被W3C（World Wide Consortiam，万维网联盟）忽视，他们开始寻找一种速效的解决方法。1995年，W3C开始发布一种正在进行的计划（work-in-progress），称为CSS。到了1996年，这已经成为一个成熟的推荐草案（Recommendation），其地位与HTML同样举足轻重。下面来说明这是为什么。
2.1 丰富的样式
首先，与HTML相比，CSS支持更丰富的文档外观，其表现程度也远非HTML力所能及。CSS可以为任何元素的文本和背景设置颜色；允许在任何元素外围创建边框，同时能增大或减少元素外的空间；允许改变文本的大小写、装饰方式（如下划线）、间隔、甚至可以确定是否显示文本；还允许完成许多其他的效果。
以页面上的第一个标题（即主标题）为例，这通常就是页面本身的标题。以下是一个正确的标记：
lt;h1gt;Leaping Above The Waterlt;/h1gt;
现在，假设你希望这个标题是暗红色，使用某种字体，采用斜体，而且有下划线，还有一个黄色的背景。如果用HTML来达到上述目的，就必须把h1放在表中，而且还要有数十个其他的元素，如font和U。如果使用CSS，所需的则只是简单的一条规则：
h1 {
color: maroon;
font: italic 2em Times, serif;
text-decoration: underline;
background: yellow;
}
如此而已。可以看到，用HTML能够做到的，用CSS也能做到。不过，还不仅限于此：
h1 {
color: maroon; font: italic 2em Times, serif;
text-decoration: underline;
background: yellow url(titlebg.png) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;
}
现在h1的背景上有一个只能水平重复的图像，而且它有一个边框，与文本之间至少间隔5个像素。还去除了元素底端的外边距（空白）。这些工作是HTML做不到的，甚至连类似的事情都办不到，而这还只是CSS的冰山一角。
2.2 易于使用
如果以上所述还不能说服你，下面的理由可能会让你改变想法：样式表能大大减少Web创作人员的工作量。
首先，样式表将实现某些视觉效果的命令集中在一个方便的位置，而不是在文档中分散得到处都是。举例来说，假设你希望一个文档中的所有h2标题都是紫色。若使用HTML，则要在每个标题中增加一个font标记，如下所示：
lt;h2gt;lt;font color='purple'gt;This is purple!lt;/fontgt;lt;/h2gt;
所有二级标题都要增加这个标记。如果文档中有40个这样的标题，就必须总共插入40个font元素，每个标题插入一个font！为了达到这样一个小的效果，就要做这么多的工作。
假设你早有打算，已经插入了所有这些font元素。大功告成，你很满意——不过，可能接下来你认为这些h2标题实际上应该是暗绿色而不是紫色（或者你的老板决定让你这么做）。这样一来，就必须再回过头逐个的调整这些font元素。当然只要你的文档中只是标题有紫色文本，就可以利用“查找-替换”来完成调整。但是如果文档中还有其他元素也有紫色font，就不能使用“查找-替换”，因为这将影响哪些元素（将把那些元素也改成暗绿色）。
更好的办法是使用一条规则：
h2 {color: purple;}
这样做不仅输入起来更快，修改起来也更容易。如果确实要从紫色改为暗绿色，所要做的只是修改这一条规则。
再来看上一节谈到的有更丰富样式的h1元素：
h1 {
color: maroon;
font: italic 2em Times, serif;
text-decoration: underline;
background: yellow;
}
这样看上去比写HTML还要糟糕，不过请考虑这样的情况：一个页面上有12个看上去和h1一样的h2元素。这12个h2元素需要多少标记呢？如果使用HTML，就需要非常多的标记。另一方面，如果用CSS，所要做的只是：
h1, h2 {
color: maroon;
font: italic 2em Times, serif;
text-decoration: underline;
background: yellow;
}
现在这些样式会同时应用到h1和h2元素，这里只是多敲了3次键而已。
如果你想改变h1和h2元素的外观，CSS的优势更为突出。考虑一下，与对前面的样式作如下修改相比，需要花多少时间才能修改h1和12个h2元素的HTML标记：
h1, h2 {
color: navy;
font: bold 2em Helvetica, sans-serif;
text-decoration: underline overline;
background: silver;
}
如果用秒表来记录上述两种方法所花的时间，我打赌使用CSS的创作人员肯定会让使用HTML的人输的哑口无言。
此外，大多数CSS规则都集中在文档中的某一个位置。也可以将其分组为相关的样式或者单个元素分散到文档中，但是把所有样式都放到一个样式表中的做法往往高效很多。这样，在一个位置上就能创建（或修改）整个文档的外观。
2.3 在多个页面上使用样式
不过请等等，还不只是如此！不仅能把一个页面的所有样式信息集中到一个位置，还可以创建一个样式表，然后把这个样式表应用到多个页面。这是通过以下过程实现的；将样式表单独保存为一个文档，然后由要使用该文档的页面导入。通过使用这个功能，可以很快的为整个网站创建一致的外观。此外只需将这个样式表链接到网站上的所有文档。在此之后，如果你想要改变网站页面的外观，只编辑一个文件就够了，所做的修改便会自动地传播到整个服务器！ 剩余内容已隐藏，支付完成后下载完整资料
资料编号：[484680]，资料为PDF文档或Word文档，PDF文档可免费转换为Word
以上是毕业论文外文翻译，课题毕业论文、任务书、文献综述、开题报告、程序设计、图纸设计等资料可联系客服协助查找。
