Стрімкий розвиток Всесвітньої павутини та поява величезної кількості сайтів у 1990-х роках спонукали до розробки нових тегів мови HTML, які відповідали за дизайн сайтів.
Проте, при зміні дизайну сайта в кожну його сторінку потрібно було вносити зміни, що значно ускладнювало роботу.
У 1994 році було розроблено каскадні таблиці стилів. Каскадні таблиці стилів (англ. Cascading Style Sheets, або скорочено CSS) — спеціальна мова, що використовується
для опису зовнішнього вигляду сторінок, написаних мовою розмітки даних.
Основна ідея CSS полягає в тому, щоб відокремити дизайн документа від його вмісту.
CSS відповідає за оформлення і зовнішній вигляд HTML-коду, тоді як HTML — за
зміст та логічну структуру документа.
Конструкція СSS, яка відповідає за зовнішній вигляд певного елемента HTML,
називається CSS-правилом.
Усі CSS-правила складаються із селектора та блоку оголошень.
Блок оголошень містить одне або кілька оголошень, розташованих у фігурних дужках. Усередині блоку оголошень знаходяться пари CSS-властивість — значення, розділені
Блок оголошень містить одне або кілька оголошень, розташованих у фігурних дужках. Усередині блоку оголошень знаходяться пари CSS-властивість — значення, розділені
крапкою з комою (див рис.).
Кожне правило починається із селектора (покажчика), що вказує на ті html -елементи,
до яких застосовується CSS-правило. Саме в блоці оголошень установлюються
правила відображення вибраних нами елементів, визначаються їхні властивості — розмір, колір, відступи, поля, розташування на екрані (позиціонування) тощо.
Селектор дозволяє звернутись до одного або кількох HTML-елементів.
Якщо необхідно визначити стиль таким чином, щоб один і той самий елемент у
різних випадках відображався по-різному, то на допомогу приходять класи.
Клас описується у вигляді .ім’я_класу {властивості}. Для присвоєння класу заданому тегу використовується властивість class = "ім’я_класу".
Ідентифікатори (селектори id) дуже подібні до класу, крім одного — ідентифікатор
може мати одне-єдине унікальне ім’я в усьому документі. У файлі CSS ім’я
вказується зі знаком решітки на початку, а до потрібного елемента додається атри-
бут id = " ".
Термін «cascading» (каскадні) у назві CSS вказує на можливість злиття різних
таблиць стилів для створення єдиного визначення стилю окремого елемента
(тегу) чи всього документа.
Каскадність CSS — це механізм, завдяки якому до елемента HTML-документа
може застосовуватися більш ніж одне правило CSS.
Правила можуть виходити з різних джерел: із зовнішньої та внутрішньої таблиці
стилів, від механізму наслідування, від батьківських елементів, від класів і id, від селектора тегу, від атрибута style тощо.
Оскільки в цих випадках часто відбувається конфлікт стилів, була створена система пріоритетів:
у кінцевому підсумку застосовується той стиль, який виходить від джерела з більш високим пріоритетом.
Таким чином, каскадність у CSS — це здатність стильових правил накладатися
один на одного, перезаписувати і змішуватися. Підсумковий стиль елемента, який
видно в браузері, — це комбінація кількох послідовно застосованих стилів.
Існує кілька способів підключення CSS-коду до HTML-документа.
Розглянемо деякі з них.
• Застосування inline-стилів (стилі, які підставляються безпосередньо в рядок).
Додавання CSS-правила в HTML-тег за допомогою атрибута style. Усередині
атрибута style можна написати кілька CSS-оголошень, розділених крапкою з комою, фігурні дужки не використовуються. Inline-стилі змішують уміст документа
і його дизайн, тому його краще використовувати як виключення, у випадку,
коли елемент зустрічається лише один раз у документі або на сайті, але вимагає особливого оформлення
(приклад 1).
• Застосування таблиць стилів документа (document style sheets).
Називаються так тому, що розташовуються безпосередньо в HTML-документі й застосовуються лише до нього.
Іноді їх називають embedded style sheet (убудований стиль). Збереження CSS-коду
в HTML-документі у тезі <style>, що теж розміщується в <head>. Зазвичай цей
варіант використовується, коли існує лише одна проста HTML-сторінка й немає
сенсу створювати додатковий файл
(приклад 2).
• Застосування зовнішніх, або зв’язаних, стилів (external style sheets).
Це найбільш поширений варіант. Він полягає у винесенні CSS-коду в окремий
файл із розширенням .css та підключенням за допомогою тегу <link>, який
знаходиться виключно всередині елемента <head>.
Зустрівши в HTML-документі цей тег, браузер завантажить із сайта CSS-файл
і застосує до документа стилю, що містяться в ньому
(приклад 3).
Запитання
- Що таке каскадні таблиці стилів? Назвіть причини їхньої появи.
- Опишіть синтаксис CSS-правила.
- Що таке селектор? Які бувають селектори?
- Опишіть коротко способи підключення стилів. Проаналізуйте, коли і який спосіб краще використовувати.
Завдання
Для виконання завдання зручно використати notepad++.
1. Створити веб-сторінку, що містить картинку і текст. Текст обтікає картинку. Для тексту обтікання відбувається зліва.
У папці веб-дизайн потрібно створити файли :
1. спанієль.html
<html>
<head>
<title> Спаниель </title>
<link rel="stylesheet" href="css01.css">
</head>
<body>
<img src="спаниель.png" width="115" height="140"
class="picture">
<p>
Неслухняна величезна шерсть, круглі великі очі і <br>
короткі ніжки - це все про спанієлів! <br>
</p>
<p> Але напевно найголовнішою їх гідністю є вуха, які <br>
незграбно обвисають буквально відразу ж після <br>
народження!
</p>
<p>
Саме через них Кавалер кінг чарльз спанієль <br>
розташувався на 13-му місці.
</p>
</body>
</html>
2. css01.css
.picture {
float: left;
margin: 10px;
}
p {
margin: 10px;
text-align: left;
font-family: sans-serif;
font-size: 100%;
font-weight: normal;
color: gray;
}
3. В цій же папці розмістити файл-картинку спаниель.png із
зображенням песиків.