Лекція 11
Тема: КАСКАДНІ ТАБЛИЦІ СТИЛІВ (CSS)
План
-
ЗАСТОСУВАННЯ КАСКАДНИХ ТАБЛИЦЬ СТИЛІВ
-
ВИЗНАЧЕННЯ СТИЛІВ ЧЕРЕЗ КЛАСИ ТА ІДЕНТИФІКАТОРИ
-
ТЕКСТОВІ ВЛАСТИВОСТІ
-
КОЛІР І ФОН
-
ШРИФТИ
-
Властивості блоків тексту
-
Позиціонування і візуалізація
1 Застосування каскадних таблиць стилів
Таблиця стилів – це шаблон, який керує форматуванням тегів у web-документі. (CSS – CASCADING STYLE SHEETS)
Таблиця стилів складається з правил, а правило – з назви тега чи списку назв тегів і описів стилів, які діятимуть у межах цих тегів деякого html-файлу.
Опис стилю – це послідовність пар <властивість> : <значення>, які записують через крапку з комою та охоплюють фігурними дужками.
Отже, загальний вигляд правила такий:
Список тегів {
властивість 1 : значення 1;
властивість 2 : значення 2;
…;
властивість N : значення N;
}
Приклад правила для одного тега:
Р {color:red}.
Браузер відтворить на екрані тексти всіх абзаців червоним кольором.
Ось приклад складнішого правила для списку тегів:
Н3, LI {
color:green;
font-family:pragmatica;
font-size:16pt;
text-align:left;
border-style:ridge;
border-width:2mm;
}
Браузер виведе всі заголовки третього рівня Н3 і елементи списків LI зеленим кольором, шрифтом Прагматика розміру 16 пунктів, вирівняє їх до лівого краю вікна й охопить рамкою товщиною 2 мм з видавленим контуром (ridge).
Існує три способи застосування таблиць стилів в Web-документі:
-
зв’язування – дозволяє використовувати одну таблицю стилів для форматування багатьох сторінок;
-
впровадження – дозволяє задавати всі правила таблиці стилів у самому документі;
-
вбудовування – дозволяє змінити форматування конкретних елементів сторінки.
Зв’язування дозволяє зберігати таблицю стилів у окремому файлі і приєднувати її до документів за допомогою тега <link> у розділі <head>.
Приклад:
Файл з ім’ям my_style.css містить опис стилів:
body { background:#000000; color:#ffffff; }
a { color:#ff0000; text-decoration:none; }
Документ HTML, який посилається на цей файл, повинен містити в розділі head наступне посилання:
<head>
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
Тут rel="stylesheet" визначає, що зв’язується з документом таблиця стилів.
Значення type="text/css" вказує, що тип файлу текстовий, і що у файлі міститься опис таблиці стилів.
Параметр href тега <link> вказує на місце знаходження файла, що містить таблицю стилів.
Для впровадження використовується тег <style>, параметр якого type повинен дорівнювати "text/css". Таблиця стилів обмежується коментарем (<!--…-->). Це робиться для того, щоб браузери, які «не вміють» працювати зі стилями, ігнорували їх.
Приклад:
<html>
<head><title>Web-документ</title>
<style type="text/css">
<!--
body { background:#000000;color:#ffffff; }
h1 { font:14pt verdana; color:yellow; }
-->
</style>
</head>
<body>
<b>Приклад</b>
<br><br>
Впроваджений стиль для розділу body забезпечує виведення білих символів на чорному тлі<br>
<h1>Для виведення заголовка використовується впроваджений стиль:шрифт verdana розміром 14 пунктів і жовтим кольором</h1>
</body>
</html>
Вбудовування у тег використовується для визначення стилю об’єкта, що форматується певним тегом, за допомогою атрибута
style="властивість1:значення1; …; властивістьN:значенняN;".
Два елементи <div> (розділ) <span> (інтервал) є універсальними елементами контейнерами і дозволяють застосовувати стиль до фрагментів тексту чи абзацу.
Приклад:
<html>
<head><title>Web-документ</title>
Приклад 1
<p style="font-family:verdana;font-size:14pt">Для виведення тексту абзацу застосований шрифт verdana розміром 14 пунктів</p>
Приклад 2
<div style="font:14pt garamond">Для виведення тексту розділу застосований шрифт garamond розміром 16 pt</div>
Приклад 3
<span style="color:#336666; font-size:22">Для виведення фрагмента тексту використовується колір,</span> цей текст виводиться без оформлення
</body>
</html>
Можна використовувати всі три способи стилів, і браузер інтерпретує їх в наступному порядку: зв’язаний – впроваджений – вбудований.