Звучит так, как будто вы говорите, что CSS страницы переопределяет стиль по умолчанию для содержимого, которое вы вводите.Вероятно, это связано с одной из двух причин: не указывать каждый атрибут стиля (и использовать относительные значения) для вашего контента или ваша специфика недостаточно высока.
Укажите каждыйАтрибут style
Допустим, ваш контент выглядит следующим образом:
<div id="#cool-bookmarklet">Here is some content</div>
А ваш CSS выглядит следующим образом:
#cool-bookmarklet {
color: #000000;
font-size: 80%;
}
Две проблемы с вышеуказанным.Объявлены только два атрибута стиля, поэтому каждый другой атрибут будет унаследован от других стилей.Что если на странице был такой CSS-код?
div {
width: 70%;
background-color: #000000;
}
У вас будут проблемы, потому что этот CSS применяется к вашему контенту (div).Ваш div 'cool-bookmarklet' будет на 70% ширины его родительского элемента и будет иметь черный цвет фона.Не хорошо.
Кроме того, размер шрифта является относительным значением, то есть он будет составлять 80% от того, что унаследовано.Таким образом, если размер шрифта, указанный на странице, равен 10px, ваш шрифт будет 8px.Здесь, вероятно, лучше всего использовать явное определение размера, чтобы избежать любых проблем с унаследованными стилями.
Вот как должен выглядеть ваш CSS, чтобы избежать унаследованных стилей:
#cool-bookmarklet {
color: #000000;
font-size: 12px;
width: 400px;
background-color: #ffffff;
margin: 0;
padding: 0;
font-weight: normal;
/* etc, etc */
}
Специфика
Есть часть CSS, которую многие люди не изучают (и мне потребовалось некоторое время, чтобы понять), и она называется спецификой.Специфичность используется браузерами для определения того, какие стили CSS следует применять к элементам в случае конфликта двух селекторов.
Из спецификации CSS:
Специфичность селектора рассчитывается следующим образом (из spec ):
- Количество 1, если объявление от - это атрибут 'style', а не правило с селектором, 0 в противном случае (= a) (В HTML значенияАтрибут «style» элемента является правилом таблицы стилей. Эти правила не имеют селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
- Подсчитать количество атрибутов ID вселектор (= b)
- Подсчет количества других атрибутов и псевдоклассов в селекторе (= c)
- Подсчет количества имен элементов и псевдоэлементов в селекторе (= d)
Конкатенация четырех чисел abcd (в системе счисления с большой базой) дает специфичность.
Таким образом, a = стили в атрибуте стиля HTML-элемента.b = селекторы идентификаторов, c = имена и атрибуты классов, d = имена тегов.Селектор с наивысшей специфичностью «выигрывает», если два селектора нацелены на один и тот же элемент.
Это немного сбивает с толку, но вы освоите его после нескольких попыток.
Допустим, у васэти два правила в вашем CSS:
#cool-bookmarklet { color: red; }
div { color: blue; }
И содержимое:
<div id="cool-bookmarklet">Here is some content</div>
Селектор '# cool-bookmarklet' будет иметь специфичность 100 (a = 0, b =1, с = 0, д = 0).Селектор div имеет специфичность 1 (a = 0, b = 0, c = 0, d = 1).'# cool-bookmarklet' победит, и у div будет красный текст.
Это важно, потому что, если ваш букмарклет внедряет таблицу стилей для оформления вашего контента, другой CSS на странице может переопределить его, если специфичность выше,Часто проще всего дать вашему контенту идентификатор (который имеет высокую специфичность 'b').Это позволяет вам ориентироваться на контент и не беспокоиться о переопределении других стилей.
Надеюсь, это поможет!