在导入的php页面上强制实现CSS完整性 [英] Enforcing CSS integrity over imported php pages
问题描述
我正在尝试将包含HTML脚本的单独的CSS和js文件的PHP文件导入另一个包含我的页眉和页脚的PHP文件。页眉和页脚是从一个模板，它使用一个非常凌乱和复杂的CSS，基本上具有规则，在几乎10个不同的位置/文件中的一切。当我导入我的PHP到这个主模板页面，所有导入的页面样式也继承基本模板，基本上覆盖我的东西。有没有办法强制执行每个php / html脚本来维护自己的样式，而不必在从一个文件导入到另一个文件时相互继承？
非常感谢
您需要为css和javascript命名空间，以防止它们被页眉和页脚污染。 / p>
这里有许多名称间距模式，但我可以建议几个：
css：。你可以运行这样的jQuery脚本：
.ready（function（）{
jQuery（'body'）。attr（'id'，'importedPagei'）;
}
那么当你导入css ..你应该创建一个构建脚本，附加属性 body＃importedPagei 到每个css你正在调用
，这是在运行构建脚本之前导入页面的css示例：
.style1 {
color：red
}
$ b b
和运行jQuery脚本后：
body＃importedPagei .style1 {
color：red
}
所以让我们假设你的头模板有以下类：
// header.css
h1 {
color：red;
}
，并且在导入的文件中有
// importedFile.css
h1 {
color：blue;
}
那么，旧解决方案的最终结果将是模板标题样式覆盖您的：
//旧的最终结果
h1 {
color：blue;
}
但是使用上面建议的解决方案， / p>
// importedFile.css
body＃importedPagei h1 {
color：red;
}
并且因为您已将id属性附加到importedFile.html的主体节点jQuery，html看起来像这样
< body id =importedFile>
..
< h1> hello world< / h1>
..
< / body>
所以在这种情况下..使用css级联规则..导入文件的css选择器更强因此最终样式应用 color：red
javascript ：
您还可以使用构建脚本选择性地导入特定页面的特定JavaScript文件。
另一个干净的方法是使用 js.node modules .. javascript的问题是一切都在全局命名空间。 。您可以使用一些名称间距模式，但提供了node.js一个内置的，非常干净的解决方案。所以你可以有所有的JavaScript在你的最终代码，但有node.js照顾分区它。这一切都取决于你想投资解决这个问题多少时间。
I'm trying to import a php file containing a HTML script with separate CSS and js files into another php file which contains my header and footer. The header and footer are from a template which uses a very messy and convoluted CSS which basically has rules for everything in almost 10 different locations/files. When I import my php into this main template page, all the imported page's styles also inherit from the base template which basically overrides my stuff. Is there a way to enforce each php/html script to maintain their own styles without having to inherit from one another while they're being imported from one file to another?
Many Thanks
you need to name space both your css and javascript to protect them from being polluted by your header and footer.
there are many name-spacing patterns out there.. but let me suggest a few:
css: for every page you import.. you can run a jQuery script like this:
jQuery(document).ready(function() {
jQuery('body').attr('id','importedPagei');
}
then when you import the css.. you should create a build script that appends the attribute body#importedPagei to every css you are calling
ie this is a sample of the css of the importing page before running your build script:
.style1 {
color:red
}
and after running the jQuery script:
body#importedPagei .style1 {
color:red
}
so let's say that before.. your header template had the following class:
//header.css
h1 {
color: red;
}
and in your imported file you had
//importedFile.css
h1 {
color:blue;
}
then the final outcome in your old solution will have the template header style overriding yours:
//old final outcome
h1 {
color:blue;
}
but with the proposed solution above you will have (as mentioned before):
//importedFile.css
body#importedPagei h1 {
color: red;
}
and since you attached an id attribut to the body node of importedFile.html using jQuery, the html will look like this
<body id="importedFile">
..
<h1>hello world</h1>
..
</body>
so in this case.. using css cascading rules.. the css selector of your imported file is stronger than that of the template.. and so the final style applied will be color: red
javascript: you can also use a build script to selectively import specific javascript files for specific pages..
another clean way is to use js.node modules.. the problem with javascript is that everything is in the global namespace.. there are some name spacing patterns that you can use.. but node.js provided a built in and very clean solution for it. and so you can have all the javascript in your final code but have node.js take care of compartmentalising it. it all depends on how much time you want to invest in solving this problem
这篇关于在导入的php页面上强制实现CSS完整性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
