|
|
|
#1
2006-03-27, 01:40 PM
|
||||
|
||||
自定义网站样式(输入从<STYLE>到</STYLE>的完整样式表)
样式表是网页设计的重要部件。由于得到 Microsoft Internet Explorer 4.0 和 Netscape Navigator 4.0 的认可，样式表已经成为可用的排版和设计工具。这两种浏览器都有限地（不完整）支持由 Cascading Style Sheet 1.0 制定的 World Wide Web Consortium. 标准。在设计时，样式表可以使您完整地控制网页上文字元素的表现，为您带来几乎与出版业的设计一样的多灵活性。本文向您介绍创建和使用样式表的基本内容，以及跨浏览器兼容问题和样式表在 Web 上的发展趋势。假定您已掌握了基本的 HTML 知识。
基本内容 样式表只是一个格式化命令的列表，它使您可以在简单 HTML 命令（如 <FONT>标记）的基础上控制网页的外观。样式表的概念并非全新的，它们来自文字处理器和排版软件。页面上的每个元素，从个别字符到整个页面均可通过样式表中包含的信息来单独定制格式。 在 Web 上，由于存在多种不同类型 浏览器，所以排版上有许多限制。并且每个浏览器仅有限地支持样式表。用在 Web 上的样式表被成为层叠样式表 (CSS)，其被 W3C 所认可的最新版本是 2.0。然而，象这里写的一样，没有浏览器 100% 地支持 CSS 1.0 和 2.0 版。本文将集中介绍 CSS 1.0 版 － 不用担心它会被淘汰，因为 2.0 版完全向下与 1.0 版兼容。 您可以创建的最简单的样式表被称作"嵌入样式表"。它可以直接被放置或写在到您要用的 HTML 文档中，该网页的结构如下所示： 现在您看到了样式表的样子，我们来解析它并为您解释每个部件。<HTML> <STYLE type="text/css" media="screen">....</STYLE> 该标记包含了被调用的样式表信息，不奇怪， <STYLE>标记。 类似于大多数的 HTML 标记，它也需要被"封闭"，以正确实现功能（就是说，它必须以 </STYLE> 标记结束）。这个特殊的标记必须出现在 <HEAD>标记之间，以使其能够被大多数的浏览器解析。在这个开放标记的声明中，必须包含两个属性: 属性告诉浏览器要使用的样式表的格式 (在此例中，可用的类型是"text/css")，而 media属性告诉浏览器显示介质是显示器（屏幕）还是打印页面（印刷品）；但对当前的浏览器来说，该值只代表"屏幕"。 我刚才添加的这两个 <STYLE> 属性未必是所有的浏览器都需要的。Microsoft Internet Explorer 对样式表的解释不是非常严格，可以忽略这些属性。Netscape Navigator却不可思议的对这些属 性的要求非常严格。我还是加上它们 － 这毕竟是好的编码方式。如果 W3C声明这些属性是必 须的，那就加上它们吧。唯一的方法是建议两大公司 (Microsoft and Netscape)采取一致行动， 为我们这些网页设计者制定统一的 CSS标准。 <!-- .... --> 下面是注释行。它出现在 <STYLE> 标记行的下面，和 </STYLE>标记行的上边。注释不是必须的，但添加注释是好的编码习惯；理由是注释行可以在用户使用旧浏览器（两大公司的 3.0、2.0 和 1.0 系列）查看网页时，可以使样式表数据不被显示出来。旧浏览器会自动略过它们无法识别的标记，但由于在 <STYLE> 标记之间的内容是纯文本，又未被任何标记括起来，所以旧浏览器就可能会将它们显示出来。但如果在这些内容的前后加上注释标记，就可以确保这些内容被那些浏览器略过。别忘了封闭您的注释块，否则整个页面都将不显示。 P {color: red; font: Arial, Helvetica, sans-serif} 最后我们来到 CSS 的核心 － 定义元素。通过下列方法定义每个元素：元素 {属性: 值; 属性: 值}。这里的"元素"是您要重新指定样式的 HTML 标记；"属性：值"是预定义的样式表的外观（以 CSS 规范设置）及相应的值。所有的"属性：值"的组合必须用"{ }"括起来。属性也可以通过冒号 [ : ] 带一个值来描述，属性－值的配对可以通过分号 [ ; ] 带其它配对来描述。最后一个属性－值的配对后不需带 [ ; ]，因为在该括弧中没有其它的配对跟随其后了。 这里是一些定义特定元素样式所例举的属性及其相应的值：  上面列出的属性和值仅是整个集合的一小部分，但它们对您着手排版网页已经足够了，不用再只使用<FONT> 标记了。在您为某个元素定义了样式之后，那么在网页上该元素的实体将采用指定的格式。 
|
平板模式
