Javascript 如何避免这种情况？Yslow->&引用；此页面有5个外部样式表。试着把它们结合在一起。”；

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

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

alternate样式表

s

我已经安装了YSLOW！获取

“此页面有5个外部样式表。请尝试将它们合并为一个。”

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

` 一个CSS文件中的节。对于多个CSS文件也可以这样做吗

---

谢谢您的帮助。

您可以不交换样式表，而是将样式表合并为一个样式表，并在主体上使用类更改颜色。这更容易用一个例子来描述：

说你现在有

red.css

body { color:red; }

green.css

body { color:green; }

您可以使用JavaScript在它们之间进行交换

为什么不改为：

colors.css

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

---

并用JavaScript交换主体上的类。那么你只有一个CSS文件，JavaScript也简单得多。

你的主文件和其他文件可以结合使用，那么你不需要附加其他三个文件，而是可以在必要时用JavaScript加载它们吗

大概是这样的：

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

<script type="text/javascript">

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

</script>

函数changeStyle（）{
document.getElementById（'stylesheet'）.href='style2.css'；
}

将两个常用样式表组合起来，并忽略可选样式表的YSlow。YSlow是一个工具，而不是法律的执行者。

您可以在body标记中添加class属性，并通过

JavaScript

进行更改。然后您可以将所有样式表合并为一个

---

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

但我不仅仅是在更改文本颜色。。这与布局和其他元素的颜色大小有关。例如，当appyling red.css显示没有背景图像的简单框时，main.css.box有圆角和相同的框。依此类推。@Wbdvlpr：您的所有颜色样式都将使用

body.red.style1{…}

和

body.green.style1{…}

定义，因此更改body样式也会更改大多数其他样式。可能会有点混乱，不过。不情愿的是正确的，我只是在这里举了一个非常简单的例子。我也同意David Dorward的观点，YSlow只是一个工具，不是法律。NickFitz很好地总结说，这也是替代样式表的用途。我的方法允许您只需更改body类就可以交换整个布局，但它也有其缺点。我该怎么做？你是说服务器端控制？重新加载页面？我投票赞成这个答案。不要在页面上包含所有三个样式表，因为这会给80%可能不会更改颜色的用户带来不必要的开销。我并不真正关心Yslow。我想知道这个过程是否也可以简化。“替代样式表”技术正是为您使用它的目的而设计的。我会说，坚持你所拥有的——这是最好的方式：-）

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

<script type="text/javascript">

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

</script>