Вбудовані стилі
Вбудовані стилі прикріплюються безпосередньо до HTML-тегів значенням атрибута style.
Вони нагадують наступний код:
<p style="color: red">text</p>
У результаті застосування цього стилю, параграф буде показаний червоного кольору.
Але, як раніше вже зазначалося, більш вірним підходом є створення HTML-документа без оформлення і стилів. І ось чому використання вбудованих стилів не рекомендується.
Внутрішні стилі
Впроваджені, або внутрішні, стилі застосовуються до всієї сторінки цілком. Теги style розміщуються між тегами head.
Спосіб підключення та застосування стилів виглядає так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
У результаті використання цього стилю всі параграфи на сторінці будуть червоного кольору, а всі посилання – синього.
Нагадаю, що хорошою практикою є поділ HTML-змісту і CSS-представлення в різних файлах. І тут приходить рятівник …
Зовнішні каскадні таблиці стилів
Зовнішні таблиці стилів застосовуються до всього сайту з безліччю сторінок. Для цього створюється CSS-файл приблизно наступного змісту:
p {
color: red;
}
a {
color: blue;
}
Якщо ви збережете це у файлі “web.css”, вам також буде потрібно вказати в HTML-файлі посилання на зовнішню таблицю стилів. Виглядає це наступним чином (див останній рядок):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" />
У просунутому керівництві по CSS ми покажемо інші способи підключення зовнішньої каскадної таблиці стилів, а поки що досить і цього.
Щоб дотримуватися даного керівництва найбільш ефективно, рекомендується пробувати і тестувати код у міру прогресу. Тому використовуйте ваш текстовий редактор, щоб створити повністю новий файл, а потім збережіть новий документ як “web.css” в тій же директорії, що і HTML-файл.
Потім змініть HTML-файл таким чином, щоб він нагадував наступний код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> <link rel="stylesheet" type="text/css" href="web.css" /> </head>
Збережіть HTML-файл. Цей файл посилається на CSS-файл, який в даний момент порожній. Тому нічого не зміниться. Але в міру роботи з Керівництвом по CSS для початківців, ви навчитеся, як додавати і змінювати CSS-файл, і зможете перевіряти результати змін оновленням вікна браузера з відкритим у ньому HTML-документом, як це було зроблено раніше.