Отличный сайт знакомств! РЕГИСТРАЦИЯ >>>



Учебник CSS : Встраивание таблиц стилей в документ

Чтобы таблица стилей могла воздействовать на внешнее представление документа, браузер должен знать о её существовании. Для этого её необходимо связать с HTML-документом.

Существует четыре способа связывания документа и таблицы стилей:

  1. Внедрение - позволяет задавать все правила таблицы стилей непосредственно в самом документе.

  2. Связывание - позволяет использовать одну таблицу стилей для форматирования многи страниц HTML.

  3. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

  4. Встраивание в тэги документа - позволяет изменять форматирование конкретных элементов страницы.

Теперь про каждый способ отдельно и подробно.

При внедрении таблицы стилей в документ, правила задаются в стилевом блоке, ограниченном тэгами <STYLE type="text/css"> и </style>, который должен размещаться в разделе <HEAD> документа.

<HEAD>
<STYLE type="text/css"> 
<!--
    B { text-transform: uppercase; }
    P { background-color: lightgrey;
          text-align: center; }
-->
</style>
</head>

Обычно браузеры, не поддерживающие какие-либо тэги, игнорируют их, интерпритируя однако их содержимое в том виде, в каком оно задано, что может приводить к ошибкам. Поэтому таблицу стилей следует заключить в тэг комментария <!--....-->. Как видите, всё очень просто.

В приведённом выше примере встроенная таблица стилей определяет отображение всех абзацев в документе (элемент <P>) на сером фоне с центрированными строками. Полужирный текст (тэг <B>) документа, будет отображаться прописными буквами, даже если в документе он задан строчными.

Способ связывание заключается в следующем: таблица стилей храниться в отдельном файле и присоединяется к документу с помощью тэга <LINK>, задаваемого в разделе <HEAD>:

<LINK rel="stylesheet" type="text/css" href="mystyles.css">

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

P { margin-left: 20pt;  }
P { margin-right: 20pt; }

TABLE { font-family: Arial; }
TABLE { font-size: 10pt; }

A:link    { color: #000080; text-decoration: none; }
A:visited { color: #000080; text-decoration: none; }
A:hover   { color: #000080; text-decoration: underline; }

Связываемый файл представляет собой обычный текстовый файл с кодом обычной таблицы стилей. Он должен иметь расширение .css.

Заметим, что этот метод дает вам возможность ссылаться на таблицы стилей, которые располагаются не на том же сервере, что и сама страница.

Следующий способ встроить таблицу стилей в документ - импортирование. При импортировании, также как и при связывании встраивается внешняя таблица стилей, но с помощью свойства @import таблицы стилей:

@import: url (mystyles.css)

Его следует задавать в начале стилевого блока <STYLE> или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL-адрес файла таблицы стилей.

Последний способ задания значений свойств таблицы стилей предназначен для оперативного форматирования определённого элемента документа и называется встраивание в тэги. Каждый тэг HTML имеет параметр style, в котором можно задать значения его свойств в соответствии с синтаксисом каскадных таблиц стилей. Например, в следующем примере задаётся форматирование заголовка первого уровня, определяющее его отображение шрифтом красного цвета:

<H1 style="color: red">Текст заголовка</h1>

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

Все способы встраивания таблиц стилей свободно сочетаются в одном документе.