JavaScript. Подробное руководство, 6-е издание, стр. 231

<b>  background-color: yellow; /* будет иметь желтый фон */</b>

<b>  border: solid black 5рх; /* и толстую черную рамку */</b>

<b>}</b>

Таблицу стилей CSS можно добавить в HTML-документ, заключив ее в теги

<b>&lt;stylе&gt;</b>
и
<b>&lt;/style&gt;</b>
внутри тега
<b>&lt;head&gt;.</b>
Подобно элементам
<b>&lt;script&gt;</b>
, синтаксический анализ содержимого элементов
<b>&lt;style&gt;</b>
выполняется отдельно и не интерпретируется как разметка HTML:

<b>&lt;html&gt;</b>

<b>&lt;head&gt;</b>

<b>  &lt;title&gt;Тестовый документ&lt;/title&gt;</b>

<b>  &lt;style&gt;</b>

<b>    body { margin-left: 30px; margin-right: 15px;</b>

<b>      background-color: flffffff }</b>

<b>    p { font-size: 24px; }</b>

<b>  &lt;/style&gt;</b>

<b>&lt;/head&gt;</b>

<b>&lt;body&gt;&lt;p&gt;npoBepKa, проверка&lt;/р&gt;</b>

<b>&lt;/html&gt;</b>

Если таблица стилей используется более чем в одной странице веб-сайта, ее обычно лучше сохранить в отдельном файле, без использования объемлющих HTML-тегов. Затем этот файл CSS можно будет подключить к HTML-странице. В отличие от элемента

<b>&lt;script&gt;</b>
, элемент
<b>&lt;style&gt;</b>
не имеет атрибута
<b>src</b>
. Чтобы подключить таблицу стилей к HTML-странице, следует использовать элемент
<b>&lt;link&gt;</b>
в теге
<b>&lt;head&gt;</b>
документа:

<b>&lt;head&gt;</b>

<b>  &lt;title&gt;Тестовый документ&lt;/title&gt;</b>

<b>  &lt;link rel=&quot;stylesheet&quot; href=&quot;mystyles.css&quot; type=”text/css&quot;&gt;</b>

<b>&lt;/head&gt;</b>

Мы вкратце рассмотрели, как работают каскадные таблицы стилей. При этом с таблицами CSS связано несколько важных моментов, которые нужно знать и которые описываются в следующих подразделах.

16.1.1. Каскад правил

Напомню, что буква «С» в аббревиатуре CSS обозначает «cascade» (каскадная). Этот термин указывает, что правила стилей, применяемые к конкретному элементу документа, могут быть получены из «каскада» различных источников:

• Таблицы стилей по умолчанию веб-броузера

• Таблицы стилей документа

• Атрибуты

<b>style</b>
отдельных HTML-элементов

Стили, определяемые в атрибуте

<b>style</b>
, переопределяют стили из таблицы стилей, а стили из таблицы стилей переопределяют таблицу стилей броузера, применяемую по умолчанию. Визуальное представление любого элемента может определяться комбинацией свойств стилей из всех трех источников. Более того, элемент может соответствовать сразу нескольким селекторам в таблице стилей. В этом случае к элементу применяются все правила стилей, ассоциированные с такими селекторами. (Если различные селекторы определяют различные значения для одних и тех же свойств стилей, значение, ассоциированное с более конкретным селектором, переопределяет значение, ассоциированное с менее конкретным селектором, однако более подробное обсуждение выходит за рамки этой книги.)

Для отображения любого элемента документа веб-броузер должен объединить атрибут

<b>style</b>
элемента со стилями из всех совпавших селекторов таблицах стилей документа. Результатом этого объединения является фактический набор свойств стилей и значений, которые используются для отображения элемента. Этот набор значений называется вычисленным стилем элемента.

16.1.2. История развития CSS

CSS - это довольно старый стандарт. В декабре 1996 года был принят стандарт CSS1 и определены атрибуты для задания цвета, шрифта, полей, рамок и других базовых стилей. Такие старые броузеры, как Netscape 4 и Internet Explorer 4, в значительной степени поддерживают CSS1. Вторая редакция стандарта, CSS2, была принята в мае 1998 года; она определяет более развитые возможности, наиболее важной из которых является возможность абсолютного позиционирования элементов. Версия CSS2.1 дополняет и уточняет положения стандарта CSS2. Из нее были исключены возможности, которые не были реализованы в броузерах. Текущие броузеры практически полностью реализуют поддержку стандарта CSS2.1, хотя в версиях IE, предшествовавших IE8, имеются существенные пробелы.

Работа над CSS продолжается и в настоящее время. Третья версия CSS разделена на специализированные модули, работа по стандартизации которых ведется по отдельности. Спецификации и рабочие проекты CSS можно найти по адресу http://www.w3.org/Style/CSS/current-work.

16.1.3. Сокращенная форма определения свойств

Свойства стиля, которые часто используются совместно, допускается объединять вместе, используя сокращенную форму записи. Например, свойства

<b>font-family, font-size, font-style</b>
и
<b>font-weight</b>
можно определить в виде единственного свойства font с составным значением:

<b>font: bold italic 24pt helvetica:</b>

Аналогично свойства

<b>border, margin</b>
и
<b>padding</b>
являются сокращенными именами для свойств, определяющих параметры рамок, полей и отступов (пространство между рамкой и содержимым элемента) для каждой из сторон элемента. Например, чтобы определить параметры рамки для каждой из сторон в отдельности, вместо свойства
<b>border</b>
можно использовать свойства
<b>border-left, border-right, border-top</b>
и
<b>border-bottom</b>
. Каждое из этих свойств также является сокращенной формой записи. Вместо свойства
<b>border-top</b>
можно определить свойства
<b>border-top-color, border-top-style</b>
и
<b>border-top-width</b>
.