Опубликован: 06.06.2006 | Доступ: свободный | Студентов: 3909 / 694 | Оценка: 4.34 / 4.02 | Длительность: 21:23:00
Лекция 6:

Установка значений свойств. Каскадирование и Наследование

< Лекция 5 || Лекция 6: 123 || Лекция 7 >

Наследование

Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство "определяет" , наследуется оно или нет.

Предположим, имеется элемент 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' для носителя имеет тот же эффект.

< Лекция 5 || Лекция 6: 123 || Лекция 7 >