Перейти к предыдущему разделу:
Как работает CSS Это четвертый раздел руководства CSS для начинающих. Он описывает, как таблицы стилей взаимодействуют в каскаде, и как дочерние элементы наследуют стиль от родительских. Используя наследование, в приведённой ниже задаче вы измените стиль некоторых элементов за один шаг.
Информация: Каскадность и наследование
Окончательный стиль элемента можно указать во многих местах, которые комплексно взаимодействуют между собой. Эти комплексные взаимодействия делают CSS мощным, но в то же время, иногда сбивают с толку и порождают сложности при отладке.
Три основных источника информации о стилях образовывают каскад. К ним относятся следующие:
- Стили разметки браузера по умолчанию.
- Стили, указанные пользователем при чтении документа.
- Стили, связанные с документом их автором. Их можно указывать в трех местах:
- Во внешнем файле: в этом учебном руководстве обсуждается преимущественно этот метод указания стилей.
- В начале документа (раздел заголовок документа): используйте этот метод только для стилей в пределах этой страницы.
- Для конкретного элемента в теле документа: это наименее поддерживаемый метод, но может быть использован для тестирования.
Стиль пользователя модифицирует стиль браузера по умолчанию. Стиль документа, указанный его автором, изменяет стиль ещё в некоторой мере. В этом обучающем руководстве, вы являетесь автором шаблонного документа, и только вы работаете с авторскими таблицами стилей.
Когда вы читаете этот документ в браузере, часть стилей происходит от стилей для HTML по умолчанию вашего браузера.
Часть стиля может происходить от измененных настроек браузера или измененного файла определения стиля. В Firefox настройки можно изменить в диалоге Предпочтения или же указать стили в файле userContent.css в профиле браузера.
Часть стиля приходит из таблиц стилей, связываемых с документом вики-сервером.
Когда вы открываете шаблон документа в браузере, элементы <strong> имеют более жирный шрифт по сравнению с остальным текстом. Это следует из настроек HTML стилей браузера по умолчанию.
Элемент <strong> красного цвета. Это следует из настроек вашего шаблона таблиц стилей.
Элементы <strong> также наследуют большую часть стилей элемента <p> поскольку они являются дочерними. Таким же образом элемент <p> наследует большую часть стиля элемента <body>.
Для стилей в каскаде, авторские таблицы стилей имеют приоритет перед стилями для режимов чтения браузера. Последние, в свою очередь, имеют приоритет перед настройками браузера по умолчанию.
Для наследуемых стилей, собственный стиль дочернего узла имеет приоритет над стилем, унаследованным от родительского узла.
These are not the only priorities that apply. A later page in this tutorial will explain more.
CSS также предоставляет способ переопределения стиля в авторском документе для читателя с помощью ключевого слова !important.
Это означает, что как автор документа, вы не всегда можете точно предсказать, что ваши читатели будут видеть в своём браузере.
Если вы хотите знать все детали каскадирования и наследования, ознакомьтесь с документом Assigning property values, Cascading, and Inheritance в спецификации CSS.
К действию: Использование наследования
- Откройте CSS-файл примера.
- Добавьте в файл строку кода, представленную ниже. Не имеет особого значения, в какой части CSS-документа вы расположите эту строку. Тем не менее, добавить его в самом верху будет логично, поскольку в документе элемент
<p>является родительским по отношению к элементу<strong>:p {color: blue; text-decoration: underline;} - Теперь сохраните документ и обновите страницу в браузере, чтобы увидеть изменения. Весь текст в абзаце будет подчеркнут, в том числе и начальные букы. Элемент
<strong>унаследовал подчеркнутый стиль от родительского элемента<p>.
Обратите внимание, что элементы
<strong>всё ещё красные. Красный цвет является их собственным стилем, поэтому имеет приоритет перед синим цветом, заданным для родительского элемента<p>.
До
HTML
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS
strong {color:red}
После
HTML
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
CSS
p {color:blue; text-decoration:underline}
strong {color:red}
| Cascading Style Sheets |
Переместите объявление подчеркивания из правила для <p> в правило для <strong>. В результате файл будет выглядеть следующим образом:
p {color: blue; }
strong {color: red; text-decoration: underline;}
Hide solution
Что дальше?
Перейти к следующему разделу:
СелекторыВаш пример таблицы стилей определяет стили для тегов <p> и <STRONG>, изменяя стиль соответствующих элементов по всему документу. В следующем разделе описывается, как задать стиль более избирательными методами.