ПЗ № 28. Створення веб-сторінки з використанням каскадних аркушів стилю
МЕТА: формувати практичні уміння працювати з таблицями каскадних стилів CSS; формувати вміння чітко й лаконічно висловлювати думки; виховувати уважність, дисциплінованість під час роботи за ПК.
В результаті виконання практичної роботи студент повинен
знати:
· мову розмітки даних HTML;
· правила форматування даних;
· властивості стилів та їх значення;
· теги і селектори каскадних таблиць стилів;
вміти:
· розрізняти та оперувати властивостями стилів та їх значеннями;
· форматувати HTML документи з використанням каскадних таблиць стилів;
Завдання та критерії оцінювання:
1. Прочитати теорію і переглянути відео
2. Записати тему та теорію у звіт
3. На 4-6 балів виконати впрви 1-4 і записати коди у зошит
4. На 7-9 балів самостійно виконати вправу 5
5. На 10-12 балів самостійно виконати вправу 6
Теоретичні відомості
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки, які змінюють властивості тегів HTML.
Стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету
Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними засобами HTML, а також визначити єдиний стиль оформлення для різних сторінок документа і швидко модифікувати його зміною відповідного параметра у таблиці стилів
Параметри форматування стилів
background — колір тла
font-family — стиль шрифту (гарнітура)
font-size — розмір шрифту
font-weight — жирність шрифту
color — колір шрифту
text-decoration — оздоблення тексту
text-align — вирівнювання тексту
Способи інтеграції каскадних стилів із HTML-документом
1.Задавання властивостей стилів в тегах абзаців чи заголовків, використовуючи атрибут style
2. Розташування опису стилів у розділі HEAD документа: використовується тег <style> розміщений у тегу <HEAD>
3. Використання селектора class.
Класи застосовують, коли необхідно визначити стиль для індивідуального елемента веб-сторінки або задати різні стилі для одного тега. При використанні спільно з тегами синтаксис для класів буде наступний:
тег ім'я_класу {властив1: значення; властив2: значення; ...}
4. Підключення зовнішньої таблиці стилів, через окремий файл з розширенням .css
Ця тема детально розглянута у відео
Вправа 1. Задати каскадний стиль для заголовка і абзаца першим способом.
<HTML>
<HEAD>
<TITLE> використовуючи атрибут style</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: Green">Перший спосіб: </H1>
<p STYLE="font-family:Segoe UI;font-size:18pt; color: blue">використовуючи атрибут style.</P>
</BODY>
</HTML>
Скопіювати код у програму Блокнот, зберегти із ім'ям Вправа1.html у папку ПЗ 28 і переглянути результат у браузері. Записати код у зошит.
Вправа 2. Задати каскадний стиль для абзаца другим способом
<HTML>
<HEAD>
<TITLE>Приклад використання CSS з використанням тегу <style></TITLE>
<STYLE>
P{font-family:Segoe UI;font-size: 18pt;color: red}
</STYLE>
</HEAD>
<BODY>
<P> Параграф 1. </P>
<P> Параграф 2. </P>
<P> Параграф 3. </P>
</BODY>
</HTML>
Скопіювати код у програму Блокнот, зберегти із ім'ям Вправа2.html у папку ПЗ 28 і переглянути результат у браузері. Записати код у зошит.
Вправа 3. Задати каскадний стиль для абзаца третім способом.
<HTML>
<HEAD>
<STYLE>
.style1 {font-size: 38pt; color: white; background-color: olive}
.style2 {font-size: 46pt; color: magenta; background-color: mistyrose}
</STYLE>
<TITLE>Приклад використання CSS</TITLE>
</HEAD>
<BODY>
<P CLASS=style1>До цього абзацу застосовано style1 </P>
<P CLASS=style2>До цього абзацу застосовано style2 </P>
</BODY>
</HTML>
Скопіювати код у програму Блокнот, зберегти із ім'ям Вправа3.html у папку ПЗ 28 і переглянути результат у браузері. Записати код у зошит.
Вправа 4. Підключення зовнішньої таблиці стилів, через окремий файл з розширенням .css
4.1. Відкрийте текстовий редактор Блокнот і введіть визначення тегу <P>:
P{font-family:Comic Sans MS;font-size: 40pt;color: green}
4.2 Збережіть файл з іменем mystyle.css у папку ПЗ 28
4.3 Скопіювати код у програму Блокнот
<HTML>
<HEAD>
<LINK REL = "stylesheet "TYPE="text/css" HREF="mystyle.css">
<TITLE>Приклад використання CSS</TITLE>
</HEAD>
<BODY>
<p>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту — 40 пунктів, колір шрифту — зелений, а гарнітура — Comic Sans MS.</p>
</BODY>
</HTML>
Зберегти із ім'ям Вправа4.html у папку ПЗ 28 і переглянути результат у браузері. Записати код у зошит.
Вправа 5. Використовуючи стилі для заголовків і абзаців:
H1 {font-size: 24pt; color: red}
H2 {font-size: 18pt; color: blue}
P{font-family:Segoe UI;font-size: 14pt;color: green}
створіть веб сторінку за зразком. Текст можна копіювати із теоретичних відомостей.
Створення текстових ефектів за допомогою стилів
Визначимо для тегу <BODY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міститься між тегами <BODY> та </BODY>, буде автоматично відформатований відповідно до цих властивостей. Тепер визначимо стилі з іменами тінь, основа, шар1 і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шар 1 та шар2. Порядок накладання задано розташуванням фрагментів тексту в HTML-документі.
Буде застосовано такі властивості:
· margin-top — відступ згори (за від'ємних значень можна забезпечити накладання фрагментів);
· color — колір;
· font-size — розмір шрифту;
· font-family — сімейство шрифтів (гарнітура);
· line-height — висота рядка.
Визначені в документі стилі мають такі параметри:
· .тінь — колір зі значенням #DBDBDB (світло-сірий), вирівнювання по центру, відступ згори 30 пікселів, розмір шрифту 80 пікселів, висота рядка 270 пікселів, гарнітура Times;
· .основа — червоний колір шрифту, відступ згори -230 пікселів, розмір 70 пікселів, висота рядка 250 пікселів, гарнітура — Times;
· .шар1 — чорний колір шрифту, відступ згори -100 пікселів, розмір шрифту — 50 пікселів, висота рядка 65 пікселів, гарнітура — Arial;
· .шар2 — зелений колір шрифту, відступ згори — 30 пікселів, розмір шрифту — 35 пікселів, висота рядка — 45 пікселів, гарнітура — Arial.
Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматує, а лише відзначає фрагмент тесту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.
<HTML>
<HEAD>
<TITLE>Приклад використання CSS</TITLE>
<STYLE>
BODY {color: black; font-size: 16px; font-family: Arial}
.тінь {color: #DBDBDB; text-align: center; margin-top: ЗОрх;
font-size: 80px; line-height: 270px; font-family: Times}
.основа {color: red; margin-top: -230px; font-size: 70px;
line-height: 250px; font-family: Times}
.шар1 {color: black; margin-top: -lOOpx; medium; font-size:
50px; line-height: 65px; font-family: Arial}
.шар2 {color: green; margin-top: ЗОрх; font-size: 35px;
line-height: 45px; font-family: Arial}
</STYLE>
</HEAD>
<BODY>
Приклад використання каскадних стилів
<CENTER>
<TABLE WIDTH=500 CELLPADING=0 CELLSPASING=0 BORDER=0>
<TR>
<TD ALIGN=CENTER VALIGN=TOP>
<DIV CLASS='тінь'>Текст із тінню</DIV>
<DIV CLASS='основа'>Текст із тінню</DIV>
<DIV CLASS='шар1'>Приклад тексту із тінню</DIV>
<DIV CLASS='шар2'>Це приклад використання каскадних стилів</DIV>
</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Результат:
Вправа 6.
Використовуючи попередній приклад створити веб-сторінку за зразком: