跳转到内容

XML - 数据交换管理/CSS

Add links
来自维基教科书，开放的书籍，为开放的世界


上一章 下一章
← XLink XSLT和样式表 →


学习目标

[编辑 | 编辑源代码]

完成本章后，对于CSS，您将能够

  • 了解使用CSS的好处
  • 了解CSS的局限性，以便您能够为您的文档找到最佳解决方案
  • 了解如何在XML文档上实现和使用CSS

简介

[编辑 | 编辑源代码]

CSS（层叠样式表）是一种描述结构化文档的呈现形式的语言。

基于XML或HTML的文档没有固定的样式，它包含没有样式信息的结构化文本。文档在纸上打印和在浏览器或手机上查看时的外观由样式表决定。使用CSS是使文档看起来一致且易于更新的好方法，维基百科就是一个很好的例子。

CSS的历史

[编辑 | 编辑源代码]

样式表自1990年代初HTML诞生以来就一直以某种形式存在。各种浏览器都包含自己的样式语言，可用于自定义网页文档的外观。最初，样式表针对的是最终用户；HTML的早期版本没有提供许多用于呈现属性的功能，因此网页文档的外观通常取决于用户。

然而，随着HTML语言的发展，它包含了更多样化的样式功能，以满足网页开发人员的需求。随着这些功能的出现，样式表变得不那么重要，而用于定义样式属性的外部语言直到CSS的开发才被广泛接受。

层叠样式表的概念最初由Håkon Wium Lie于1994年提出。Bert Bos当时正在开发一款名为Argo的浏览器，该浏览器使用自己的样式表；两人决定共同开发CSS。

已经提出了许多其他样式表语言，但CSS是第一个包含“层叠”概念的语言——文档的样式可以从多个“样式表”继承。这允许用户的首选样式在某些区域覆盖站点作者指定的样式，而在其他区域继承或“层叠”作者的样式。以这种方式层叠的能力为用户和站点作者提供了额外的灵活性和控制；它允许混合样式偏好。

Håkon的提议于1994年在芝加哥举行的“Mosaic and the Web”会议上提出，并在1995年与Bert Bos再次提出。大约在这个时候，万维网联盟正在成立；W3C 对 CSS 的开发产生了兴趣，并为此组织了一个研讨会。Håkon和Bert是该项目的核心技术人员，微软的Thomas Reardon等其他成员也参与其中。到1996年底，CSS几乎准备就绪，即将正式发布。CSS 1 级建议于 1996 年 12 月发布。

1997年初，CSS在W3C内被分配了一个自己的工作组。该小组开始解决 CSS 1 级未解决的问题，最终产生了 CSS 2 级，该级别于 1998 年 5 月作为正式建议发布。截至 2005 年，CSS 3 级仍在开发中。

为什么要使用CSS？

[编辑 | 编辑源代码]

更整洁的代码

[编辑 | 编辑源代码]

管理设计元素的大量HTML标签通常会掩盖页面的内容，使代码更难阅读和维护。使用CSS，页面的内容与设计分离，使HTML、XHTML和XML等格式的内容制作尽可能容易。

页面加载速度更快

[编辑 | 编辑源代码]

非CSS设计通常比CSS设计的网站包含更多代码。

在非CSS设计中，有关设计的信息会在访问者访问每个新页面时重新加载。此外，设计的细微之处会很尴尬地执行。例如，定义网页间距的常用方法是在表格中使用空白GIF图像。

使用CSS使内容和设计分离，因此需要的代码更少。CSS文件在每次会话中只加载一次，并保存在用户的本地缓存中。所有有关维度的信息都在此样式表中定义，从而使空白GIF图像等笨拙的结构变得不必要。

尽管越来越多的互联网用户拥有宽带，但网页的大小对于那些只能使用拨号连接的用户来说可能很重要。假设一个使用拨号上网的用户访问了某家公司的网站，而这位访问者遇到了很长的加载时间。访问者很可能会停止访问，或者认为这家公司“很慢”。这样，看似微小的差异可能会带来额外的收入。

此外，带宽不是免费的，大多数网站托管公司都会限制带宽使用量。事实上，许多主机根据带宽使用情况收费，因此更少的代码还可以降低成本。

