ПЗ № 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, а також визначити єдиний стиль оформлення для різних сторінок документа і швидко модифікувати його зміною відповідного параметра у таблиці стилів

Параметри форматування стилів

Способи інтеграції каскадних стилів із 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.

Використовуючи попередній приклад створити веб-сторінку за зразком: