Question

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

我想为用户提供选择配色方案首选项的选项;目前这意味着我的项目中有6个CSS文件副本，每个副本只有不同的颜色属性（约15或20行），代表6种不同的颜色方案选项。

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

有没有办法将颜色属性分成单独的CSS样式表，以便将常规CSS样式表应用到页面？

Answer 1

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

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

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

@import url("color.css");

另一种方法是使用SASS或LESS并使用变量来定义每个样式表中的颜色一次。

Answer 2

制作彩色样式表。让我们说你的主要有一个名为

的类

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>

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

Answer 3

只需使用

var bleh = $('body');
function changeToBlue() {
    bleh.css("background","blue");
}

有没有办法在一个母版页中使用多个CSS样式表？

3 个答案: