Після знайомства з HTML розробники сайтів поділяються на дві основні категорії. Одна частина вважає, що за допомогою HTML на сайті можна створювати все або практично все, інша ж розуміє, що в цілому засобів розмітки недостатньо для оформлення веб-документів. Дійсно, HTML лише перший етап у процесі навчання створенню сайтів. Наступним кроком є вивчення стилів або CSS (Cascading Style Sheets, каскадні таблиці стилів).
Стилі являють собою набір параметрів, керуючих видом і станом елементів веб-сторінки . Щоб стало зрозуміло, про що йде мова, подивимося на рис. 1.1.
Це звичайна веб-сторінка, оформлена без жодних надмірностей. Той же самий документ, але вже з додаванням стилів набуває зовсім інший вигляд (рис. 1.2).
Зміна разюча, тому заглянемо в код, щоб зрозуміти, в чому ж різниця (приклад 1.1).
Приклад 1.1. Вихідний код документа
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML> <html> <head> <title> флексагон </title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1> флексагон </h1> <p> флексагон представляє собою паперову фігуру, яка має три і більше сторони. Спочатку здається, що це неможливо, але згадайте стрічку Мебіуса, вона адже має всього одну сторону, на відміну від аркуша паперу, і, тим не менш, реальна. Так само реальний і флексагон, який легко зробити і склеїти в домашніх умовах. Він виглядає як двосторонній шестикутник, але варто зігнути його особливим чином, і ми побачимо третю сторону. Легко переконатися, що ми маємо справу саме з трьома сторонами, якщо розфарбувати їх в різні кольори. Перегинаючи флексагон, по черзі будемо спостерігати все його поверхні. </p> </body> </html>
Сам код HTML ніяких змін не зазнав і єдине додавання - це рядок <link rel="stylesheet" href="style.css"> . Вона посилається на зовнішній файл з описом стилів під ім'ям style.css . Вміст цього файлу показано в прикладі 1.2.
Приклад 1.2. Вміст стильового файлу style.css
body {font-family: Arial, Verdana, sans-serif; /* Сімейство шрифтів */ font-size: 11pt; /* Розмір основного шрифту в пунктах */ background-color:#f0f0f0; /* Колір фону веб-сторінки */ color:#333; /* Колір основного тексту */ } h1 {color:#a52a2a; /* Колір заголовка */ font-size: 24pt; /* Розмір шрифту в пунктах */ font-family: Georgia, Times, serif; /* Сімейство шрифтів */ font-weight: normal; /* Нормальне накреслення тексту */ } p {text-align: justify; /* Вирівнювання по ширині */ margin-left: 60px; /* Відступ зліва в пікселах */ margin-right: 10px; /* Відступ справа в пікселах */ border-left: 1px solid #999; /* Параметри лінії зліва */ border-bottom: 1px solid #999; /* Параметри лінії знизу */ padding-left: 10px; /* Відступ від лінії зліва до тексту */ padding-bottom: 10px; /* Відступ від лінії знизу до тексту */ } В файлі style.css якраз і описані всі параметри оформлення таких тегів як <body> , <h1> і <p> . Зауважте, що самі теги в коді HTML пишуться як зазвичай.
Оскільки на файл зі стилем можна посилатися з будь-якого веб-документа, це призводить у результаті до скорочення обсягу повторюваних даних. А завдяки поділу коду та оформлення підвищується гнучкість управління видом документа і швидкість роботи над сайтом.
CSS являє собою свою власну мову, який збігається з HTML тільки деякими значеннями, наприклад способом визначення кольору.
Типи стилів
Розрізняють декілька типів стилів, які можуть спільно застосовуватися до одного документу. Це стиль браузера, стиль автора і стиль користувача.
Стиль браузера
Оформлення, яке за умовчанням застосовується до елементів веб-сторінки браузером. Це оформлення можна побачити в разі «голого» HTML, коли до документу не додається ніяких стилів. Наприклад, заголовок сторінки, що формується тегом <h1> , в більшості браузерів виводиться шрифтом із зарубками розміром 24 пункту.
Стиль автора
Стиль, який додає до документа його розробник. У прикладі 1.2 показаний один з можливих способів підключення авторського стилю.
Стиль користувача
Це стиль, який може включити користувач сайту через настройки браузера. Такий стиль має більш високий пріоритет і перевизначає вихідне оформлення документа. У браузері Internet Explorer підключення стилю користувача робиться через меню , як показано на рис. 1.3.
У браузері Opera аналогічну дію відбувається через команду (рис. 1.4).
Зазначені типи стилів можуть спокійно існувати один з одним, якщо вони не намагаються змінити вигляд одного елемента. У разі виникнення суперечності спочатку має пріоритет стиль користувача, потім стиль автора і останнім йде стиль браузера.
Питання для перевірки
1. Потрібно поставити колір заголовка зеленим. Яке стильове властивість підійде для цієї мети?
- font-color
- color
- font-family
- text
- font-size
2. Що таке стиль?
- Спосіб скорочення HTML-коду за рахунок перенесення частини даних в інший файл.
- Мова розмітки гіпертекстових документів.
- Набір правил форматування елементів веб-сторінки.
- Метод перетворень текстових документів в HTML.
- Технологія, що представляє собою різні прийоми для верстки HTML-коду.
3. Як розшифровується абревіатура CSS?
- Colorful Style Sheets
- Cascading Style Sheets
- Computer Style Sheets
- Creative Style Sheets
- Common Style Sheets
Відповіді
1. color
2. Набір правил форматування елементів веб-сторінки.
3. Cascading Style Sheets