Зовнішні таблиці стилів - The Media Image - Website in progress
Суть способу в тому, що CSS виноситиметься в окремий файл (або файли). А в HTML зазначається, які саме CSS-файли до нього потрібно застосувати.
Представляємо зовнішню таблицю
Тег link для зовнішніх таблиць стилів
Для підключення зовнішнього CSS використовується тег link.
Знайомся, тег link:
- встановлює зв'язок із зовнішніми документами, найчастіше з таблицями стилів;
- повинен розташовуватись у секції head;
- В одному документі може бути кілька тегів link.
Приклади підключення CSS
Як правило, використовуються три атрибути:
- rel - відповідає за встановлення взаємозв'язку і в даному випадку має значення "stylesheet";
- type — MIME-тип об'єкта, що підключається. У нас це таблиця стилів означає тип "text/sss";
- href - абсолютний або відносний шлях до самого CSS-файлу.
Також можна підключати індивідуальні CSS залежно від пристрою відображення. Для цього є атрибут media. Докладніше з його значеннями можна ознайомитись у нашому довіднику.
Приклад підключення додаткової таблиці стилів для друкувальних пристроїв:
Переваги зовнішніх CSS
Крім того, що всі правила чітко погруповані в окремому файлі і їх легко знаходити і, при необхідності, правити, зовнішні таблиці мають ряд істотних плюсів, порівняно з вкладеними. Наприклад:
Використання зовнішніх таблиць стилів - найзручніший і грамотний спосіб пов'язати воєдино HTML і CSS. Сподіваюся, висновок зрозумілий. У реальних проектах використовуй саме зовнішні таблиці стилів.