, то есть за главным заголовком на странице. Ко второму и последующим абза- цам он применяться не будет. Селектор предоставляет легкий способ создать уникальный внешний вид для вступительного абзаца, его визуального выде- ления и обозначения начала статьи. 3. Нажмите Enter и добавьте следующие свойства к стилю: color: #FF6600; font-size: 1.2em; line-height: 140%; margin-top: 20px; Здесь вы изменяете цвет и размер шрифта, а также добавляете немного свобод- ного пространства над абзацем. Свойство line-height (подробно о нем вы узна- ете далее) управляет промежутком между строками в абзаце (также известно как leading ). 4. Наконец завершите стиль, нажав Enter и поставив закрывающую скобку. Стиль должен выглядеть так: h1+p { color: #FF6600;
Глава 3. Селекторы: определение элементов стилизации 105 font-size: 1.2em; line-height: 140%; margin-top: 20px; } Если вы просмотрите страницу в браузере сейчас, то увидите, что верхний абзац стал оранжевым, текст выглядит более крупным, а между строками расстояние больше (рис. 3.13). Если вы удаляли этот абзац в HTML, то заметите, что оста- вшийся абзац стал оранжевым и имеет более крупный текст, поскольку он те- перь новый смежный сестринский тег для
Рис. 3.13. Теперь веб-страница имеет законченный вид ПРИМЕЧАНИЕ Internet Explorer 6 не поддерживает смежные сестринские селекторы, поэтому в этом браузере пер- вый абзац будет выглядеть аналогично всем остальным. ПРИМЕЧАНИЕ Окончательную версию созданной в этой главе экспериментальной веб-страницы вы можете найти в папке 03_finished архива с учебным материалом. Итак, мы ознакомились с различными типами селекторов. Более подробно вы изучите их (и не только их) в обучающих примерах в следующих главах.
4 Механизм наследования стилей Дети наследуют некоторые черты своих родителей: цвет глаз, рост. Как вы убеди- лись в предыдущей главе, модель семейных отношений применима и к структуре языка HTML. И точно так же, как люди, теги могут унаследовать CSS-свойства от своих предков. Что такое наследование? Наследование — это прием, с помощью которого CSS-свойства, относящиеся к од- ному тегу веб-страницы, распространяются и на вложенные теги. Например, всегда находится внутри
. Так, атрибуты, применяемые к
, наследуют- ся . Допустим, вы создали CSS-стиль (см. гл. 3) для
, который устанавли- вает атрибут color (например, темно-красный цвет). Производные теги, являющие- ся потомками
, то есть теги, расположенные внутри него, наследуют атрибут. Это означает, что любой текст, заключенный в
,
, , будет отображен тем же самым темно-красным цветом. Механизм наследования — многоуровневый, то есть его эффект не только рас- пространяется на прямых потомков (дочерние элементы), но и переносится на все вложенные элементы. Если, например, и расположены внутри , то также унаследуют атрибуты любого стиля, применяемого к
Глава 4. Механизм наследования стилей 107 Рис 4.1. Наследование позволяет вложенным тегам копировать атрибуты окружающих их родительских тегов Если бы наследования не существовало, то веб-страница выглядела бы так, как показано на рис. 4.1, внизу. Обратите внимание, что , и все вложенные теги сохранили обычное начертание, размер и цвет шрифта, определенные браузе- ром стандартно. Чтобы отформатировать их подобно остальной части абзаца, вам пришлось бы создавать дополнительные стили.
108 Часть 1. Основы CSS Наследование работает не только со стилями тегов, но и с любыми другими типами. Когда вы применяете стилевой класс (см. раздел «Селекторы типов: ди- зайн страницы» гл. 3) к какому-нибудь тегу, то вложенные в него теги наследуют стилевые атрибуты. То же самое справедливо и для всех типов селекторов, рассмот- ренных в гл. 3. Упрощение таблиц стилей через наследование Вы можете использовать преимущества механизма наследования в своих инте- ресах для того, чтобы упростить и ускорить написание таблиц стилей. Предпо- ложим, вы хотите отобразить весь текст веб-страницы одинаковым шрифтом. Вместо того чтобы создавать стили для каждого тега, просто создайте один для
(или создайте класс и примените его). Определите нужный шрифт, и все теги веб-страницы унаследуют его: body { font-family: Arial, Helvetica, sans-serif; } Вы также можете использовать наследование для применения стилевых атри- бутов к целому разделу веб-страницы. Например, вы можете применять, как и боль- шинство дизайнеров, тег
(см. раздел «Селекторы классов: точное управление» гл. 3) для определения таких фрагментов, как шапка, навигационное меню, нижняя часть страницы, или, если вы используете элементы HTML5, можно задействовать один из новых элементов деления на разделы, например ,
Скачать 20.28 Mb.