1.1.4.Зовнішні таблиці стилів

Цей метод вимагає створення окремого файлу таблиці з основними стилями. Такий файл повинен мати розширення файл.css. Потім необхідно зв'язати потрібні документи з даною таблицею. Потрібно помістити в зв'язуваному документі де-небудь між тегами <HEAD> і </HEAD> наступний рядок:

<LINK rel=stylesheet href="файл.css" type="text/css">

або

<STYLE>

@import URL("файл.css");

</STYLE>

Весь вміст надалі форматуватиметься за допомогою стилів заданих в таблиці файл.css. Метод дуже зручний для створення сторінок присвячених спорідненим темам або що належать одному власникові, в єдиному добре продуманому і легко пізнаваному стилі.

1.1.5.Апаратно-залежні таблиці стилів

Однією з найважливіших особливостей таблиць стилів є те, що вони можуть задавати спосіб представлення документа для різних пристроїв виводу: монітора, синтезатора мови, пристрою друку азбуки Брайля, друкарських пристроїв і так далі Нижче представлений перелік типів пристроїв, визначуваних в CSS:

• all

Для всіх пристроїв.

• aural

Для мовних синтезаторів.

• braille

Для пристроїв читання азбуки Брайля.

• embossed

Для друку азбуки Брайля.

• handheld

Для переносних невеликих портативних пристроїв.

• print

Для сторінкових непрозорих матеріалів і для документів, що переглядаються на екрані в режимі попереднього перегляду друку.

• projection

Для настінних презентацій, наприклад, для проекторів.

• screen

Для кольорових дисплеїв.

• tty

Для пристроїв, що використовують набір символів з фіксованою шириною, наприклад, телетайпів, терміналів або портативних пристроїв з обмеженими можливостями відображення.

• tv

Для телевізійних приставок (низьке розширення, кольорове зображення, обмежена прокрутка на екрані, можливість передачі звуку).

Існує декілька способів завдання апаратно-залежних таблиць стилів:

• За допомогою правила @import

<STYLE>

@import URL("файл.css") print;

</STYLE>

• За допомогою правила @media

<STYLE>

@media print{...};

</STYLE>

Задати апаратно-залежний стиль безпосередньо в елементі <LINK>

<LINK rel="stylesheet" type="text/css" media="print, handheld" href="file.css">

Задати апаратно-залежний стиль безпосередньо в елементі <STYLE>

<STYLE media=print>

селектор { атрибут: значення}

</STYLE>

1.2.Розділ 2 - Одиниці вимірювання

1.2.1.Відносні розміри

Відносні розміри елементів документа HTML задаються за допомогою відносних одиниць вимірювання, які указують значення довжини щодо інших елементів документа. Таблиці стилів, які використовують такий тип одиниць, набагато легше перенастроюються з одного типу пристроїв на іншій.

До відносних одиниць вимірювання відносяться:

• em - розмір, відносно букви "m"

• ex - розмір, відносно вертикального розміру букв, відповідного шрифту

• px - розмір, що використовує пікселі, відносно пристрою виводу

• % - розмір, що використовує процентні значення, щодо основного розміру

Приклад:

H1 { margin-left: 1.5em } H3 { margin-left: 2ex }

SPAN { font-size: 16px } P { font-size: 150% }

Дочірні елементи не успадковують відносні значення, вказані для їх батьківських елементів.