Лабораторна робота № 3.
Тема. Каскадні таблички стилів.
Мета: Навчитись створювати та додавати на html-сторінки стилі.
Теоретичні відомості.
Як ми уже говорили, код нашої веб-сторінки міститиме лише теги размітки, а сам вигляд елементів задаватиметься через стилі. Зараз сааме час ознайомитись із CSS (Cascading Style Sheets, каскадні таблицки стилів).
Стилі являють собою набір параметрів, які визначають вигляд і розміщення елементів веб-сторінки.
Типи стилів
Розрізняють декілька типів стилів, які можуть одночасно використовуватись в одному документі. Це стиль браузера, стиль автора і стиль користувача.
Стиль браузера
Оформлення, яке по замовчуванню використовується до елементів веб-строрінки браузером.
Стиль автора
Стиль, який додає до документу його розробник.
Стиль користувача
Це стиль, який користувач сайту може включити через настройки браузера. Такий стиль має найбільший пріоритет і перевизначає початкове оформлення документу.
Способи додавання стилів на сторінку
Начало формы
Конец формы
Для додавання стилів на сторінку існує декілька способів, які відрізняються своїми можливостями та призначенням. Розглянемо їх.
Зв’язані або зовнішні стилі
При використання зв’язаних стилів опис селекторів і їх значень розміщаються в окремому файлі з розширенням css, а для зв’язку документу з цим файлом використовується тег <link>. Даний тег розміщують в контейнер <head>, как показано в прикладі 1.
Приклад 1. Підключення зв’язних (зовнішніх) стилів
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Стилі</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>
Значення параметрів тега <link> — rel и type залишаються незмінними незалежно від коду. Значення href вказує шлях до CSS-файлу, він може бути заданим як відносно, так і абсолютно. Зауважте, що таким чином можна підключити табличку стилів, яка знаходиться на іншому сайті.
Вміст файлу mysite.css, який включається за допомогою тега <link> показано в прикладі 2.
Приклад 2. Файл із стилем
H1 {
color: #000080;
font-size: 200%;
font-family: Arial, Verdana, sans-serif;
text-align: center;
}
P {
padding-left: 20px;
}
Як бачимо, файл із стилем не зберігає ніяких даних, крім синтаксису CSS. В свою чергу і HTML-документ міститиме лише посилання на файл зі стилем, тобто в повній мірі реалізується принцип розділення коду і оформлення сайту. Саме тому використання зв’язних стилів є найбільш універсальним та зручним методом додавання стилю на сайт.
Це дозволяє виконувати роботу над дизайном і версткою сайту паралельно, задавати різне оформлення сторінки для різних пристроїв виводу інформації (монітора, принтера, смартфону і т.д.), прискорює завантаження сайту, оскільки файл стилів при наступному зверненні береться із кешу браузера, дозволяє задавати одне оформлення для великої кількості документів, щоб, наприклад, не модифікувати десятки HTML-файлів, достатньо відредагувати один файл із стилем і оформлення потрібних документів зразу ж поміняється. Крім того, стилі мають значно більше можливостей з оформлення елементів веб-сторінки.
Але для повноти даної теми, розглянемо й інші способи додавання стилів.