重新设计变得微不足道

[编辑 | 编辑源代码]

如果正确使用，CSS是一个非常强大的工具，可以让网站架构师完全控制网站的呈现方式。它是一种记号法，其中设计规则受到管理。对于需要对每种类型的元素（例如标题、副标题、代码片段或段落）保持一致外观的大型网站来说，这一点非常有用。

例如，假设一家公司拥有一个包含 1,200 个页面的网站，该网站耗费了几个月的时间才完成。然后，该公司进行了品牌重塑，因此需要将字体、背景、超链接的样式等等更新为新的企业设计。如果该网站使用CSS进行了正确的设计，那么更改只需编辑单个CSS文件（假设它是外部样式表）的相应行即可。如果没有使用CSS，则管理外观的代码将存储在每个页面中。在这种情况下，为了更新设计，必须单独更新每个文件。

优雅降级

[编辑 | 编辑源代码]
 本节是一个存根。
您可以通过扩展它来帮助维基教科书。

可访问性

[编辑 | 编辑源代码]

视力障碍者或使用特殊网页浏览器的用户，例如盲人，可能会更喜欢使用 CSS 设计的网站，而不是没有使用 CSS 设计的网站。因为 CSS 允许您将阅读顺序与视觉布局分开定义，这使得特殊网页浏览器更容易阅读页面。请记住，任何戴眼镜或隐形眼镜的人都可以被认为是视力障碍者。

许多设计师将字体大小锁定在像素中，这会阻止用户更改字体大小。良好的 CSS 设计允许用户随意增加或减少字体大小，从而使页面更易于使用。大量的网民喜欢使用 300% 或更高的放大倍数。

为用户提供更改字体大小的机会对普通用户没有任何影响，但对视力障碍者来说可能会有所不同。问问自己：网站是为谁制作的？访客还是设计师？

使用 CSS 设计的网站在 PDA 和手机中使用的网页浏览器中比基于表格的设计显示效果更好。使用手机浏览的趋势可能会持续增长。基于表格的设计将使这些用户无法访问网页。

请谨慎使用您的 CSS 设计。滥用绝对定位和绝对尺寸而不是相对尺寸可能会使您的网页更难访问，而不是更容易访问。好的表格设计比糟糕的 CSS 设计更好。

在搜索引擎中获得更好的结果

[编辑 | 编辑源代码]

过度使用表格会混淆搜索引擎，它们实际上可能会在分离内容和代码方面遇到问题。搜索引擎机器人从页面的顶部开始读取，它们希望尽快找出网页的相关性。同样，更少的代码将使搜索引擎更容易找到相关的代码，并且可能会使您的网页排名更高。

CSS 的缺点

[编辑 | 编辑源代码]

使用 CSS 进行样式设置几乎没有缺点。但是，一些浏览器，尤其是旧浏览器，有时会错误地显示页面。当我收集本章的信息时，我发现许多专家认为使用 CSS 格式化 XML 不是网络的未来。主要观点是 XSL 将成为新的标准。因此，请确保您再次通读本书的前一章。XSL 和 CSS 的格式化部分将非常相似。例如，您可以在 XSL 中使用所有 CSS1 和 CSS2 属性和值，其含义与 CSS 中相同。

CSS 等级

[编辑 | 编辑源代码]

第一个成为正式 W3C 建议的 CSS 规范是 CSS 1 级，于 1996 年 12 月发布。其功能包括支持

  • 字体|字体属性，如字体和强调
  • 文本、背景和其他元素的颜色
  • 文本属性，如单词、字母和文本行之间的间距
  • 对齐（排版）|文本、图像、表格和其他元素的对齐
  • 大多数元素的边距、边框、填充和定位
  • 属性组的唯一标识和通用分类

W3C 维护着 CSS1 建议。

CSS 2 级由 W3C 开发，并于 1998 年 5 月发布为建议。CSS2 是 CSS1 的超集，包含许多新功能，其中包括元素的绝对、相对和固定定位，媒体类型的概念，支持听觉样式表和双向文本，以及新的字体属性，如阴影。W3C 维护着 CSS2 建议。

