1. https://w3schoolsua.github.io/html/html_css.html#gsc.tab=0
2. https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Інформатика›
- Каскадні таблиці стилів
Урок:
Каскадні таблиці стилів
30.10.2024
Вміст уроку:
1
2
1
Опрацюйте теоретичний матеріал:
Каскадні таблиці стилів (Cascading Style Sheets, CSS) — спеціальна мова, яку використовують для запису оформлення сторінок, написаних мовами розмітки даних.
Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їх зовнішній вигляд.
Концепція стилів подібна до ідеї стилів, яку реалізовано в сучасних текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
Таблиці стилів зазвичай створюють окремо від html-файлу. Під час створення html-файлу увагу концентрують на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів — навпаки. Отже, стилі дають змогу розділити етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.
Стилізація HTML за допомогою CSS
CSS описує, як елементи HTML повинні відображатися на екрані, папері або в інших носіях .
CSS економить багато роботи. Він може керувати розташуванням декількох веб-сторінок одночасно.
CSS можна додати до елементів HTML у три способи:
Inline (вбудований або лінійний)- за допомогою атрибута style у HTML-елементах.
Internal (внутрішній) - за допомогою <style> елемента в <head>розділі.
External (зовнішній) - за допомогою зовнішнього файлу CSS.
Найпоширенішим способом додавання CSS є збереження стилів у окремих файлах CSS.
Вбудований CSS
Внутрішній CSS
Зовнішній CSS
В будь-якому текстовому редакторі можна записати зовнішню таблицю стилів. Файл не повинен містити жодного HTML-коду і повинен бути збережений з розширенням .css.
Ось як виглядає "styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
2
10 з 10 балів
Виконайте інтерактивні вправи.
Скріни виконаних вправ прикріпіть до цього завдання (2 скріни)
.png)
Рефлексія від 3 учнів
Сподобався:
0
Так: 3
Ні: 0
Зрозумілий:
0
Так: 3
Ні: 0
Потрібні роз'яснення:
0
Ні: 3
Так: 0