Блокова модель CSS
Блокова модель CSS
Embedded Files
Перебіг уроку
Прочитати веб конспект
Виконати інтерактивну вправу
Виконати практичне завдання № 1
Виконати практичне завдання № 2
Виконати практичне завдання № 3
Виконати практичне завдання № 4
Виконати практичне завдання № 5
Рамка (border) - це контур, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова).
Поля (padding) - відділяють вміст блоку від його рамки, щоб текст, наприклад, не був "упритул" до стінок блоку.
Відступи (margin) - це порожній простір між різними блоками, що дозволяє на заданій відстані розташувати два блоки відносно один одного.
Тема. Блокова модель CSS. Рамки в CSS
Завдання. Створимо html-сторінку з трьома абзацами
скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
3) Відкрити сторінку з HTML текстом 2, у якому прописано підключення CSS стилів https://docs.google.com/document/d/1igeF8rVbX5LDbMJojUffUjE7OcBZOIvWTw1G-Yos2dQ/edit?usp=sharingм
3) Відкрити сторінку з HTML текстом 2, у якому прописано підключення CSS стилів https://docs.google.com/document/d/1igeF8rVbX5LDbMJojUffUjE7OcBZOIvWTw1G-Yos2dQ/edit?usp=sharingм
скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
скопіювати HTML текст вебсторінки (CTRL+C) та вставити його у онлайн редактор коду у область 1 (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
4)Відкрити сторінку з CSS файлом, що прописує властивості рамки https://docs.google.com/document/d/1VhiMIVptIzlouVguqiVytP8IDF6aVjXK1b6ywsqHltk/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
4)Відкрити сторінку з CSS файлом, що прописує властивості рамки https://docs.google.com/document/d/1VhiMIVptIzlouVguqiVytP8IDF6aVjXK1b6ywsqHltk/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
5) Змінити помаранчевий колір колір рамки на голубий, товщину рамки 2px на 6px, зминити вид рамки (таблиця вище). Натиснути RUN, щоб переглянути результат у області 4
5) Змінити помаранчевий колір колір рамки на голубий, товщину рамки 2px на 6px, зминити вид рамки (таблиця вище). Натиснути RUN, щоб переглянути результат у області 4
6) Відкрити сторінку з CSS файлом, що прописує внутрішні відступи padding https://docs.google.com/document/d/1zKgTHOrAADrI9Dsog-Z4y_HiC25BaOngPQzGJirV5Lw/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
6) Відкрити сторінку з CSS файлом, що прописує внутрішні відступи padding https://docs.google.com/document/d/1zKgTHOrAADrI9Dsog-Z4y_HiC25BaOngPQzGJirV5Lw/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
7) Відкрити сторінку з CSS файлом, що прописує зовнішні відступи margin https://docs.google.com/document/d/1iGC-X92uBlQFHFbpQfdUkN9K4g_Ji1dRov6UxNgefpk/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
7) Відкрити сторінку з CSS файлом, що прописує зовнішні відступи margin https://docs.google.com/document/d/1iGC-X92uBlQFHFbpQfdUkN9K4g_Ji1dRov6UxNgefpk/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
8) Відкрити сторінку з CSS файлом, що прописує ширину та довжину блоку width heigth https://docs.google.com/document/d/1lPTrYeEgOuIumiJ7Cs9L23021AqY5D5OXUR6Hn7HMEY/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
8) Відкрити сторінку з CSS файлом, що прописує ширину та довжину блоку width heigth https://docs.google.com/document/d/1lPTrYeEgOuIumiJ7Cs9L23021AqY5D5OXUR6Hn7HMEY/edit?usp=sharing скопіювати код стилю (CTRL+C) та вставити його у онлайн редактор коду відповідну область (CTRL+V) і натиснути RUN, щоб переглянути результат у області 4
9) Щоб прозвітувати про виконане практичне завдання натиснути Save підтвердити цю дію Save, скопіювати сгенероване посилання у адресному рядку браузера і надіслати викладачеві.
Page updated
Google Sites
Report abuse