从所有现有的外部CSS中分离出一段代码

我已经使用了一个教程来为我的网站创建一个小部件。从所有现有的外部CSS中分离出一段代码

这个小部件现在需要被放置到一个复杂的页面上，这个复杂的页面包含重要标签（如*，body，ul和li）上的现有CSS规则。

有没有办法在我的网页中放入这个小部件（目前是一个单独的页面，包含html，css和javascript），而没有在网页上应用所有自己的CSS？

2010-08-14 sscirrus

它可以用IFrame来完成，但我不会建议。 IFrames很混乱，他们通常不能按预期工作。有些浏览器会阻止它们，有些浏览器根本不支持它们，并且它们与IFrame页面中的页面交互非常困难。

最干净的方式是通过将小部件封装在一个带有像widgetwrapper这样的id的额外div中。然后用#widgetwrapper [space]前缀每个css规则。这样，来自小部件的CSS将不会影响页面的其余部分。确保你把CSS的最后部分放在CSS中。如果仍然存在与您的小部件混淆的页面规则，请将其覆盖在小部件css中。

来源

2010-08-14 09:39:50

当父页面的规则干扰窗口小部件时，这通常会导致问题。这就是为什么大多数在“野外”传播的小部件提供者都将其样式规则用作内联CSS。 – 2010-08-15 20:22:48

看最后一句话。顺便说一句，即使使用内联样式，如果不指定_every_css属性，则父级CSS仍然会混乱。 – 2010-08-15 20:57:59

有没有办法在我的网页中放入这个小部件（目前是一个带有html，css和javascript的独立页面）而没有在网页上应用所有自己的CSS？

最简单的方法是使用iframe。

如果您想要一个嵌入式小部件，最明智的做法是在小部件的标记中内联指定CSS属性。这通常是不好的做法，但这里是正确的。

退房例如什么Facebook的Profile badge（您需要一个Facebook用户看到它）是这样的：

<!-- Facebook Badge START --><a href="http://www.facebook.com/pekkagaiser" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Pekka Gaiser">Pekka Gaiser</a><br/><a href="http://www.facebook.com/pekkagaiser" target="_TOP" title="Pekka Gaiser"><img src="http://badge.facebook.com/badge/1238473725.2447.1697336437.png" width="120" height="239" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><!-- Facebook Badge END -->

他们很可能已经做了很多的这种测试，所以他们在代码中设置的CSS属性，我也会推荐在你的小部件中设置。

来源

2010-08-14 08:57:03

从所有现有的外部CSS中分离出一段代码

回答

相关问题