如何保存方式嵌入的小部件呢？

如何使外部PHP 部件頁有自己的CSS。美中不足的是 - 當外部頁include d它已經受到主機頁面的樣式表。如何保存方式嵌入的小部件呢？

所包含的頁面實際上是一個評論「小部件」（用他自己的.css文件，約30行，不是很多），高度和寬度的靈活性是必須具備的。

的PHPinclude是迄今爲止最好的解決辦法，但我失去了我的頭髮，調整其CSS文件，以適應/ 空（添加/不含/樣式）任何可能的主機網頁。

_例子：
如果主機頁有img邊框我不得不從窗口小部件的style.css的空他們，同爲H3，P等風格。

你會如何保持從受着主機頁面樣式的小部件的樣式表，使用IFRAME旁邊？

來源

2011-02-02 Roko C. Buljan

現在可以用暗影DOM：http://stackoverflow.com/a/38919623/4600982 – Supersharp 2016-08-12 14:47:13

@Supersharp疑難雜症THX – 2016-08-13 00:51:58

你知道CSS是客戶端的東西，它不知道PHP以及頁面在服務器上的生成方式。

您必須關注最終生成的HTML並重新定義標籤，類和ID，以便將所需樣式規則應用於正確的元素。

您可以通過在div中使用唯一ID或類來包圍該部分，並在CSS選擇器中使用它，以便它們不適用於該div之外的元素，從而限制CSS規則的範圍。

或者，如果你不能這樣做，你必須使用更強大的規則來覆蓋你的其他元素包含的規則。這將會有點麻煩，但是您可以使用多種技術來重寫應用於元素的樣式，如！important或更多選擇器部分。

例如，在兩個以下的樣品，第二個規則將覆蓋第一個：

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

或

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

來源

2011-02-02 18:07:27

這可能是所有的最佳答案（我回答了，太），因爲它是如何你的CSS應該設計。帶上包含小部件的頁面。根據需要爲整個頁面編寫CSS代碼，包括小部件。如果您希望小部件圖像邊框爲紅色而不是網站的藍色，請以這種方式對其進行編碼。對於並不總是存在的小部件而言，包含額外的CSS是一個很小的懲罰，而不是敲除現有規則幷包含另一個CSS文件。設置您的網站的風格，如小部件總是在那裏，你被覆蓋。您正在使用網站的主樣式表，對嗎？ :) – 2011-02-02 19:00:07

嘗試圍繞你的控件的代碼與一個ID的DIV。然後將該小部件中使用的每個CSS選擇器與該選擇器相加。

ex。

<div id="widget"><p class="nav">hello</p></div>

代替，

.nav{ 
// styles 
}

做

#widget.nav{ 
// styles 
}

來源

2011-02-02 17:55:01 sissonb

你可能想在你的代碼包含的應用迷你CSS復位。環繞你的代碼在一個唯一的ID，像這樣：

<div id="widget"> 
    <!--your code here--> 
</div>

現在應用復位到這裏面的一切，用一個基本的CSS重置像Eric Meyer的，可在這裏：http://meyerweb.com/eric/tools/css/reset/

現在，將自己的CSS 。幾乎所有外部的CSS都將被清除，並且您的將被應用。

來源

2011-02-02 17:59:39

-1

如果我理解正確的，你的網頁包含有一些CSS規則，如：

div {/*rules*/}; 
p {/*rules*/};

等。

你應該從最一般的人改變你的CSS選擇器（DIV選擇頁面中所有的div）到最特殊的人（在這個順序使用它們：id, class, child-selector），以便爲您的規則只適用於您包含的元素。

例如，假設你包含的頁面被包裹在一個div，PHP代碼將是：

<div id="my_page"> 
    <?php include "myPage.php"; ?> 
</div>

然後，該頁面只應該指的是元素的子元素id爲您的所有規則my_page：

而不是

div {/*rules*/};

你必須

#my_page div {/*rules*/};

來源

2011-02-02 18:02:33

CSS樣式優先這樣的：

瀏覽器默認
外部樣式表
內部樣式表（head部分）
內嵌樣式（在HTML元素內部）

取決於你需要多少CSS應用，你可以寫它的「頭」標籤。
希望這個建議有幫助。

來源

2011-02-02 18:26:37

如何保存方式嵌入的小部件呢？

回答

相關問題