Переопределение CSS со второй таблицей стилей
Я работаю над довольно большим веб-сайтом, на котором уже есть большая таблица стилей. Мы работаем с этой крупной корпорацией с ограниченной способностью вносить изменения (без полного доступа).
мы будем применять некоторые новые стили для конкретного раздела на сайте и нам дали зеленый свет, чтобы включить вторую переопределения стилей (кроме мирового), если это необходимо.
мой вопрос таков. Есть ли какие-либо проблемы несовместимости браузера, которые нам нужны знать, если использовать этот метод? Из-за популярности этого сайта и количества просмотров, которые они получают ежедневно, мы должны быть максимально совместимы, и я просто хочу убедиться, что наши CSS переопределения для разделов, с которыми мы работаем, уходят без сучка и задоринки.
Я слышал о некоторых слухах, что IE может неправильно обрабатывать переопределения. Вот пример природы типов переопределений стиля, которые мы будем делать...
Если у меня есть тело { цвет:синий; } и body { font-weight: bold;} во втором CSS-файле мы получим синий и жирный шрифт?
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>
таким образом, вы просто объединяете значения в один. Это может дать вам другое представление о том, как действовать по-другому.
надеюсь, что это поможет.
Если есть стили наложения, вы можете использовать
body {
color: #000 !important;
}
!важное переопределяет стиль. К сожалению, IE не поддерживает это.
Я не думаю, что есть какие-то несовместимости. Просто убедитесь, что специфичность ваших переопределений больше, чем у "оригинала", или если они имеют ту же специфику, переопределение объявляется после "оригинала".
подробнее о специфике: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
нет никаких проблем несовместимости браузера, о которых я знаю. Просто убедитесь, что вы тестируете во всех браузерах, которые вы заботитесь о каждом шаге, и вы должны быть в порядке.
ваш пример "жирного синего" верен. Он должен работать таким образом.
вы должны взять момент и прочитать о специфике CSS и наследовании. Эти ссылки объяснят, как значения CSS "объединяются" между несколькими правилами на одном и том же селектор.
если у кого-то еще есть эта проблема, вот решение, которое я нашел полезным.
скажем, у меня есть класс в моем оригинальном стиле.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 }