0

2 つのスタイル シートと 1 つの html ページがあります。ページ中央の div 内でスタイル シートの 1 つを使用できますか? 両方のスタイルでh1、h2、thなどの設定が異なるため、それを行いたいと思います。

4

5 に答える 5

1

HTML 5 では属性が導入されましたscoped。

これにより、ドキュメントの一部のみに適用される<style>要素 (<link>外部スタイルシートではなく) を持つことができます。

ブラウザのサポートは弱い (私が持っている最新の統計は、サポートがゼロだった 2011 年 9 月のものです) ため、これはほぼ確実に実用的ではありません。

通常の解決策は、単一のスタイルシートを使用することです。ドキュメントのセクションを で要素にラップし、idセレクターでその ID を子孫コンビネーターで使用して、より広いドキュメントから適用可能なすべてのスタイルをオーバーライドします。

h1 { 
    color: red;
}

#mySection h1 {
    color: black;
}
于 2012-11-09T15:59:52.697 に答える
0

次のようなものがある場合、たとえば div で見出しにアクセスできます。

<div class="example">
    <h1>Fancy headline</h1>
</div>

.example h1 {...} のようなスタイルを使用して、その見出しに特定のスタイルのみを与えることができます。それがcssのカスケードです;）

于 2012-11-09T16:03:59.450 に答える
0

HTML のどのセクションがどのスタイルシートを使用するかを指定しようとする代わりに、スタイルシートでより具体的にすることで、スタイルの衝突が発生しないようにします。例;

HTML:

<div id="a">
    <div class="b">
        <h1>c</h1>
    </div>

    <h1>d</h1>
</div>

CSS:

#a h1 {
    /* style */
}

#a .b h1 {
    /* another style */
}
于 2012-11-09T16:04:30.480 に答える
0

どちらが優先されるかは、特異性によって決まります。その方法を選択した場合は、クラスを追加して、H1 のスタイルを区別することができます。

ただし、HTTP を介して 2 つの CSS ドキュメントをロードすると、パフォーマンスも低下します。

個人的には、自分のスタイルをクラスごとに 1 つのドキュメントにまとめます。例えば：

h1 {
    color:orange;
}

.style1 h1 {
    font-size: 600%;
    color: red;
}

.style2 h1 {
    font-size: 20%;
    color: yellow;
}

重要なのは、シンプルに保つことです。サイトが非常に巨大になった場合に、メソッドが長期的にどれだけ維持できるかを考えてください。

于 2012-11-09T16:00:20.483 に答える
-1

スタイルシートはいくつでも使用できます。ただし、すべてのスタイルを 1 つのシートにまとめて、ページが Web サーバーから複数のファイルを要求する必要がないようにすることをお勧めします。

しかし、もっと要点を言えば、ページ上で同じ要素を異なるスタイルにするにはどうすればよいでしょうか?

いくつかの方法:

1)classまたはを使用するid。タグがあれば、別のスタイル<h2 class='regular'>に<h2 class='highlight'>できます。

.regular {
color: #000000;
}
.highlight {
color: #0000ff;
}

2) 他の要素との関連に応じてスタイルを設定することもできます。たとえば、ページ構造が次の場合:

<body>
    <div class='lvl-one'>
        <p class='lvl-two'></p>
    </div>
</body>

次のように<p class='lvl-two'>なくても、をターゲットにできます。class

div p {
    font-size:24px;
}

PS。ページに複数のタグを付けるべきではありません。これh1は SEO に悪影響を及ぼします。

于 2012-11-09T16:09:33.163 に答える