Jak zachować style widżetu osadzonego?

Question

Sposób tworzenia zewnętrznej strony z widżetamima własny kod CSS. Połów jest - kiedy strona zewnętrzna jest zmieniona przez arkusz stylów strony include hosta include.

Dołączona strona jest w rzeczywistości widżetem komentarzy (z jego własnym plikiem .css, około 30 linii, niewiele) i elastycznością wysokości i szerokości jest MUSI MIEĆ.

PHPinclude był dotychczas najlepszym rozwiązaniem, ale ja straciłem włosy dostosowując swój plik CSS, aby pasowały/zerowy (dodawanie/wyłączeniem/style) ewentualne stronę internetową gospodarzem.

_Przykład:
jeśli strona host ma style img granic mam null je z style.css widgetu, tak samo dla H3, P, i tak dalej.

Jak byś zachować stylów widget z zachorowanie przez gospodarza stylów stronie, oprócz korzystania iframe?

Answer 1

Wiesz, że CSS to rzecz po stronie klienta; nie wie o PHP i sposobie generowania strony na serwerze.

Musisz skoncentrować się na ostatecznym wynikowym hoście i przedefiniować tagi oraz klasy i identyfikatory, aby żądane reguły stylu miały zastosowanie do właściwych elementów.

Możesz ograniczyć zakres reguł CSS, otaczając tę ​​część w div za pomocą unikalnego identyfikatora lub klasy i użyć jej w selektorach CSS, aby nie były stosowane do elementów poza tym działem.

Lub jeśli nie możesz tego zrobić, musisz użyć mocniejszych reguł, aby zastąpić dołączone do innych elementów. Który będzie trochę brudny, ale możesz zastąpić style zastosowane do elementu używając kilku technik, takich jak! Important lub mających więcej selektorów.

Na przykład, w obu poniższych próbkach, druga reguła zastąpi pierwszy:

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

lub

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

Answer 2

Spróbuj otoczyć swój kod widżetu w div z identyfikatorem. Następnie przedrostek każdego selektora CSS używanego w widgecie z tym selektorem.

np.

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

zamiast,

.nav{ 
// styles 
} 

zrobić

#widget.nav{ 
// styles 
} 

Answer 3

Możesz chcieć zastosować mini resetu CSS na swojej dołączonego kodu. Otocz kod w unikalnym identyfikatorem, tak jak poniżej:

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

Teraz stosuje reset do wszystkiego wewnątrz to, stosując podstawową resetu CSS jak Eric Meyer, dostępny tutaj: http://meyerweb.com/eric/tools/css/reset/

Teraz stosują własne CSS . Prawie wszystkie zewnętrzne CSS zostaną wymazane, a twoje zostaną zastosowane.

Answer 4

Jeśli dobrze zrozumiałem, twój zawarte strona ma kilka reguł CSS, takie jak:

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

i tak dalej.

Należy zmienić selektorów CSS z najbardziej ogólnymi (div wybiera wszystkie DIV na stronie) do najbardziej szczególnych jedynek (wykorzystują je w tej kolejności: id, class, child-selector), aby twoje zasady stosuje się tylko do Twoje zawarte elementy.

Załóżmy, że Twój zawarte strona jest zawinięty w div, kod PHP byłoby:

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

Następnie wszystkie przepisy dotyczące strony powinny odnosić się wyłącznie do dzieci elementu z identyfikatorem my_page:

Zamiast

div {/*rules*/}; 

musisz

#my_page div {/*rules*/}; 

Answer 5

CSS Style priorytety tak:

1. Domyślna przeglądarka
2. Zewnętrzny arkusz stylów
3. arkusz wewnętrzny styl (w sekcji head)
4. styl Inline (wewnątrz elementu HTML)

W zależności od tego ile CSS trzeba zastosować, można nakaz go na „głowa” tag.
Mam nadzieję, że sugestia pomaga.