Каскадирование
Пользователь благодаря CSS получает гибкий инструмент для представления информации на экране компьютера. Важно не запутаться в том, как созданные стили будут взаимодействовать друг с другом, с атрибутами тегов (они тоже определяют стиль) и со стилями самого браузера (теми стилями, которыми браузер показывает документ по умолчанию).
Как было сказано ранее можно использовать в HTML-документе три типа стилей:
Встроенный (inline). Стиль, описанный внутри тега при помощи атрибута style. Контролирует представление отдельного тега.
Внедренный (embedded). Стиль, описанный в заголовке HTML-файла при помощи тегов <style>…</style>. Контролирует представление отдельного HTML-документа.
Связанный (linked). Стиль, описанный в отдельном CSS-файле. Контролирует представление многих HTML-документов. Для ссылки на стилевой файл в головной части HTML-документа записывают тег <link>.
В одном документе могут применяться все описанные выше три стилевых механизма. Правила, которым должен следовать обычный браузер, называются каскадными. Они означают, что для браузера самыми главными являются встроенные стили, затем, по убыванию старшинства, внедренный и связанный. Как следует из опытов предыдущих уроков, внедренный и связанные стили совершенно равнозначны для браузера. Он следует последнему по порядку указанию.
Самым младшим в стилевой иерархии оказывается стиль «по умолчанию». Его браузер использует тогда, когда нет никаких стилевых указаний. В понятие «каскадирование» входит и механизм наследования, по которому к потомку без собственных стилей применяется стиль родителя. Стили, заданные обычными атрибутами тегов, работают по общему каскадному правилу (рис. 3.9).
<FONT color=red> <P style=“color:blue”>
Это будет показано синим.
</P> </FONT>
|
|
<P style=“color:blue”> Это будет показано синим, а <FONT color=red> это будет показано красным. </FONT> </P> |
|
Рис. 3.9. Каскадирование стилей
Вопросы
Что такое «иерархия»?
Для каждой из приведенных ниже схем (рис. 3.10, 3.11) запишите HTML-коды, которые им соответствуют.
Рис.3.10. Схема 1
Опишите механизм наследования стилей.
Можно ли переопределить наследуемый стиль? Если да, то как?
Для тега <Р> задан стиль р {color:red}. Каким цветом будет выведено слово «сложный» в следующих кодах:
а)<Н1>Это сложный пример</Н1>;
б)<Н1>Это <SPAN style="Color:Blue">сложный</SPAN> пример.</Н1>;
в)<Р>Это сложный пример.</Р>;
г) <Р>Это<SPAN style="color:blue">cлoжный</SPAN> пример.</Р>;
д)<Р>Это<FONT color= blue>сложный</SPAN> пример.</Р>;
е)<Р>Это<SPAN style =”font-size:smaller”>сложный</SPAN>пример.</Р>.
6. Что такое «контекстное определение»? 7. Задан стиль Р ЕМ {color:red}. Каким цветом будет выведено слово «сложный» в следующих кодах:
а) <Н1>Это сложный пример</Н1>;
б) <Н1>Это <ЕМ>сложный</ЕМ> пример</Н1>;
в) <Р>Это сложный пример.</Р>;
г) <Р>Это <ЕМ>сложный</ЕМ> пример</Р>?
Рис. 3.11. Схема 2
Постройте иерархическое дерево для каждой приведенной ниже программы.
-
Программа 1
Программа 2
<BODY>
<DIV>
…
</DIV>
<DIV>
<DIV>
<DIV>
<DIV>
…
</DIV>
</DIV>
</DIV>
<DIV>
…
</DIV>
</DIV>
<DIV>
…
</DIV>
</BODY>
<BODY>
<DIV>
<DIV>
…
</DIV>
<DIV>
…
<DIV>
</DIV>
<DIV>
…
</DIV>
</DIV>
<DIV>
<DIV>
…
</DIV>
</DIV>
</DIV>
</BODY>
9. Задан стиль Р, ЕМ {color:red}. Каким цветом будет выведено слово «сложный» в следующих кодах:
а) <Н1>Это сложный пример</Н1>;
б) <Н1>Это <ЕМ>сложный</ЕМ> пример</Н1>;
в) <Р>Это сложный пример.</Р>;
г) <Р>Это <ЕМ>сложный</ЕМ> пример</Р>.
10. Опишите назначение тегов <div> и <span>. В чем сходство работы этих тегов, а в чем различие?
Что такое «абсолютное позиционирование», каким стилевым указанием оно задается?
Что принимается за начало координат при абсолютном позиционировании?
По какому правилу абсолютно позиционированные области накладываются друг на друга?
Какие значения может принимать стилевое свойство z-index и как оно влияет на экранный образ объекта?
Что понимается под каскадированием стилевых указаний?