3

我的网站上有多个主题，用户只需单击 javascript 链接即可在多个主题之间切换。我有 5 个 CSS 文件来处理所有主题的布局。1 用于结构，3 用于不同主题的颜色等，1 用于其他一些东西。

我的 css 文件名如下所示 .. main.css、red.css、green.css、black.css、others.css 红色、绿色和黑色 css 文件定义为alternate stylesheets。

我已经安装了 YSLOW！并得到"This page has 5 external stylesheets. Try combining them into one."

我只是想知道是否可以将它们中的大多数组合成更少数量的 CSS 文件。我知道我们可以定义`

@media screen
  {
  //screen
  }
@media print
  {
  //print 
  }

` 单个 CSS 文件中的部分。也可以对多个 CSS 文件执行类似的操作吗？

谢谢你的帮助。

4

4 回答 4

6

您的 main 和 other 可以组合，而不是附加其他三个，您可以在必要时不使用 javascript 加载它们吗？

像这样的东西：

<link rel="stylesheet" href="style1.css" id="stylesheet">

<script type="text/javascript">

function changeStyle() {
    document.getElementById('stylesheet').href = 'style2.css';
}

</script>
于 2009-07-07T09:55:04.010 回答
6

结合两个常见的样式表，并忽略 YSlow 作为替代样式表。YSlow 是一种工具，而不是执法者。

于 2009-07-07T09:59:03.377 回答
3

您可以不交换样式表，而是将样式表合并为一个，然后用正文上的类更改颜色。这更容易用一个例子来描述：

说你目前有

红色.css

body { color:red; }

绿色.css

body { color:green; }

然后你用 JavaScript 在它们之间交换。

为什么不将其更改为：

颜色.css

body.red { color:red; }
body.green { color:green; }

并用 JavaScript 交换 body 上的类。这样你就只有一个 CSS 文件，而且 JavaScript 也简单多了。

于 2009-07-07T09:50:47.963 回答
0

您可以向 body 标记添加一个类属性并将其更改为JavaScript. 然后您可以将所有样式表合并为一个。

编写样式表的一个有趣工具是HSS，它可以帮助您创建嵌套结构。

于 2009-07-07T10:32:29.567 回答