Підключення CSS

Таблиця зв'язаних стилів

При використанні таблиці зв'язаних стилів опис селекторів та їх властивостей розташовується в окремому файлі (як правило, з розширенням css), а для зв'язування документа з цим файлом використовується тег <LINK>:

<head>

</head>

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

Таблиця глобальних стилів

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

Наприклад, CSS можна задати за допомогою контейнера <STYLE>:

<head>
<style type="text/css">
H1 {
font-size: 120%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #336;
}
</style>
</head>

У цьому прикладі визначений стиль тега <H1>, який потім можна повсюдно використовувати на даній веб-сторінці.

Зауважимо, що таблиця глобальних стилів може розміщуватися не тільки всередині контейнера <HEAD>, але також в будь-якому місці коду HTML-документа.

Внутрішні стилі

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

<h1 style="font-size:120%;font-family:Verdana,Arial,Helvetica,sans-serif;color:#336">Dyenhsiysq cnbkm< /h1>

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

Ієрархія використання

Всі описані методи використання CSS можуть застосовуватися як самостійно, так і у поєднанні один з одним. Якщо у документі використовуються різні методи CSS, то застосовується перший із них у такому порядку:

1. внутрішній стиль;

2. таблиця глобальних стилів;

3. таблиця зв'язаних стилів.

Імпорт CSS

У поточну стильову таблицю можна імпортувати вміст CSS-файлу за допомогою команди @import. Цей метод використовується спільно з таблицею зв'язаних або глобальних стилів, але не з вбудованими стилями. Загальний синтаксис команди такий:

@import url("ім'я файлу") типи носіїв;
@import "ім'я файлу" типи носіїв;

Наприклад, стиль із зовнішнього файлу header.css в таблицю глобальних стилів можна імпортувати так:

<styletype="text/css">
@import url("/style/header.css");
H1{font-size:120%;font-family:Arial,Helvetica,sans-serif;color:green;}
</style>

Аналогічно відбувається імпорт і у файлі зі стилем (css-файлі), який потім підключається до документа:

@import "/style/print.css" print;
@import "/style/palm.css" handheld;
BODY {
font-family: Arial,Verdana,Helvetica,sans-serif;
font-size:90%;
background: white;
color: black;
}