Применение таблиц стилей
Нет ничего необычного в том, чтобы использовать все три типа таблиц стилей для одной страницы Web. Внешняя таблица будет содержать стили, которые являются общими для всех страниц Web; встроенная таблица будет включать в себя стили, которые относятся к определенной странице; линейные таблицы будут применяться к отдельным тегам, которым не требуется общее оформление. Браузер использует это множество таблиц стилей следующим образом.
Первое: все внешние таблицы стилей применяются на странице для заданных селекторов тегов.
Второе: применяются все встроенные таблицы стилей. Если одинаковые селекторы тегов присутствуют во внешних и встроенных таблицах стилей, то встроенные стили переопределяют или расширяют внешние стили.
Третье: применяются все линейные таблицы стилей. Если эти настройки относятся к тем же тегам, которые присутствуют во внешних или встроенных таблицах стилей, то линейные стили переопределяют или расширяют присоединенные и встроенные стили.
Общий действующий принцип состоит в том, что любое определение стиля более нижнего уровня имеет преимущество над эквивалентным значением стиля более высокого уровня. Линейные таблицы стилей имеют преимущество над встроенными таблицами стилей, которые имеют преимущество над внешними таблицами стилей.
Предположим, например, что присоединенная таблица стилей содержит следующее объявление стиля для горизонтальных линеек.
hr {height:1px; width:50%; color:red; text-align:center}
Листинг 3.9. Внешняя таблица стилей для горизонтальных линеек (html, txt)
Все страницы, которые соединяются с этой таблицей стилей, выводят горизонтальные линейки этим стилем. Предположим теперь, что одна определенная страница должна иметь другое оформление линеек, скажем, голубым цветом, а не красным. Поэтому на этой единственной странице кодируется встроенная таблица стилей, чтобы переопределить объявление цвета во внешней таблице стилей.
<style type="text/css"> hr {color:blue} </style>
Листинг 3.10. Встроенная таблица стилей для горизонтальных линеек (html, txt)
Все горизонтальные линейки на этой странице будут синими; однако они сохраняют свойства height, width, и text-align внешней таблицы стилей. Теги на этой странице наследуют свойства внешней таблицы стилей, если не модифицируются встроенной таблицей стилей.
Предположим дальше, что одна определенная горизонтальная линейка на этой странице должна быть зеленого цвета и проходить по всей ширине страницы. Поэтому для этой конкретной линейки добавляется линейная таблица стилей.
<hr style="color:green; width:100%"/>
Листинг 3.11. Линейная таблица стилей для горизонтальной линейки (html, txt)
Зеленый цвет стиля переопределяет синий, который наследуется из встроенной таблицы стилей; ширина в 100% переопределяет ширину в 50%, унаследованную из внешней таблицы стилей. Однако, эта конкретная линейка сохраняет толщину в 1 пиксель и выравнивание по центру, унаследованные из внешней таблицы стилей.
Именно наследование стилей делает таблицы стилей "каскадными". Внешние стили наследуются, или каскадно распространяются, на все страницы Web, которые с ними соединены; встроенные стили наследуются, или каскадно распространяются, на отдельные теги, содержащие линейные таблицы стилей.
В этом учебнике свойства и значения стилей иллюстрируются в виде линейных таблиц стилей, с обсуждением того, как их можно перенести во встроенные или внешние таблицы стилей для расширения приложения. К окончанию курса читатель не будет иметь никаких проблем с использованием таблиц стилей и способами их использования при проектирования страниц Web любой степени сложности.
