web-dev-qa-db-ja.com

外部スタイルシートを使用したDiv？

まったく変更されない可能性のある外部スタイルシート（.cssファイル）が提供されました。ただし、このスタイルシートを単一のdivに適用する必要があるため、既存のWebページのdivのコンテンツを適用します。現在、スタイルシートのコンテンツを、影響するdiv内の空白のスタイルタグ（.innerHTMLを使用）にテキストとして読み込んでいますが、これは、単一のdivではなく、Webページ全体に影響します。誰かがこれを手伝ってくれませんか？

csshtmlstylesinnerhtml
12
LethalPapercut

IFRAMEソリューションは次のように機能します。

メインのHTMLファイルには、DIVがあります。

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

必要に応じてスタイルを整えます。 divcontent.htmlファイルは、DIVタグのコンテンツを含む完全なHTMLファイルと、外部スタイルシートを使用するLINKである必要があります。

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>
11
Gareth Cornish

HTML5で作業できる場合は、 scoped styles を使用してみてください。 CSSをdiv内に含めて、親にのみ影響を与えることができます。

<div>
    <style scoped>
        // Styles here
    </style>
</div>
6
Piet van Dongen

これは非常に役立ちます：

http://css-tricks.com/saving-the-day-with-scoped-css/

特定の区切られたescopeにスタイルのみを適用します。幸運を！

IMHOはiframeソリューションよりも優れています。

関連： 外部CSSのスコープを特定の要素のみに制限しますか？

3
Javier del Saz

サーバーサイドスクリプティング（PHPなど）にアクセスできる場合は、外部スタイルシートを読み込み、すべてのエントリの前にクラス名を追加するスクリプトを作成できます。次に、このクラスをDIVタグに適用します。したがって、CSSに以下が含まれている場合：

p { font-size: 12px; }

これを次のように変更します。

.mydiv p { font-size: 12px; }

そしてDIVを次のようにフォーマットします

<div class="mydiv">...</div>

次に、スクリプトを外部のスタイルシートではなく、スタイルシートとして直接ロードします。

<link rel="stylesheet" href="path/to/internal/script.php" />
1
Gareth Cornish

外部スタイルシートをそのままにして、外部スタイルシートから単一のdivに影響を与えたいクラスの内部スタイルシートを作成し、名前を変更して、名前を変更したクラスをdivに適用することをお勧めします。名前の変更は、これらのクラスの属性が外部スタイルシートからページにすでに存在する要素に影響を与える可能性があるためです。

<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>

お役に立てれば。

1
Nitesh

scopedは良い考えですが、ブラウザ互換性の問題があります。

私はこの問題をCSSファイルのすべてのセレクタの前にプレクラスを追加することで解決します：

https://github.com/ericf/grunt-css-selectors

0
Fancyoung

外部ファイル内のスタイル仕様はクラスやIDに含まれていないと思いますが、それらは<p>などのタグに対する包括的な調整です（したがって、ページヘッダーに含めることはできません）。 divを<style scoped>タグに含め、そこに.cssファイルをインポートします。参照： http://css-tricks.com/saving-the-day-with-scoped-css/

0
NWard

CSSプレフィックスを割り当てて、スタイルを設定するドキュメントのセクションをターゲットにすることができます。

0
Morpheus