0

我正在创建一个 Web 应用程序并编写了一个 CSS 样式表以应用于所有颜色、布局、定位等。总共大约 800 行。

我想为用户提供选择配色方案偏好的选项；目前，这意味着我的项目中有 6 个 CSS 文件副本，每个副本仅具有不同的颜色属性（大约 15 或 20 行）来表示 6 个不同的配色方案选项。

这似乎是很多繁琐的重复；所有其他 CSS 属性在每个副本中保持不变。

有没有办法将颜色属性分离到单独的 CSS 样式表中，以便与一般 CSS 样式表一起应用于页面？

4

3 回答 3

2

实现目标的一种方法是提取每个受颜色影响的 CSS 元素，并将其放入一个选择器中，例如：

p, li, #whatever, .someClassInfluencedByColoring{
  color: #[yourColor];
}

您可以将此声明放入一个 CSS 文件（例如 color.css）中，然后在主 CSS 文件中使用如下导入语句：

@import url("color.css");

另一种方法是使用SASS或LESS并使用变量，您可以在每个样式表中定义一次颜色。

于 2013-02-23T00:32:24.953 回答
1

制作颜色样式表。假设您的主要课程有一个名为

Main.css

.example{
float:right;
width:100px;
height:auto;
}

并且您希望使用用户指定的配色方案对其应用颜色。

像这样制作较小的配色方案

Color1.css

.example{
color:orange;
}

Color2.css

.example{
color:red;
}

在主索引页面中将如下所示：

<head>
<link rel="stylesheet" type="text/css" href="main.css" />

    <?php
    //user get color scheme from db query
    $color = //user color variable
    if($color == 1){
    echo '<link rel="stylesheet" type="text/css" href="color1.css" />';
    }elseif($color == 2){
    echo '<link rel="stylesheet" type="text/css" href="color2.css" />';
    }
    ?>
</head>

这是我能想到的唯一方法。

于 2013-02-23T00:48:30.327 回答
-1

只需使用

var bleh = $('body');
function changeToBlue() {
    bleh.css("background","blue");
}
于 2013-02-23T00:58:33.157 回答