Каскадні таблиці стилів
Каскадні таблиці стилів (Cascade Style Sheets - CSS) – це шаблон, який визначає зовнішній вигляд Web-документа при його відображенні в вікні браузера.
Каскадна таблиця стилів складається з правил, які описують формат відображення.
Всі правила складаються з двох частин: селектора и опису.
Селектором може бути будь-який тег HTML, для якого потрібно задати зовнішній вигляд.
Опис в свою чергу складається теж з двох частин параметр та його значення, розділені двокрапкою.
Наприклад:
H1{ color: blue;
font-size:16pt }
(прокоментувати)
Існує три метода зв’язування документа і таблиці стилів:
1. Зв’язування – таблиця стилів зберігається в окремому файлі і може використовуватись для форматування багатьох документів;
2. Впровадження - таблиця стилів розміщується в самому документі;
3. Впровадження в тег – дозволяють змінити зовнішній вигляд конкретного тега.
Ми з вами будемо використовувати метод впровадження.
При впровадженні опис таблиці стилів виконується за допомогою тегів
<style type="text/css"></style>
які розміщуються в межах тегу <head>.
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE type="text/css>
H1 { font-size: 15pt; color: red }
H2 { font-size: 10pt; color: blue }
</STYLE>
</HEAD>
(прокоментувати)
Для того щоб задати різні методи форматування для одного і того ж тегу використовується селектор CLASS.
<STYLE type="text/css>
H1.red { font-size: 15pt; color: red }
H1.blue { font-size: 15pt; color: blue }
</STYLE>
Тоді в документі:
<H1 CLASS=”red”> Заголовок червоного кольору </H1>
<H1 CLASS=”blue”> Заголовок синього кольору </H1>
Також можливе використання селектора CLASS і для різних тегів:
<STYLE type="text/css>
.red {color: red }
.blue {color: blue }
</STYLE>
Тоді в документі:
<Р CLASS=”red”> Абзац червоного кольору</Р>
<Р CLASS=”blue”> Абзац синього кольору</Р>
font-size
font-style
font-weight
color
background-color
background-image
border-color
border-style
text-align
text-decoration
Для впровадження таблиці стилів в документ потрібно:
1. Встановити курсор в зоні дії тегу <HEAD>;
2. Вставити тег таблиці стилю
Tools/Tag Chooser/ STYLE;
3. Задати правила форматування.
Для закріплення матеріалу створимо документ, зразок якого наведено нижче. Форматування виконаємо використовуючи таблиці стилів.
Відгадай загадку
Швидко скрізь цей птах літає,
безліч мушок поїдає.
За вікном гніздо будує,
але в нас він не зимує.
(Ластівка)
Які ноги, такий ніс,
По болоту ходить скрізь.
(Лелека)
Порядок роботи:
1. Створити новий документ;
2. Ввести весь текст розбивши його на абзаци, не задаючи параметрів форматування.
3. Вставити в документ таблицю стилів
Tools/Tag Chooser/ STYLE;
4. В таблиці стилів задати параметри форматування:
<style type="text/css">
.caption { font-size:30px; font-weight:bold; color:DeepPink; text-align:center; }
.first { font-size:20px; font-weight:bold; color:Red; }
.ansver { font-size:15px; font-style:italic; color:Fuchsia; }
</style>
5. Виділити заголовок і задати тег DIV (закладка інструментів Common, або Tools/Tag Chooser). В діалоговому вікні Tag Editor Div відшукати поле Class і ввести ім’я класу caption.
6. Переглянути документ в режимі Browse.
7. Виконати аналогічні дії по встановленню форматування для першої букви загадки (клас - first) і для відповіді (клас - answer).
8. Переглянути документ в режимі Browse.
9. Ввести текст третьої загадки і виконати форматування.
Хто співає на паркані
у червоному жупані.
Вранці будить всіх від сну.
Ку-ку-рі-ку!
(Півень)
10. Переглянути документ в режимі Browse.
Внесення змін в форматування документа
11. В таблиці стилів виконати такі зміни:
Клас caption
замінити значення параметру color на RoyalBlue;
Клас first
замінити значення параметру color на Blue;
Клас answer
замінити значення параметру color на Navy;
12. Переглянути документ в режимі Browse.
Що змінилось в форматуванні документа?
Які можна зробити висновки?
