Чи зв'язування, чи впровадження?

Розглянемо ще одне питання, що нам потрібно обговорити перед тим, як ми підемо далі. Виявляється, існує два різних методи визначення таблиць стилів. Ви вже бачили багато прикладів одного з підходів: упровадження за допомогою контейнера <style>, включеного в заголовок документа. Він звичайно застосовується тоді, коли таблиця стилів поширює свою дію тільки на ту сторінку, у яку вона включена.

Звичайно, далеко не усі розробляють веб-сайти саме в такий спосіб. Досить часто дизайнери працюють саме над тим, щоб якнайбільше сторінок (а те й усі) були оформлені в одному стилі. Упроваджувати ту саму таблицю багато разів, погодитеся, незручно, та й нерозумно. Набагато розумніше було б мати деяку універсальну таблицю і зв'язувати з нею всі необхідні сторінки.

Зв'язування має дві очевидних переваги. По-перше, зрозуміло, що вам не потрібний при такому підході <style> на початку кожної сторінки. По-друге, якщо ви зберігаєте набір правил для усього сайта в одній таблиці, те дуже сильно спрощується процес редагування стилів. Крім того, це дозволяє нормально взаємодіяти декільком веб-дизайнерам, що працює над тим самим проектом.

Звичайно, навіть якщо у вас мається визначений стиль, ви завжди можете обійти його, використовуючи <span>, <div> чи атрибут style усередині іншого потрібного елемента.

Отже, яким образом можна зв'язати сторінку з таблицею стилів? По-перше, для цього потрібно створити окремий документ, у якому ви будете описувати тільки стилі. Там не повинно бути нічого, що прямо відображається в браузері. Тільки правила таблиць стилів. Цей документ має сенс зберегти для подальшого використання з расширенням.css, наприклад styles.css. Усередині нього можна використовувати спеціальні теги для вставки коментарів. Вони виглядають трохи специфічно: /* і */. Будь-який текст, укладений між ними, ігнорується. От невеликий приклад таблиці стилів:

/* Початок опису правил для заголовків */

h1 {

font-family: Arial, Helvetica;

font-size: 24pt;

font-weight: bold;

word-spacing: 2pt; }

Тепер потрібно підключити цей файл до веб-документу. Для цього існує елемент <link>, що повинний бути поміщений у заголовок (між <head> і </ head>).

<head>

<title>Головна сторінка</title>

<link rel="stylesheet" HREF ="адреса таблиці стилів">

</head>