Конструктор уроків
- Всеосвіта›
- Бібліотека уроків›
- Виробниче навчання›
- Створення та підключення стилів CSS.
Урок:
Створення та підключення стилів CSS.
23.02.2023
Вміст уроку:
1
2
1
План уроку виробничого навчання
Майстра в/н Цируль Г.В. __________2023р.
Модуль ООІ та ПЗ-2.6. Підготовка та розміщення матеріалів у мережі Інтернет
ООІ та ПЗ-2.6.3 Програмування веб-сторінок та веб-сайту мовою розмітки
Тема уроку: «Створення та підключення стилів CSS. »
Мета уроку:
а) навчальна – ознайомити, навчити створювати та підключати стилі CSS в HTML;
б) розвивальна – виробити в учнів професійні навики оператора при роботі на ПК з використанням усіх правил техніки безпеки та охорони праці.
в) виховна – виховувати професійні риси, почуття відповідальності, вміння об’єктивно оцінювати себе та інших, культуру користувача ПК.
Тип уроку: урок вдосконалення вмінь та формування навичок.
Дидактичне забезпечення (інтернет, конспект майстра, роздатковий матеріал)
Міжпредметні зв’язки: «охорона праці»,
Хід уроку:
Організаційна частина – 5 хв.
Привітання.
Перевірка наявності учнів.
Вступний інструктаж – 50 хв.
Повідомлення учням теми та мети уроку.
Актуалізація опорних знань
Вивчення нової теми за планом уроку.
Закріплення нової теми.
Інструктаж з охорони праці перед початком роботи.
Доведення денного завдання та критеріїв оцінювання.
Поточний інструктаж – 205 хв.
Перевірка організації робочих місць.
Робота з вправами.
Пояснення і демонстрування завдання невстигаючим учням.
Перевірка правильності виконання вправ.
Надання консультацій учням, у яких виявленні помилки.
Заключний інструктаж – 10 хв.
Підведення підсумків за урок.
Аналіз допущених помилок та недопущення їх в подальшій роботі.
Відзначення успішних робіт учнів.
Оголошення оцінок за виконане завдання.
Домашнє завдання: вивчити з конспекту нові записи і терміни даної теми.
Каскадні таблиці стилів (Cascading Style Sheets, CSS) — спеціальна мова, яку використовують для запису оформлення сторінок, написаних мовами розмітки даних.
Таблиці стилів дають змогу спростити процес створення сторінок і поліпшити їх зовнішній вигляд. Концепція стилів подібна до ідеї стилів, яку реалізовано в сучасних текстових редакторах — текст спочатку вводять, а потім форматують, користуючись стилями. Застосування стилів дає змогу вводити на сторінку потрібні тексти та інші елементи, не задумуючись над їхнім зовнішнім виглядом і розташуванням.
Таблиці стилів зазвичай створюють окремо від html-файлу. Під час створення html-файлу увагу концентрують на змісті сторінки, а не на її зовнішньому вигляді, а під час створення таблиці стилів — навпаки. Отже, стилі дають змогу розділити етапи створення html-файлу й удосконалення зовнішнього вигляду сторінки.
Стилізація HTML за допомогою CSS
CSS описує, як елементи HTML повинні відображатися на екрані, папері або в інших носіях .
CSS економить багато роботи. Він може керувати розташуванням декількох веб-сторінок одночасно.
CSS можна додати до елементів HTML у три способи:
лінійний - за допомогою атрибута style у HTML-елементах
Внутрішній - за допомогою <style> елемента в <head>розділі
Зовнішній - за допомогою зовнішнього файлу CSS
Найпоширенішим способом додавання CSS є збереження стилів у окремих файлах CSS.
Вбудований CSS
Вбудований CSS використовується для застосування унікального стилю до одного елемента HTML.
Вбудований CSS використовує атрибут style елемента HTML.
Цей приклад встановлює синій колір тексту <h1>елемента:
Приклад <h1 style="color:blue;">This is a Blue Heading</h1>
Внутрішній CSS
Внутрішній CSS використовується для визначення стилю для однієї сторінки HTML.
Внутрішній CSS визначається в <head>розділі HTML-сторінки в межах <style>елемента:
Приклад
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Зовнішній CSS
Для визначення стилю для багатьох сторінок HTML використовується зовнішня таблиця стилів.
За допомогою зовнішньої таблиці стилів ви можете змінити вигляд всього веб-сайту, змінивши один файл!
Щоб використовувати зовнішню таблицю стилів, додайте посилання на неї в <head> розділі HTML-сторінки:
Приклад
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
В будь-якому текстовому редакторі можна записати зовнішню таблицю стилів. Файл не повинен містити жодного HTML-коду і повинен бути збережений з розширенням .css.
Ось як виглядає "styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Шрифти CSS
Color - Властивість CSS визначає колір тексту, який буде використовуватися.
font-family - Властивість CSS визначає використовуваний шрифт.
font-size - Властивість CSS визначає розмір тексту, який буде використовуватися.
Приклад
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Межі рамок CSS
Border- Властивість CSS визначає межу навколо елемента HTML:
Приклад
p {
border: 1px solid powderblue;
}
Padding CSS
Padding - Властивість CSS визначає внутрішній відступ(пробіл) між текстом і межею:
Приклад
p {
border: 1px solid powderblue;
padding: 30px;
}
marginCSS
margin- властивість CSS визначає зовнішній відступ (пробіл) елемента від іншого елемента:
Приклад
p {
border: 1px solid powderblue;
margin: 50px;
}
Атрибут ідентифікатора
Щоб визначити певний стиль для одного спеціального елемента, додайте до нього
id - атрибут:
<p id="p01">I am different</p>
потім визначити стиль для елемента з певним ідентифікатором:
Приклад
#p01 {
color: blue;
}
Примітка: Ідентифікатор елемента повинен бути унікальним у межах сторінки, тому селектор ідентифікаторів використовується для вибору одного унікального елемента!
Клас Атрибут
Щоб визначити стиль для спеціальних типів елементів, додайте class - до елемента атрибут:
<p class="error">I am different</p>
потім визначити стиль для елементів з певним класом:
Приклад
p.error {
color: red;
}
Зовнішні посилання
На зовнішні таблиці стилів можна посилатися з повним URL-адресою або шляхом, пов'язаним з поточною веб-сторінкою.
Цей приклад використовує повну URL-адресу для посилання на таблицю стилів:
Приклад
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Цей приклад посилається на таблицю стилів, розташовану в папці html на поточному веб-сайті:
Приклад
<link rel="stylesheet" href="/html/styles.css">
Цей приклад посилається на таблицю стилів, розташовану в тій же папці, що й поточна сторінка:
Приклад
<link rel="stylesheet" href="styles.css">
2
виконати практичні завдання.
.png)
Рефлексія від 2 учнів
Сподобався:
0
Так: 2
Ні: 0
Зрозумілий:
0
Так: 2
Ні: 0
Потрібні роз'яснення:
0
Ні: 2
Так: 0