Time8网络信息网

如果我们查看一个使用了 philquotes 区块的页面的 <head/> 部分，我们将看到有个 link 指向模块的样式表：

<link type="text/css" rel="stylesheet" media="all"
  href="/drupal/sites/all/modules/devel/devel.css" />
<link type="text/css" rel="stylesheet" media="all"
  href="/drupal/sites/all/modules/philquotes/philquotes.css" />
<link type="text/css" rel="stylesheet" media="all"
  href="/drupal/themes/bluemarine/style.css" />
<link type="text/css" rel="stylesheet" media="all"
  href="/drupal/sites/all/themes/descartes/new.css" />

高亮的 link 是模块调用 drupal_add_css() 时添加的。

如果我们想覆写那个文件中的样式，该怎么办呢？

CSS文件的存放位置是很重要的。模块 CSS 文件总是先于主题 CSS 文件装载。这样，主题文件可以利用 CSS 层叠规则覆写或增添模块CSS中指定的样式。（参见 CSS2 规格说明，了解更多有关层叠规则的信息http://www.w3.org/TR/CSS21/cascade.html ）

由于存在顺序规则，主题开发者可以在主题的样式表中添加CSS语句，从而覆写模块的默认CSS。

例如，我们在 Descartes 主题的 new.css 文件中添加几行，就可以修改 <div id="philquotes-text"/> 元素的样式：

#philquotes-text {
  color: pink;
}

这个修改不会直接覆写 philquotes.css 添加的任何样式，它只是为已有样式添加了新的装饰。

现在，除了 philquotes.css 已经添加的样式以外，名言的正文将会显示为粉红色：

插图 4-9

采用这种方法，主题开发者可以覆写并扩展模块中定义的默认CSS。