Как сохранить стили встроенного виджета?

Question

Как сделать так, чтобы внешний виджет PHP имел собственный CSS. Подвох в том, что когда внешняя страница имеет значение include d, на нее влияет таблица стилей host page.

Включенная страница на самом деле является виджетом комментариев (со своим собственным файлом .css, около 30 строк, не так много), а гибкость по высоте и ширине ДОЛЖНА ИМЕТЬ.

PHP include до сих пор было лучшим решением, но я потерял голову, настроив его CSS-файл так, чтобы он соответствовал / null (добавление / исключение / стили) любому возможному хосту веб-страница.

_{Пример:}
если на странице хоста есть стили для img границ, я должен обнулить их из style.css виджета, то же самое для H3, P и т. д.

Как бы вы защитили таблицу стилей виджета от воздействия host стилей страницы, кроме использования iframe ?

Answer 1

Вы знаете, что CSS - это вещь на стороне клиента;он не знает о PHP и о том, как страница была сгенерирована на сервере.

Вы должны сосредоточиться на конечном итоговом HTML-коде и переопределить теги, классы и идентификаторы, чтобы нужные правила стиля применялись к нужным элементам.

Вы можете ограничить область действия правил CSS, окружив эту часть в div уникальным идентификатором или классом и использовать его в своих селекторах CSS, чтобы они не применялись к элементам вне этого div.

Или, если вы не можете этого сделать, вы должны использовать более строгие правила, чтобы переопределить включенные правила для других ваших элементов.Это будет немного грязно, но вы можете переопределить стили, примененные к элементу, используя несколько методов, таких как! Важное или имеющих больше частей селектора.

Например, в обоих приведенных ниже примерах второе правило перезапишетпервый:

#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; }

Answer 2

CSS-стили расставляют приоритеты следующим образом:

1. Браузер по умолчанию
2. Внешняя таблица стилей
3. Внутренняя таблица стилей (в разделе head)
4. Встроенный стиль (внутри элемента HTML)

В зависимости от того, сколько CSS вам нужно применить, вы можете записать его в тег «head».
Надеюсь, что предложение поможет.

Answer 3

Возможно, вы захотите применить мини-сброс CSS для вашего включенного кода. Окружите свой код уникальным идентификатором, например:

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

Теперь примените сброс ко всему внутри этого, используя базовый сброс CSS, как Эрик Мейер, доступный здесь: http://meyerweb.com/eric/tools/css/reset/

Теперь примените свой собственный CSS. Почти весь внешний CSS будет удален, а ваш будет применен.

Answer 4

Если я правильно понял, на вашей странице есть некоторые правила CSS, такие как:

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

и т. Д.

Вы должны изменить ваши CSS-селекторы с самых общих (div выбирает все div на странице) на самые конкретные (используйте их в следующем порядке: id, class, child -selector ), чтобы ваши правила применялись только к включенным элементам.

Например, скажем, ваша включенная страница обернута в div, код PHP будет выглядеть так:

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

Тогда все ваши правила для страницы должны относиться только к дочерним элементам с идентификатором my_page:

Вместо

div {/*rules*/};

у вас будет

#my_page div {/*rules*/};

Answer 5

Попробуйте окружить ваш код виджета в div с id.Затем префикс каждого селектора CSS, используемого в виджете, с этим селектором.

ex.

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

вместо

.nav{
// styles
}

do

#widget.nav{
// styles
}