4. Вбудовані таблиці стилів.
Використовуючи CSS, можна швидко і просто змінити стиль будь-якого елементу. Наприклад, якщо не подобається вихідний вид заголовків (по замовченню), що визначаються тегами <hl>, <h2> і т. д., можна призначити новий стиль, який скасовує вихідні настройки, що стосуються використовуваного сімейства шрифтів і розміру, застосування напівжирного шрифту або курсиву, а також багатьох інших властивостей.
Один із способів додавання стилів до веб-сторінки полягає у вставці потрібних для цього інструкцій в заголовок сторінки між тегами <head> і </head>. Тому для зміни стилю, застосовуваного до вмісту тега <h1>, потрібно скористатися наступним кодом (синтаксис якого буде розглянуто трохи пізніше):
<!DOCTYPE html>
<html><head><title>Головна сторінка</title>
<style type="text/css">
h1 {color:red; font-size:1em; font-family:Arial;}
</style>
</head>
<body><h1>Всім привіт</h1></body>
</html>
Основні правила тегу style:
повинен розміщуватися в секції head;
вміст тега являє собою таблицю стилів документа;
в одному документі може бути декілька тегів style.
У тегу style можуть бути атрибути, в даному прикладі атрибут type="text/css" повідомляє браузеру, що вміст - таблиця стилів.
Недоліки вкладеної таблиці:
Головне обмеження чітко звучить в самій назві - «вкладена таблиця». Тег style, розташований в секції head, розповсюджує свій стиль лише в одному HTML-файлі. Тобто, якщо на сайті кілька сотень сторінок зроблених під єдине оформлення, то в кожну потрібно вставити однаковий код таблиці. Фактичний обсяг сайту значно зросте. А який обсяг роботи потрібно буде виконати, якщо потрібно буде, припустимо, змінити на всіх сторінках колір фону.
Проте, існує краще рішення. Самий правильний і зручний варіант полягає в тому , щоб для підключення CSS використовувати зовнішні таблиці стилів.
Галузь застосування
Проте, постає питання, а для чого ж тоді вкладені таблиці стилів? Їх зручно застосовувати там, де стилі унікальні для даної сторінки і становлять з HTML єдиний компактний блок.
Підключення CSS за допомогою вкладених таблиць стилів має дуже обмежену сферу застосування. У реальних проектах таке підключення без необхідності краще не використовувати.
5. Зовнішні таблиці стилів.
Коли стиль потрібно застосувати не до однієї сторінки, а до всього сайту, краще керувати стилями шляхом переміщення їх з веб-сторінок в окремі файли, які називаються таблицями стилів і потім імпортувати стиль, який вам потрібен. Тим самим досягається мінімізація того обсягу коду, який дублюється на ваших сторінках, поліпшуються показники обслуговування і надається можливість застосування різних таблиць стилів до різних форматам подачі інформації (наприклад, у варіанті веб-сторінки, і у варіанті виведення надрук) без зміни HTML. Таке відділення вмісту від розмітки являється фундаментальним принципом дизайну.
Використання зовнішніх таблиць - самий гнучкий, потужний, зручний і правильний спосіб з'єднати HTML і CSS.
Суть способу в тому, що CSS виноситися в окремий файл (або файли). А в HTML вказується, які саме CSS-файли до нього потрібно застосувати.
Зовнішня таблиця стилів - це звичайний текстовий файл з розширенням css. Взагалі, це розширення не обов'язкове, але дуже рекомендоване, оскільки дає змогу уникнути проблем з деякими особливо старими браузерами.
Файл з таблицею стилів повинен містити тільки правила і коментарі CSS. Наявність у зовнішній таблиці стилів, наприклад, HTML - розмітки може призвести до того, що деякі її частини або взагалі вся таблиця будуть проігноровані.
Для підключення зовнішнього CSS використовується тег link.
встановлює зв'язок із зовнішніми документами, найчастіше з таблицями стилів;
повинен розміщуватися в секції head;
в одному документі може бути декілька тегів link.
Приклад підключення зовнішньої таблиці стилів:
<link rel="stylesheet" type="text/css" href="styles.css" />
Як правило, тег link при підключенні використовує три атрибути:
rel - відповідає за установку взаємозв'язку і в даному випадку має значення "stylesheet";
type - MIME-тип об'єкта, що підключається. Оскільки підключається таблиця стилів - значить тип "text/сss";
href - абсолютний або відносний шлях до самого CSS-файлу.
Переваги зовнішніх CSS:
Крім того, що всі правила чітко згруповані в окремому файлі і їх легко знаходити і, при необхідності, правити, у зовнішніх таблиць є ряд істотних плюсів, в порівнянні з вкладеними. наприклад:
Один і той же CSS-файл може «обслуговувати» скільки завгодно HTML-сторінок. Обсяг HTML зменшиться, вносити зміни, загальні для всіх сторінок сайту, значно простіше.
Можна розділити правила на логічні блоки (загальні стилі, стилі для конкретних розділів сайту), розташувати їх в декількох різних CSS-файлах і, для окремих сторінок, підключати тільки потрібні. Тільки варто врахувати, що тут палиця з двома кінцями - з одного боку отримуємо менший розмір підключеного CSS (непотрібні файли стилів не завантажуються), з іншого боку – більше дрібних файлів зі стилями – це більше звернень до сервера, що, зрозуміло, не дуже добре позначиться на швидкодії.
Можна виділяти стилі для конкретних браузерів і підключати їх за допомогою умовних коментарів.
Використання зовнішніх таблиць стилів - найзручніший і грамотний спосіб зв'язати в єдине ціле HTML і CSS.