如何保留嵌入式小部件的样式？ [英] How to preserve styles of embedded widget?

问题描述

如何使外部PHP 小部件页面具有自己的CSS。
当外部页面 include d时，它受到主机页面的样式表的影响。

包含的页面实际上是一个注释的小部件（与他自己的.css文件，大约30行，没有太多），高度和宽度的灵活性是必须的。 >

PHP 包含是迄今为止最好的解决方案，但我失去了我的头发调整其CSS （添加/排除/样式）任何可能的主机网页。

_{br>
如果主机页面具有 img 边框的样式我必须从小部件的style.css中取消它们， H3 ， P 等。}

如何保留小部件样式表除了使用 iframe 之外，还会受到主机页面样式的影响吗？

解决方案

你知道CSS是一个客户端的东西;它不知道PHP以及页面如何在服务器上生成。

您必须专注于最终生成的HTML，并重新定义标签和类和ID

您可以通过在具有唯一ID或类的div中包围该部分来限制CSS规则的范围，并将其用于你的CSS选择器，所以它们不会应用于div以外的元素。

或者如果你不能这样做，你必须使用更强的规则来覆盖你的其他元素。这将是一个有点凌乱，但你可以重写样式应用于一个元素使用几种技术，如！重要或有更多的选择器部分。

例如，在两个以下示例，第二个规则将覆盖第一个规则：

  #comments .link {color：red; } / *包含的页面规则* / 
 #header .link {color：blue！important; } 
   

或

  #comments .link {color：red; } / *包含的页面规则* / 
 #header div a.link {color：blue; } 
  

How to make an external PHP widget page have its own CSS. The catch is - when the external page is included it's been affected by the stylesheet of the host page.

The included page is actually a comments 'widget' (with his own .css file, about 30 lines, not much) and the height and width flexibility are a MUST HAVE.

The PHP include was so far the best solution, but I lost my hair adjusting its CSS file to fit / null (adding/excluding/ styles) any possible host web page.

_Example:
if the host page has styles for img borders I have to null them from the widget's style.css, same for H3, P, and so on.

How would you preserve a widget stylesheet from being affected by the host page styles, beside using iframe?

解决方案

You know CSS is a client-side thing; it doesn't know about PHP and how the page has generated on the server.

You have got to focus on the final resulting HTML and redefine tags and classes and IDs so that your desired style rules apply to right elements.

You can limit the scope of CSS rules by surrounding that part in a div with a unique ID or class and use it in your CSS selectors so they wouldn't apply to elements outside of that div.

Or if you can't do that you have to use stronger rules to override included ones for your other elements. Which will be a little messy, but you can override styles applied to an element using several techniques like !important or having more selector parts.

For example, in both of the below samples, the second rule will overwrite the first one:

#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }

or

#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }

这篇关于如何保留嵌入式小部件的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！