HTML5权威指南
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.1 定义和应用样式

CSS样式由一条或多条以分号隔开的样式声明组成。每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。代码清单4-1所示为一条简单的CSS样式。

代码清单4-1 一条简单的CSS样式

        background-color:grey; color:white

图4-1指出了这个样式中的样式声明、属性和值。

图4-1 CSS样式剖析

本例中的样式含有两条样式声明。第一条将background-color属性的值设置为grey，第二条将color属性的值设置为white。

CSS属性花样繁多，每种属性都控制着其应用元素某方面的外观。本书第19章到第24章将介绍可用的CSS属性并展示其效果。

4.1.1 了解本章所用的CSS属性

为了说明CSS的工作方式，本章需要用到一些后面章节中才会详细介绍的CSS属性。表4-2列出了这些属性及其简要说明，还有其详细介绍所在章的编号。

表4-2 CSS属性摘要

4.1.2 使用元素内嵌样式

样式不是定义了就了事，它还需要被应用，也即告诉浏览器它要影响哪些元素。把样式应用到元素身上的各种方式中，最直接的是使用全局属性style，如代码清单4-2所示。

代码清单4-2 用全局属性style定义样式

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
          </head>
          <body>
              <a href="http://apress.com"style="background-color:grey; color:white">
                  Visit the Apress website
              </a>
              <p>I like <span>apples</span> and oranges.</p>
              <a href="http://w3c.org">Visit the W3C website</a>
          </body>
        </html>

这个HTML文档中有4个内容元素：两个超链接（用a元素生成），一个p元素以及包含在其中的一个span元素（第8章和第9章会详细介绍a、p和span这三个元素。此处关注的只是如何应用样式）。例中用全局属性style将样式应用到第一个a元素（链接到Apress网站）。style属性只影响它所属的元素，如图4-2所示。

图4-2 将样式直接应用于元素

从图中可以看出上例所用两个CSS属性的作用。background-color属性和color属性分别设置元素的背景和前景颜色。HTML文档中的另外三个内容元素未受该样式的影响。

关于CSS教

CSS话题对狂热分子似乎很有吸引力。在网上随便看场关于如何用CSS实现某种效果的讨论，很快就会见到有人争执什么才是正确的方法。我可没工夫陪嚷嚷这些东西的人磨。对于任何问题，其唯一正确的解决方法就是利用已有知识和工具为尽可能多的用户提供支持。笨蛋才会为完美的CSS方案纠缠不休。我的建议是：别管这些争论，琢磨点适合自己的技术和招法（只要确有其效而且对自己口味就行）才是正事。

4.1.3 使用文档内嵌样式

直接对元素应用样式有它的用处，但是对于可能大量需要各种样式的复杂文档来说就显得缺乏效率。这样做不仅需要逐个元素设好样式，而且软件更新时还不得不逐个元素仔细搞好样式调整，很容易出错。我们可以换种方法，用style元素（而不是style属性）定义文档内嵌样式，通过CSS选择器指示浏览器应用样式。代码清单4-3示范了style元素的用法。该例中用了一个简单的CSS选择器。

代码清单4-3 使用style元素

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<style type="text/css">
a {
background-color:grey;
color:white
}
</style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

style元素及其属性将在第7章介绍。本章关注的是如何在style元素中定义样式。此例所示做法也要用到CSS声明，只不过它们被包在一对花括号之间，并且跟在一个选择器之后。如图4-3所示。

图4-3 定义在style元素之内的样式剖析

本例中的选择器为a，它指示浏览器将样式应用到文档中的每一个a元素。图4-4所示为浏览器的处理结果。

图4-4 选择器a的效果

一个style元素中可以定义多条样式，为此只消不断重复定义一个选择器和一套样式声明的过程即可。代码清单4-4所示为一个具有两条样式定义的style元素。

代码清单4-4 在一个style元素内定义多条样式

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
              <style type="text/css">
                  a {
                      background-color:grey;
                      color:white
                  }
span {
border: thin black solid;
padding: 10px;
}
              </style>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

本例新增样式的选择器为span（表示浏览器将把样式应用到文档中所有span元素上，实现其border和padding属性所规定的效果）。border属性设置的是围绕目标元素的边框，padding属性控制的则是目标元素与边框之间的间距，其效果如图4-5所示。这些例子中的选择器和样式属性都很简单。选择器和样式属性的全面介绍分别安排在第17章、第18章和第19章、第20章。

图4-5 应用多条样式

4.1.4 使用外部样式表

如果有一套样式要用于多个HTML文档，那么与其在每一个文档中重复定义相同的样式，不如另外创建一个独立的样式表文件。这种文件按惯例以．css为文件扩展名，其中包含着用户的样式定义。代码清单4-5所示为文件styles.css的内容。

代码清单4-5 文件styles.css

        a {
            background-color:grey;
            color:white
        }
        span {
            border: thin black solid;
            padding: 10px;
        }

样式表中用不着style元素，需要什么样式，只需要为其设计好选择器，后面再跟上一套样式声明即可。然后HTML文档就可以用link元素将这些样式导入其中（link元素将在第7章详细介绍）。如代码清单4-6所示。

代码清单4-6 导入外部样式表

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

文档想要链接多少样式表都行，为每个样式表使用一个link元素即可。如果不同样式表中的样式使用了相同的选择器，那么这些样式表的导入顺序很重要，在此情况下得以应用的是后导入的样式。

1．从其他样式表中导入样式

可以用@import语句将样式从一个样式表导入另一个样式表。代码清单4-7所示的样式表combined.css示范了这种用法。

代码清单4-7 文件combined.css

@import "styles.css";
        span {
            border: medium black dashed;
            padding: 10px;
        }

一个样式表中想要导入多少别的样式表都行，为每个样式表使用一条@import语句即可。@import语句必须位于样式表顶端，样式表自已的样式定义不能出现在它之前。在combined.css这个样式表中，先导入了styles.css，然后再定义了一条针对span元素的新样式。代码清单4-8显示了HTML文档链接combined.css样式表的情形。

代码清单4-8 链接到一个包含有导入语句的样式表

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
<link rel="stylesheet" type="text/css" href="combined.css"/>
            </head>
            <body>
              <a href="http://apress.com">Visit the Apress website</a>
              <p>I like <span>apples</span> and oranges.</p>
              <a href="http://w3c.org">Visit the W3C website</a>
            </body>
        </html>

combined.css中的@import语句导入了styles.css中定义的两条样式，其中应用于span元素的那条样式又被combined.css中定义的具有相同选择器的样式盖过。其效果见图4-6。

图4-6 从其他样式表中导入样式

@import语句用得并不广泛。其中一个原因是不少人并不知道有这个东西。另一个原因则是浏览器处理@import语句的效率往往不如处理多个link元素并靠样式层叠（下节就会介绍）解决问题。

2．声明样式表的字符编码

在CSS样式表中可以出现在@import语句之前的只有@charset语句。后者用于声明样式表使用的字符编码。代码清单4-9示范了如何表示样式表使用的是UTF-8编码（这是最常见的编码）。

代码清单4-9 声明样式表使用的字符编码类型

@charset "UTF-8";
        @import "styles.css";
        span {
            border: medium black dashed;
            padding: 10px;
        }

如果样式表中未声明所使用的字符编码，那么浏览器将使用载入该样式表的HTML文档声明的编码。要是HTML文档也没有声明其编码，那么默认情况下使用的将是UTF-8。

上一章目录下一章