從所有現有的外部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中分離出一段代碼

回答

相關問題