0

別の CSS ファイルと js ファイルを含む HTML スクリプトを含む php ファイルを、ヘッダーとフッターを含む別の php ファイルにインポートしようとしています。ヘッダーとフッターは、基本的にほぼ 10 の異なる場所/ファイルにすべてのルールがある非常に乱雑で複雑な CSS を使用するテンプレートからのものです。このメイン テンプレート ページに php をインポートすると、インポートされたページのすべてのスタイルも、基本的に自分のものをオーバーライドするベース テンプレートから継承されます。あるファイルから別のファイルにインポートされている間、相互に継承する必要なく、各 php/html スクリプトが独自のスタイルを維持するように強制する方法はありますか?

どうもありがとう

4

2 に答える 2

2

どのようにファイルをインポートしていますか?

あなたの答えは使用していますか、include()それともrequire()答えはノーです! HTMLコードが生成されると、これはすべて同じページに表示されます。これは、すべてのcssおよびjsファイルがHTMLに適用されるものです。

できることは、css ファイルと js ファイルをファイル (例: assets.php) に追加し、順序を確立してからインポートしmain.php、html のクラスと ID に関するすべての問題を解決して、オーバーライドを回避することです。

EDIT： CSSロードオーダーについて

CSS ファイルをロードする順序は、スタイルの適用方法にほとんど影響しません。特定の要素に適用されるスタイルは、CSS ルールで使用されるセレクターの特異性によって決まります。より低い特異性を持つスタイルが後で宣言されたとしても、より高い特異性はより低い特異性を無効にします。

于 2013-02-14T05:52:29.147 に答える
2

ヘッダーとフッターによって汚染されないように、CSS と JavaScript の両方に名前を付ける必要があります。

そこには多くの名前空間パターンがあります..しかし、私はいくつかを提案させてください:

css:インポートするすべてのページに対して..次のような jQuery スクリプトを実行できます。

jQuery(document).ready(function() {
    jQuery('body').attr('id','importedPagei');
}

次に、css をインポートするときに、body#importedPagei呼び出しているすべての css に属性を追加するビルド スクリプトを作成する必要があります。

つまり、これはビルド スクリプトを実行する前のインポート ページの css のサンプルです。

.style1 {
color:red
}

jQueryスクリプトを実行した後：

body#importedPagei .style1 {
color:red
}

つまり、前に..ヘッダーテンプレートに次のクラスがあったとしましょう:

//header.css 
h1 {
color: red;
}

インポートしたファイルには

//importedFile.css
h1 {
color:blue;
}

古いソリューションの最終的な結果は、テンプレート ヘッダー スタイルをオーバーライドします。

//old final outcome
h1 {
color:blue;
}

ただし、上記の提案されたソリューションを使用すると、（前述のように）次のようになります。

//importedFile.css
body#importedPagei h1 {
color: red;
}

そして、jQuery を使用して、importedFile.html の body ノードに id 属性を付けたので、html は次のようになります。

<body id="importedFile">
  ..
  <h1>hello world</h1>
  ..
</body>

したがって、この場合.. css カスケード ルールを使用します.. インポートしたファイルの css セレクターは、テンプレートのものよりも強力です.. したがって、適用される最終的なスタイルは次のようになります。color: red

javascript: ビルド スクリプトを使用して、特定のページの特定の javascript ファイルを選択的にインポートすることもできます。

別のクリーンな方法は、js.node モジュールを使用することです..javascript の問題は、すべてがグローバル名前空間にあることです.使用できる名前間隔パターンがいくつかあります..しかし、node.js は組み込みの非常にクリーンなソリューションを提供しましたそれのための。そのため、最終的なコードにすべての JavaScript を含めることができますが、node.js がそれを区分化します。それはすべて、この問題を解決するためにどれだけの時間を投資したいかによって異なります

于 2013-02-14T06:21:26.210 に答える