Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Скачиваний:
19
Добавлен:
16.04.2013
Размер:
468.99 Кб
Скачать

1.2 Группирование

Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми списки:

H1, H2, H3 { font-family: helvetica }

Точно также можно группировать определения:

H1 {

font-weight: bold;

font-size: 12pt;

line-height: 14pt;

font-family: helvetica;

font-variant: normal;

font-style: normal;

}

В дополнение к этому некоторые свойства имеют собственный синтаксис группировки:

H1 { font: bold 12pt/14pt helvetica }

что эквивалентно предыдущему примеру.

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

В первом примере цвет элементов 'H1' был установлен в синий. Представьте, что есть элемент 'H1' с элементом <EM> внутри:

<H1>The headline <EM>is</EM> important!</H1>

Если для элемента 'EM' не было определено никакого цвета, то Emированный "is" унаследует цвет родительского элемента, т.е. он также будет отображен синим цветом. Другие свойства стиля также наследуются, например 'font-family' и 'font-size'.

Для определения свойства стиля по умолчанию для документа, можно задать это свойство у элемента, от которого наследуются все остальные видимые элементы. В HTML документах элемент 'BODY' выполняет эту функцию:

BODY {

color: black;

background: url(texture.gif) white;

}

Этот пример сработает даже если автор опустил тэг 'BODY' (что является допустимым) благодаря тому, что браузер вставит пропущенный тэг. Предыдущий пример устанавливает цвет текста в черный, а фон - содержащий картинку. Фон будет белым в том случае, если картинка будет недоступна. (См. подробности в главе 5.3)

Некоторые свойства стилей не наследуются от родительских элементов дочерними элементами. В большинстве случаев интуитивно понятно в каких случаях возникает такая ситуация. Например свойство 'background' не наследуется, но фон родительского элемента по умолчанию будет просвечивать сквозь.

Часто значение свойства указывается в процентах от другого свойства:

P { font-size: 10pt }

P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */

Для любого свойства, значения которого могут указываться в процентах, определено свойство на которое оно ссылается. Дочерние элементы 'P' унаследуют вычисленное а не процентное значение 'line-height' (12pt).

1.4 Класс в качестве селектора

Для увеличения гибкости контроля над элементами, в HTML добавлен новый атрибут [2] 'CLASS'. Все элементы внутри элемента 'BODY' могут быть классифицированы, а на класс можно сослаться через таблицу стилей:

<HTML>

<HEAD>

<TITLE>Title</TITLE>

<STYLE TYPE="text/css">

H1.pastoral { color: #00FF00 }

</STYLE>

</HEAD>

<BODY>

<H1 CLASS=pastoral>Way too green</H1>

</BODY>

</HTML>

К классифицированным элементам применяются нормальные правила наследования, они наследуют значения своих родителей в структуре документа.

Можно адресовать все элементы одного класса опустив имя тэга в селекторе:

.pastoral { color: green } /* all элементы with CLASS pastoral */

Для каждого селектора можно определить только один класс. 'P.pastoral.marine' таким образом является неправильным селектором в CSS1. (Контекстные селекторы, описанные ниже, могут определять один класс для одного простого селектора).

CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих случаях не важно у какого элемента HTML устанавливается класс - можно заставить любой элемент эмулировать любой другой элемент. Но не рекомендуется полагаться на такую возможность, т.к. это лишает документ структуры, которая имеет универсальное значение (элементы HTML). Структура основанная на классах имеет узкое применение только в тех случаях, когда значения классов оговорены с обеих сторон.

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Мы не исправляем ошибки в тексте (почему?), но будем благодарны, если вы все же напишите об ошибках.