3

私は、継承したばかりの大きな CSS ファイル (数千の要素) を使用して、サイトにテーマ機能を提供することを担当しています。基本的に、ユーザーが画面上の色を変更できるようにしたいと考えています。

すべての CSS 要素には、色の定義以外にも、サイズ、フォント、フロートなどの多くの属性があります。また、特定の色がさまざまな CSS 要素に表示されます。

ASP.NET のテーマ機能を使用してテーマごとに異なる CSS ファイルを使用すると、すべてのテーマで CSS ファイルを複製する必要があり、メンテナンスが困難になります。

最適には、単一の CSS ファイル (メンテナンス用) を持ち、色属性のみを変更できるようにしたいと考えています。

ここでのオプションは何ですか？

4

6 に答える 6

4

色の属性を複製するだけでよいので、

a:hover
{
   text-decoration:none;
   color:Black;
   display:block    
}

テーマのcssファイルで必要なのは次のとおりです。

a:hover
{
    color:Red;
}

ここで、ページで元のcssファイルを参照していることを確認すると、ブラウザーはすべてのスタイルをマージします。

于 2008-12-10T20:26:12.397 に答える
1

違いが小さい場合、考えられるアプローチはCSSカスケードルールです。例：

html：

<body class="dark">
    <a ...>some text</a>
</body>

css：

/* default */
body { color:white }
    a { color:blue }

/* dark theme */
body.dark { color:black }
    .dark a { color:white }
于 2008-12-10T20:30:49.673 に答える
1

特にテーマの目的は複数のCSSファイルを持つことであるため、1つのCSSファイルを保持することは悪い考えかもしれないと思います。2つのCSSファイルを使用することをお勧めします。ベースファイル（既に使用しているもの）と現在のテーマです。これらはベースファイルの後にインクルード/リンクされ、ベースとは異なるものをオーバーライドします。

于 2008-12-10T20:33:44.737 に答える
1

TravisO のように、2 つの CSS ファイルを使用することをお勧めします。あなたのベースからすべての色データを抽出し、それを新しい「デフォルト」テーマに追加します。

このように、ポジショニングの詳細はすべて 1 つの場所にあり、テーマには色情報のみが含まれます。テーマの色に加えて、デフォルトの色をダウンロードして解釈するためのブラウザの時間を節約します。

于 2008-12-10T20:40:38.280 に答える
0

覚えておいてください: 要素は複数のスタイル クラスを持つことができます。レイアウトは静的なままで、カラーリングとは別のものになるため、レイアウトとカラーのクラスを別々に、まったく別のファイルで定義する必要があります。

したがって、テーマに対してやりたいことは、次のように別の css ファイルでいくつかの色を定義することです。

.DefaultBackgroundColor { background-color: white; }

.PrimaryColor { background-color: #123456; }
.PrimaryAsForeground  { color: #123456; }

.AccentColor { background-color: #654321; }
.AccentAsForeground { color: #654321; }

.ComplementColor { background-color: #333333; }
.ComplementAsForeground { color: #333333; }

.DefaultTextColor { color:black; }
.HighlightTextColor { color:black; font-style:bold; }
.ComplementTextColor { color:white; }

さらに色を追加することもできますが、アイデアは得られます。次に、HTML で、レイアウト クラスに加えて、これらのクラスを要素に追加します。たとえば、これらのクラスを使用して、StackOverflow のナビゲーション ボタンを次のようにスタイル設定できます。

<div class="nav ComplementTextColor">
    <ul class="primarynav">
         <li class="PrimaryColor"><a href="/questions">Questions</a></li> <!-- selected -->
         <li class="ComplementColor"><a href="/tags">Tags</a></li>
         <li class="ComplementColor"><a href="/users">Users</a></li> 
         <li class="ComplementColor"><a href="/badges">Badges</a></li>
         <li class="ComplementColor"><a href="/unanswered">Unanswered</a></li>
    </ul>
</div>

明らかに、これらの色は構成されており、一緒には機能しませんが、それがこのセットアップの美しさです. これにより、あちこちで同じ色を定義する必要がないため、色をいじったり微調整したりするのが非常に簡単になります。一度設定すれば、ごくわずかな変更を加えるだけで、サイトの色を完全に変更できます。

欠点は、あなたが限られているということです。たとえば、私が投稿した html を使用すると、「フック」を設定していないため、css ファイルを変更するだけで、ここにあるボタンを他のすべてとは異なる色にすることはできませんでした。しかし、簡単な編集を 1 回行うだけで、彼らがここで使用している醜いオレンジ色を全面的に変更することができます。

于 2008-12-10T20:40:12.383 に答える
0

これについては、TravisO のアイデアに同意する必要があります。

この場合、1 つのファイルのままにしておくと、個別の css ファイルを作成するよりも、実際にはメンテナンスのオーバーヘッドが大きくなります。必要なのは、すべてのテーマに適用される基本的な css のファイル (通常はルート/スタイル フォルダー) と、各テーマのカラーリング情報 (またはその他のテーマ固有の css) のファイルです。

于 2008-12-10T22:45:06.563 に答える