Переопределение CSS со второй таблицей стилей

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

мы будем применять некоторые новые стили для конкретного раздела на сайте и нам дали зеленый свет, чтобы включить вторую переопределения стилей (кроме мирового), если это необходимо.

мой вопрос таков. Есть ли какие-либо проблемы несовместимости браузера, которые нам нужны знать, если использовать этот метод? Из-за популярности этого сайта и количества просмотров, которые они получают ежедневно, мы должны быть максимально совместимы, и я просто хочу убедиться, что наши CSS переопределения для разделов, с которыми мы работаем, уходят без сучка и задоринки.

Я слышал о некоторых слухах, что IE может неправильно обрабатывать переопределения. Вот пример природы типов переопределений стиля, которые мы будем делать...

Если у меня есть тело { цвет:синий; } и body { font-weight: bold;} во втором CSS-файле мы получим синий и жирный шрифт?

7
css html stylesheet

5 ответов

то, что вы описываете с помощью CSS, является наследованием, и по существу он будет "складывать" ваши определения css, так как вы сделали пример body { color: blue } , body { font-weight: bold; } вы получите оба значения для тела через наследование (не переопределяя!)

чтобы противостоять наследованию, вам нужно будет обнулить или elminate первичное определение CSS-листов.

Итак, если у вас есть пример:

body { padding: 5px; color: red }

и вы хотели иметь 3px поле с синим цветом шрифта на вашем 2ndary листе вы сделали бы следующее, чтобы противостоять наследованию

body {padding: 0px; margin: 3px; color: blue }

таким образом, вы бы обнулили заполнение (до 0, если хотите, эффективно отменяя его). Цвет будет перезаписан, а маржа будет новой добавленной стоимостью.

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

вы также можете использовать свои собственные классы и удвоить (или больше) определение класса, например:

.red { color: red; }
.center { text-align: center; }
.w500px { width: 500px; }

<div class="red center w500px">This text is red and centered</div>

таким образом, вы просто объединяете значения в один. Это может дать вам другое представление о том, как действовать по-другому.

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

10

Если есть стили наложения, вы можете использовать 

body {
    color: #000 !important;
}

!важное переопределяет стиль. К сожалению, IE не поддерживает это.

3

Я не думаю, что есть какие-то несовместимости. Просто убедитесь, что специфичность ваших переопределений больше, чем у "оригинала", или если они имеют ту же специфику, переопределение объявляется после "оригинала".

подробнее о специфике: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

0

нет никаких проблем несовместимости браузера, о которых я знаю. Просто убедитесь, что вы тестируете во всех браузерах, которые вы заботитесь о каждом шаге, и вы должны быть в порядке.

ваш пример "жирного синего" верен. Он должен работать таким образом.

вы должны взять момент и прочитать о специфике CSS и наследовании. Эти ссылки объяснят, как значения CSS "объединяются" между несколькими правилами на одном и том же селектор.

0

если у кого-то еще есть эта проблема, вот решение, которое я нашел полезным.

скажем, у меня есть класс в моем оригинальном стиле.css файл так:

.menu-bar { width: 100%; }

Я могу переопределить следующее В моей таблице стилей IE, сославшись на тело, а затем имя класса, как так

body .menu-bar { width: 90%; }

попробуйте захватить Родительский div и ссылаться на него в таблице стилей ie. Проверьте пример ниже

<div class="parent">
 <div class="children">
  <div class="grandchildren">
  </div><!-- end grandchildren -->
 </div><!-- end children -->
</div><!-- end parent -->

вы можете ссылаться на родительский или дедушкин класс, Как так в ваш IE таблицы стилей

body .parent { css properties here }
body .parent .children { css properties here }
body .parent .children .grandchildren { css properties here }
0