自定义网站样式(输入从到的完整样式表)
日期：2013-06-14 浏览次数：21477 次
本文向您引见创建和使用款式表的基本内容，以及跨浏览器兼容问题和款式表在 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>
<HEAD>
<TITLE>Style Sheets Demo</TITLE>
<STYLE type="text/css" media="screen">
<!-- hide from legacy browsers
P {color: red;
font: Arial, Helvetica, sans-serif}
A {color: blue;
font: Comic Sans MS, sans-serif}
-->
</STYLE>
</HEAD>
<BODY>.....
如今您看到了款式表的样子，我们来解析它并为您解释每个部件。
<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-size | xx-large, x-large, large, small, x-smll, xx-small, Npx, Npc, Npt, Nmm, Ncm, Nin | N = 数字, px = 像素, pc = Picas, pt = 点, mm = 毫米, cm =厘米, in = 英寸。 这些值是绝对的，不管查看设备如何，将按同样大小精确显示：Picas、点、毫米、厘米和英寸。其它值将依据查看设备和字体比例绝对显示。 |
| font-family | cursive, fantasy, mono-space, sans-serif, seri
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
