Как очистить все стили css

Я создаю фрагмент HTML-кода, чтобы другие могли добавлять функциональные возможности на свои веб-сайты (это виджет для голосования). Я создал фрагмент кода HTML следующим образом:

<div>
   [implementation of my voting widget]
</div>

Я потратил много времени, чтобы получить форматирование этого виджета в самый раз. Он отлично работает на примерной веб-странице, которая не импортирует таблицу стилей.

Когда я добавляю виджет на страницу на Drupal-сайте, импортированный CSS вызывает хаос с моим тщательным форматированием. Я бы хотел, чтобы мой фрагмент HTML игнорировал все таблицы стилей CSS. Возможно ли это?

Независимо от того, возможно ли это, есть ли лучшее решение?

Ответы

Ответ 1

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

<div id="votify">
   [implementation of my voting widget]
</div>

#votify {}
#votify ul {}
#votify div span {}
/* etc */

Ответ 2

Вы можете попробовать использовать таблицу стилей reset:

http://meyerweb.com/eric/tools/css/reset/

Конечно, вы не хотите перезаписывать CSS страницы, но можете получить представление о том, как reset использовать стили, которые использует ваш виджет, и использовать ваш персональный CSS. Так что-то вроде...

#voting-widget * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Надеюсь, это поможет.

Ответ 3

Reset ваш CSS-код виджета до значений по умолчанию, а THEN добавьте ваш код форматирования. Это очистит все стили страниц, чтобы вы могли работать с чистого листа.

div#widget, div#widget * {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /* ... whatever other reset code ... */

  /* ... then add your own code ... */
  color: red;
}

Ответ 4

Без использования таблицы стилей, я думаю, вам придется явно указывать все поля, дополнения, шрифты и т.д. в атрибуте style, поэтому он имеет приоритет над любыми листами CSS, которые есть.