web-dev-qa-db-ja.com

同じHTMLページで複数のCSSスタイルシートを使用する

たとえば、両方のスタイルシートにバナークラスがある同じHTMLページで複数のCSSスタイルシートを使用するにはどうすればよいですか。参照しているクラスをどのように指定しますか？

htmlcssstylesheet
24
Lilz

スタイルシートは、HTMLソースに表示される順序で、事実上単一のスタイルシートに連結されます。

ルールセットを適用するための 通常のルール を適用します（つまり、 specificity によって、タイのイベントで勝つ特定のプロパティを定義する最後のルールセットを使用します）および ！important スパナを作品に投げる）

20
Quentin

はい、複数のスタイルシートを含めることができますが、代替スタイルシートとしてラベルを付け、JavaScriptを使用して（おそらくリンクをクリックすることによって）ユーザーにそれらをアクティブにする方法を提供する必要があります。

別のスタイルシートを作成するには：

<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />

次に、Javascriptファイルに以下を実行するメソッドを作成します。1.すべてのスタイルシートを配列にロードします2.例：

function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i < links.length; i++)
{
    link = links[i];
    if(/stylesheet/.test(link.rel))
    {
        sheets.Push(link);
    }
}

    return sheets;
}

次に、不要なスタイルシートを無効にし、必要なスタイルシートを有効にするif/elseループを使用して配列を調べます。 （別のメソッドを記述するか、上記のメソッドにループを挿入できます。onloadコマンドを使用して、CSS配列をページにロードし、printViewメソッドを呼び出します。）

function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i < sheets.length; i++)
{
    sheet = sheets[i];
            if(sheet.title == title1)
    {
        sheet.disabled = false;
    }
    else
    {
        sheet.disabled = true;
    }

最後に、ユーザーが次のようなJavaScriptメソッドをアクティブ化するコードをHTMLドキュメントに作成します。

 <a href="#" onClick ="methodName();">Link Name</a>
16
Susan

ルール内で同じレベルの specificity を指定すると、どちらを参照するかを制御できません（たとえば、両方とも単に.banner）最後に含まれたスタイルシートが勝ちます。

プロパティごとであるため、進行中の組み合わせがある場合（たとえば、一方にbackgroundがあり、もう一方にcolorがある場合）、組み合わせを取得します...プロパティがどちらも、スタイルシートの順序で最後に表示されるものが優先されます。

5
Nick Craver

できないこととしないこと。

ページ上のすべてのCSSルールが適用され（HTMLはこのプロセスについて「何も知らない」）、最高の特異性を持つ個々のルールは「固執」します。特異性は、セレクターとドキュメントに表示される順序によって決まります。すべての点で、これはカスケードの一部であるということです。ネット上の非常に多くのCSSチュートリアルの1つを参照する必要があります。

3
annakata

特定のスタイルシートを参照することはありません。ドキュメント内のすべてのCSSルールは、内部的に1つに融合されます。

同じ要素に同じ特異性で適用される両方のスタイルシートのルールの場合、後で埋め込まれたスタイルシートは前のスタイルシートをオーバーライドします。

Firebug のような要素インスペクターを使用して、どのルールが適用され、どのルールが他のルールによってオーバーライドされているかを確認できます。

1
Pekka 웃

最後に含めるものが使用されます。ただし、最初のスタイルシートに！importantが含まれるルールがある場合、それらが優先されることに注意してください。

1
Mikael Eliasson

HTMLページ内の要素を参照（「選択」）するスタイルシートと考えてください。逆ではありません。

1
David Oliver