| Россия |
Инспектор
Вы можете этот курс.
Опубликован: 06.06.2006 | Уровень: для всех | Доступ: платный
Лекция 6:
Установка значений свойств. Каскадирование и Наследование
Наследование
Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство "определяет" , наследуется оно или нет.
Предположим, имеется элемент H1 с выделенным элементом (EM) внутри:
<H1>The headline <EM>is</EM> important! </H1>
Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.
Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.
Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black':
BODY { color: black; }Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.
В данной таблице:
BODY { font-size: 10pt }
H1 { font-size: 120% }и в этом фрагменте документа:
<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>
свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size' и для H1, и для EM может быть, например, '11pt'.
Значение 'inherit'
Каждое свойство может иметь специфицированное значение 'inherit', которое означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка. Наследуемое значение, которое как правило используется только как возвращаемое значение, может быть усилено путём явной установки 'inherit'.
В следующем примере свойства 'color' и 'background' установлены в элементе BODY. Во всех других элементах значение 'color' будет наследоваться, а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, чёрный текст на белом фоне будет форсирован по всему документу.
BODY {
color: black !important;
background: white !important;
}
* {
color: inherit !important;
background: transparent;
}Правило @import
Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).
Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):
@import "mystyle.css";
@import url("mystyle.css");Поскольку ПА могут исключать запрос ресурсов неподдерживаемых "типов носителя" , авторы могут специфицировать медиа-зависимые правила @import. Эти условные @import специфицируют список разделённых запятыми типов носителя после URI.
Следующие правила имеют такой же эффект, как если бы импортированная таблица стилей была перенесена в правило @media для того же типа, но данные правила позволят исключить бесполезную нагрузку на ПА.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;При отсутствии любых типов носителя, импорт является безусловным. Спецификация 'all' для носителя имеет тот же эффект.
