HTML与CSS入门：内部样式表和内联样式 - 希赛教育新手教程

汉朝门 2011-03-19

展开全文

程序清单12.3 演示如何使用内部样式表的小型网页
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www./TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www./1999/xhtml" xml:lang="en">
      <head>
        <title>Some Page</title>
        <style type="text/css">
          div.footnote {
            font-size:9pt;
            line-height:12pt;
            text-align:center;}
          </style>
      </head>
      <body>
      ...
      <div class="footnote">
      Copyright 2006 Acme Products, Inc.
      </div>
      </body>
    </html>

在这段代码中，div.footnode样式类是在一个内部样式表中指定的，后者位于页面的开头。这样，该样式类可用于这个页面的正文。实际上，在页面正文中，它用于格式化版权标记。

创建只在一个页面中使用多次的样式规则时，内部样式表很方便。然而，在有些情况下，可能需要将样式应用于特定的元素。这称为内联（inline）样式规则，让你能够为页面的一小部分，如单个元素指定样式。例如，可以在<p>、<div>或< span>标签内使用style属性创建并应用样式规则。这种样式称为内联样式，因为是在HTML代码中指定的。

注意：<span>和</span>实际上是伪标签（dummy tag），本身并没有什么功能，只是指定添加的sytle属性将应用的范围。标签<div>和<span>之间惟一的区别是， <div>是块元素，包含分行，而<span>不包含。因此，要修改不分行的句子或段落中的文本样式，必须使用< span>。

    下面是一个style属性的例子：
    <p style="color:green">
      This text is green, but <span style="color:red">this text is red.</span>
      Back to green again, but...
    </p>
    <p>
      ...now the green is over, and we’re back to the default for this page.
    </p>

这段代码使用<span>标签来说明如何在内联样式规则中应用颜色样式属性。实际上，这个例子中的< p>标签和<span>标签都将颜色属性用作内联样式。很重要的一点是，color:red样式属性将覆盖标签< span>和</span>之间的文本的color:green样式。在第二段，不使用这两个color属性，因为这是一个新段落，使用的是整个页面的默认颜色。