Суп Дня

Каскадируемые Стили | День1

Каскадирование: Конфликт Стилей

Причина конфликта: В одном HTML-документе, есть в работе три разных CSS, и все он используют тэг как селектор. Импортируемый CSS указывает браузеру: отобразить текст в пределах тэга красным. Вложенный CSS указывает браузеру - использовать синий. А встроенный CSS указывает использовать желтый. Что же в таком случае делать бедному браузеру?

Дело в том, что браузеры, поддерживающие Стили, имеют встроеный порядок каскадирования команд, которыми и руководствуются в подобных ситуациях. В конце концов, некоторые команды Стилей для нас более важны чем другие. Порядок "важности", согласно официальной спецификации каскадирования Стилей, следующий:

Встроенные Стили
Вложеные Стили
Ссылки на внешний документ Стилей
Импортированые Стили
Стили браузера по умолчанию

Так, встроенные Стили отменяют ээффекты вложенных Стилей, которые, в свою очередь, отменяют эффект Стилей, включенных в документ с помощью ссылки.

Не правда ли, очень удобно? Но не все так просто, как хотелось бы. К несчастью, в браузерах Netscape и Microsoft есть различия в выполнении этого порядка. Например, оба браузера уделяют больше внимания стилям, на которые проставлена ссылка, чем вложеным стилям. Поэтому пока что лучше применять на странице только один метод включения Стилей, особенно когда Вы знаете данные особенности основных браузеров .

Могут возникнуть и другие проблемы. Что случается, когда многочисленные правила стилей одного типа противоречат? Что случается, к примеру, если один вложенный Стиль объявляет текст в пределах тэга зеленым, а другой вложенный Стиль объявляет его красным?

Благодаря умным людям, написавшим спецификацию Стилей, порядок для решения этих конфликтов существует. Проще говоря: придерживайтесь одного из Стилей.

Пример:


BODY { color: green } P { color: red }

Текст в тэге объявлен красным, но он также наследует указания из тега <BODY>, что текст должен быть зелёным (Если Вы указываете значение Стилей в тэге <BODY>, то оно действует на всей странице.) В данном случае конкретный указатель тэга преобладает, и текст показывается красным.

Команды Стилей применяются в соответствии с порядком их нахождения в HTML-документе. Браузер "слушает" всегда последнюю команду Стилей.

Пример:


P { color: green } P { color: red}

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

Примечание: официальная спецификация каскадируемых Стилей включает в себя более подробные описание порядка каскадирования, но так как они не поддерживаются ни Netscape Communicator ни Internet Explorer, я не буду заострять на них внимание.

Последний вопрос: что случается, когда Стили вступают в противоречие с HTML-тэгами? Взгляните на этот пример:


I { font-family: impact } 
<P>I think <I><FONT FACE="Times New Roman">HTML
и CSS</FONT></I> - братья навек!</P>

Команды Стилей указывают браузеру, что нужно использовать гарнитуру Impact, но HTML-тэг требует, чтобы изображался Times New Roman. Налицо явный конфликт. Согласно официальной спецификации Стилей, Стили преобладают, и показывается тот шрифт, который указан в них. Если же вложеных CSS-команд нет, браузер будет исплользовать HTML-тэги по умолчанию.

К несчастью, основные браузеры не настроены на это. Netscape Communicator и Internet Explorer 4 обращаются к HTML-тэгам как к более важным. А жаль!

Как Вы видите, пока что веб-браузеры поддерживают каскадируемые Стили в гораздо меньшей степени, чем хотелось бы. Давайте ознакомимся с этой досадной информацией поподробнее. >>

День1. Страница 1. Стили. Что же это такое?

День1. Страница 2. Зачем они нужны?

День1. Страница 3. Ваш первый Стиль.

День1. Страница 4. Добавление Стилей в web-страницу.

День1. Страница 5. Классы и другие хитрости.

День1. Страница 6. Каскадирование: Конфликт Стилей

День1. Страница 7. Плохие Новости о браузерах...

День1. Страница 8. Что дальше?

Введение

День1 | День2 | День3 | День4 | День5