Вбудовані, внутрішні та зовнішні стилі
Русский перевод: Встроенные, внутренние и внешние стили
Вбудовані стилі
Вбудовані стилі прикріплюються безпосередньо до 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>
</head>
У результаті використання цього стилю всі параграфи на сторінці будуть червоного кольору, а всі посилання – синього.
Нагадаю, що хорошою практикою є поділ 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" /> </head>
У просунутому керівництві по 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-документом, як це було зроблено раніше.