0

私は Web アプリケーションを作成しており、すべての色、レイアウト、配置などに適用する CSS スタイルシートを作成しました。全部で約 800 行です。

配色設定を選択するオプションをユーザーに提供したいと考えています。現時点では、これは私のプロジェクトに CSS ファイルの 6 つのコピーがあり、それぞれに異なる色属性 (約 15 または 20 行) しかなく、6 つの異なる配色オプションを表すことを意味します。

これは面倒な重複のように思えます。他のすべての CSS 属性は、各コピーで同じままです。

色属性を個別の CSS スタイルシートに分離して、一般的な CSS スタイルシートと共にページに適用する方法はありますか?

4

3 に答える 3

2

目標を達成する 1 つの方法は、カラーリングの影響を受けるすべての CSS 要素を抽出し、次のように 1 つのセレクターに配置することです。

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

この宣言を 1 つの CSS ファイル (color.css など) に入れ、マスター CSS ファイルで次のような import ステートメントを使用できます。

@import url("color.css");

もう 1 つの方法は、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 に答える