Каскадні таблиці стилів. Стильове оформлення сторінок

Перебіг уроку

Прочитати веб конспект
Виконати практичне завдання № 1
Виконати практичне завдання № 2
Виконати практичне завдання № 3

веб_технології_8.pptx

Практичне завдання 1

Є три способи застосувати правила CSS до HTML-документу.

І. Метод 1: Інлайн/In-line (атрибут style), коли CSS-правила

можна розташовувати прямо в html-тегах у рядок. Для цього

потрібно додати атрибут style до тегу.

Завдання 1

1.)Зайти по посиланню https://jsfiddle.net/

2) Відкрити сторінку з HTML текстом https://docs.google.com/document/d/1sIFsDPV5LRRtCvdEElINzDIC4_KPqhObjHEK6Gkr__Q/edit?usp=sharing скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4

3) Змінити жовтий колір фону вебсторінки на чорний, червоний колір тексту - на білий. Натиснути RUN, щоб переглянути результат у області 4

4) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.

Звернути на фрагмент HTML коду

Метод 2: Внутрішні (вбудовані або глобальні), (internal stylesheets) розташовуються безпосередньо в HTML-документі і застосовуються лише до нього. CSS код записується в HTML документі за допомогою тегу <style>, який розміщується у блоці <head> і повинні бути укладені в теги <style type = "text /css"> і </ style>.

Завдання 2

1.)Зайти по посиланню https://jsfiddle.net/

2) Відкрити сторінку з HTML текстом https://docs.google.com/document/d/1u1ud8pB6Cv0jAhutSW3Zvz-_oDzXlhFJO3dXxzHb0ks/edit?usp=sharing скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4

3) Скопіювати HTML фрагмент Внутрішнього(вбудованого або глобального), (internal stylesheets)вебсторінки https://docs.google.com/document/d/1XV7S9KmI-PnazpbD74okHqNDUHVRBU0vh6XOIv9DMl0/edit?usp=sharing (переглянути відеопояснення)

(CTRL+C) та розмістимо у блоці <head> </head>

4)Натиснути RUN, щоб переглянути результат у області 4

5) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.

Метод 3: Зовнішні або зв’язані стилі, (external style sheets) найбільш поширений спосіб – це винесення CSS коду в окремий файл з розширенням .css та підключенням за допомогою тегу <link> , який знаходиться виключно всередині елемента <head>. Як тільки браузер знаходить у документі цей тег, він одразу завантажить з сайту CSS-файл та застосує до документа стилі, що містяться в ньому.

Завдання 3

1.)Зайти по посиланню https://jsfiddle.net/

2) Відкрити https://docs.google.com/document/d/1Wm3I0MYOOa7VkzTHox0Qp46I2roxk2g8rYdCmcLnY28/edit?usp=sharing

скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4

3)Відкрити сторінку з HTML текстом https://docs.google.com/document/d/1D4XI_D2AvnZ7ITFsHUn-JNC_zJx2YKMfLAGcWfanbh8/edit?usp=sharing

скопіювати HTML фрагмент з покликанням на підключення CSS-файлу (переглянути відеопояснення) (CTRL+C) та розмістимо у блоці <head> </head>

4)Натиснути RUN, щоб переглянути результат у області 4

5)Відкрити сторінку з CSS файлом https://docs.google.com/document/d/1oK5-0KPY18ULSKvyFwMRZgkxGE1tQttsqO_c2-9M-Ak/edit?usp=sharing (переглянути відеопояснення)

6)Натиснути RUN, щоб переглянути результат у області 4

7) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.

Результат вправи 3