CSS 2 级修订版 1 或 CSS 2.1 修正了 CSS2 中的错误，删除了支持较差的功能，并将已实施的浏览器扩展添加到规范中。它目前是 候选建议。

CSS 3 级目前正在开发中。W3C 维护着一个 CSS3 进度报告。

CSS 语法和属性

[编辑 | 编辑源代码]

以下部分包含一些最常见的 CSS 属性列表。完整的列表可以在 此处找到。在 XML 文档中使用 CSS 的语法与在 HTML 中的语法相同。不同之处在于您将 CSS 文件链接到 XML 文档的方式。为此，您必须在 XML 文档的根元素之前编写 <?xml-stylesheet href="X.css" type="text/css"?>，其中 X.css 当然是指 CSS 文件的名称。

如本章前面所述，CSS 是一组规则，用于确定文档中的元素将如何显示。规则包含两个部分：选择器和一个或多个由大括号（花括号）包围的声明组

selector { declaration; ...}

选择器通常是您要设置样式的标签。这是一个包含单个声明的简单规则的示例

h1 { color: red; }

结果：文档中的所有 h1 元素都以红色文本颜色显示。

通用语法

[编辑 | 编辑源代码]

规则通常按以下方式定义

selector { declaration; ...}

声明的格式如下

property: value;

请记住，一个规则中可以包含多个声明。一个常见的错误是将冒号（用于分隔声明的属性和值）和分号（用于分隔声明）混淆。选择器选择规则适用的元素，声明设置所选元素不同属性的值。

回到我们的示例

h1 { color: red; }

在我们的示例中

选择器是元素 h1
声明 color: red

属性 color 获取值 red

可以将多个声明写入单行或多行，因为空白会折叠

h1 { color:red; background-color:white; }

或者

h1 {
color:red;
background-color:white;
}

有关 CSS 定义的属性的详细信息，请参见 CSS 编程#CSS1 属性。

总结

[编辑 | 编辑源代码]

层叠样式表 (CSS) 用于网页，以定义保存在 HTML 或 XML 中的信息的视图。虽然 XML 和 HTML 创建和保留文档的结构，但 CSS 用于定义文档中对象的显示和放置以及其内容。所有这些信息都保存在一个单独的文件中，即 .css 文件中。在 CSS 文件中定义了文字大小、背景颜色、文字类型等。图片和其他动画的放置也定义在 css 文件中。如果正确使用 CSS，它将使网页更易于创建，更重要的是，更易于维护。因为您只需要更改 css 文件即可使整个网站发生变化。

文件：Csszengarden nocss.png
没有 CSS 的 CSS Zen Garden
文件：Csszengarden1 css.png
带有 CSS 的 Zen Garden


[编辑 | 编辑源代码]

参考资料

有用链接

练习

[编辑 | 编辑源代码]

练习 1

[编辑 | 编辑源代码]

使用下面提供的 CSS 文件，创建一个作为 XML 文档的书籍价格列表。<?xml version="1.0"?> Exercise1.css

<book> Lord of the rings</book> book{
  display: block;
  background-color: transparent;
  margin: 20px 10px 10px 200px;
}
<isbn>1.000.56439 </isbn> isbn{
  display: block;
  font: 12pt/15pt georgia, serif;
}
<title> The Two Towers </title> title {
  display: block;
  font: 14pt/18pt verdana, sans-serif;
}
<author> J.R.R. Tolkien </author> author {
  display: block;
  font: italic 12pt/15pt georgia, serif;
}
<publisher> Penguin </author> author {
  display: block;
  font: 12pt/15pt georgia, serif;
}
<price> 48 EUR </price> price{
  display: block;
  font: bold 12pt/15pt georgia, serif;
  color: #ff0000;
  background-color: transparent;
}

练习 2

[编辑 | 编辑源代码]

创建一个个人主页，介绍你自己。

页面应该包含一个页眉、一个页脚和一个作为链接列表的导航。

解决方案

[编辑 | 编辑源代码]

解决方案

CSS 挑战

[编辑 | 编辑源代码]

复制并粘贴 HTML，然后接受挑战，创建一个与图片匹配的样式表！

取自 "https://wikibooks.cn/w/index.php?title=XML_-_Managing_Data_Exchange/CSS&oldid=3535651"
华夏公益教科书