Урок 12. Практична Стилі

Практичну розробила Світлана Пилюк
Практична робота № 3
Тема: Оформлення веб-сторінки за допомогою зовнішньої таблиці стилів.
Мета: навчитися створювати таблиці стилів, знати способи підключення та збереження шаблонів CSS,
вміти позиціонувати блоки, створювати ефекти тіні для тексту
Теоретичні відомості.
Стиль — це набір правил оформлення та форматування, який можна застосувати до різних елементів веб-
документа.
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або
всього тексту веб-сторінки. Таблиці каскадних стилів — це передусім набори параметрів, що змінюють так
властивості тегів HTML. Такі набори називають ще визначеннями тегів.
Наприклад, так виглядають прописані стилі у файлі mystyle.css:
Р {font-size: 40pt; color: green; font-family: "Comic Sans MS"}
Тут задано параметри для тегу абзацу <Р>, які встановлюють розмір шрифту 40 пунктів, колір шрифту —
зелений, гарнітуру — Comic Sans MS.
У документі html достатньо ввести теги <Р>...</Р> із текстом абзацу, щоб автоматично надати йому
зазначеного оформлення.
Таблиці каскадних стилів дають змогу отримати результати, яких неможливо досягнути звичайними
засобами HTML. Крім того, таблиці каскадних стилів дають змогу визначити єдиний стиль оформлення для
різних сторінок документа і швидко модифікувати його зміною відповідного параметра у таблиці стилів.
Параметрів форматування, які можна задавати за допомогою стилів, досить багато. Це, зокрема:
background — колір тла;
font-family — стиль шрифту (гарнітура);
font-size — розмір шрифту;
font-weight — жирність шрифту;
color — колір шрифту;
text-decoration — оздоблення тексту;
text-align — вирівнювання тексту;
m a r g i n - t o p — відступ від верхнього рядка абзацу;
l i n e - h e i g h t — міжрядкова відстань.
Застосування каскадних стилів у HTML-документах
Є три способи зв'язку каскадних стилів із HTML-документом: підключення зовнішньої таблиці стилів;
✓ розташування опису стилів у розділі HEAD документа;
✓ задавання властивостей стилів безпосередньо в тегах абзаців чи заголовків.
✓ підключення зовнішньої таблиці стилів
Зовнішня таблиця стилів (External Style Sheet) — це текстовий файл із розширенням .css. Його
підключають до HTML-документа за допомогою тегу <LINK>, наприклад:
<LINK REL=stylesheet TYPE=text/css HREF=mystyle.css>
Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів.
Атрибут HREF задає адресу файлу (mystyle.css).
Практична робота. Оформлення веб-сторінки за допомогою зовнішньої таблиці стилів.

І. Створення зовнішньої таблиці стилів
1. 1.Створіть окрему папку для практичної роботи.
1.2. Відкрийте текстовий редактор Блокнот і збережіть його командою Сохранить как з ім’ям mystyle.css
(тут будуть зберігатися стилі)
1.3. Відкрийте створений текстовий документ і створіть стиль для Заголовку 1 рівня, прописавши команди:
h1
{
color: blue;
background-color: yellow;
border: 1px solid black;
}
Вітаю, стиль для заголовку 1 рівня створено! Тепер треба його зв»язати із веб-сторінкою
ІІ. Створення веб-сторінки та зв2язування із таблицею стилів – 9 б
2.1. Створіть веб-сторінку: відкрийте текстовий редактор Блокнот і збережіть його командою Сохранить как
з ім’ям stor1.html
2.2. Імпортуйте таблицю зі стілем до щойно створеної вашої сторніки: для цього треба підключити таблицю
вашу стилів командою
<LINK REL=stylesheet TYPE=text/css HREF=mystyle.css> та викличте стиль заголовку 1 рівня з довільним
текстом, наприклад Всім привіт!
Загальний код буде виглядати так:

<html>
<title>My_storinka</title>
<body>
<h1>Всім привіт!</h1>
</body>
</html>
2.3. Оновіть файл, відкрийте його за допомогою браузера, перевірте, що у вас получилось.
ІІІ. Створення стилей (заголовок 2 рівня та абзац) – 10-11 б.

3.1. Створіть стиль для заголовків 2 рівня (дії аналогічні), для цього: відкрийте текстовий файл
mystyle.css та продовжіть прописувати код, але для Заголовку 2 рівня:
Наприклад:
h2 {
color: red;
font-size: 14 px;
font-style: italic;
}
3.2. Застосуйте створений стиль до вашої сторінки: відкрийте файл stor1.html та викличте стиль заголовку 2
рівня з довільним текстом, наприклад Незабаром Різдво!
. Загальний код буде виглядати так:
<html>
<body>
<h2>Незабаром Різдво! </h2>
</body>
</html>
Оновіть сторінку , відкрийте її за допомогою браузера, перевірте, що у вас получилось.
3.3. Створіть власний стиль для абзацу (дії аналогічні, як для Заголовків): для цього знову відкрийте
текстовий файл mystyle.css та продовжіть прописувати код (виділено червоним!), але для абзацу:
Наприклад:
p
{font-size: 14 pt;
color: green;
font-family: "Comic Sans MS"}
Не забувайте зберігати!!!!!
3.4. Застосуйте створений стиль до вашої сторінки: відкрийте файл stor1.html та та викличте стиль
для абзацу з довільним текстом, наприклад: Різдво – це особливе релігійне свято, що наповнює
людські серця теплом і милосердям. Відзначається 25 грудня в багатьох країнах світу на честь
народження Божого Сина.
Це найбільше свято в зимовому циклі, воно припадає на найдовшу в році ніч, коли, за віруваннями
християн, і народився Ісус Христос у Вифлиємі.
В Україні найпоширеніша дата святкування Різдва Христового 7 січня за юліанським календарем,

однак із 2017 року Різдво Христове офіційно відзначають ще й 25 грудня.
Загальний код буде виглядати так:

<html>
<body>
<h2>Незабаром Різдво! </h2>
<p> Різдво – це особливе релігійне свято, що наповнює людські серця теплом і милосердям.
Відзначається 25 грудня в багатьох країнах світу на честь народження Божого Сина.
Це найбільше свято в зимовому циклі, воно припадає на найдовшу в році ніч, коли, за віруваннями
християн, і народився Ісус Христос у Вифлиємі.
В Україні найпоширеніша дата святкування Різдва Христового 7 січня за юліанським календарем,

однак із 2017 року Різдво Христове офіційно відзначають ще й 25 грудня.
</p>
</body>
</html>
Оновіть сторінку, відкрийте її за допомогою браузера, перевірте, що у вас получилось.
IV. На 12 балів.
Чередуючи заголовки 1 рівня, 2 рівнів та абзаци створіть сторінку за зразком! Створіть самостійно стиль
для зображення (параметри: ширина – 250, висота – 200, рамка – 2) Текст може бути інший!
Бажаю успіхів!!!!
Зразок

Урок 12. Практична Стилі

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Урок 12. Практична Стилі

Uploaded by

Copyright:

Available Formats

Практичну розробила Світлана Пилюк

Практична робота. Оформлення веб-сторінки за допомогою зовнішньої таблиці стилів.

Загальний код буде виглядати так:

ІІІ. Створення стилей (заголовок 2 рівня та абзац) – 10-11 б.

mystyle.css та продовжіть прописувати код, але для Заголовку 2 рівня:

В Україні найпоширеніша дата святкування Різдва Христового 7 січня за юліанським календарем,

Загальний код буде виглядати так:

В Україні найпоширеніша дата святкування Різдва Христового 7 січня за юліанським календарем,

You might also like