Створення та підключення стилів CSS.

План уроку виробничого навчання

Майстра в/н Цируль Г.В.                                                     __________2023р.

Модуль ООІ та ПЗ-2.6. Підготовка та розміщення матеріалів у мережі Інтернет

ООІ та ПЗ-2.6.3 Програмування веб-сторінок та веб-сайту мовою розмітки

Тема уроку: «Створення та підключення стилів CSS. »

Мета уроку:

а) навчальна – ознайомити, навчити створювати  та підключати  стилі CSS в HTML;

б) розвивальна – виробити в учнів професійні навики оператора при роботі на ПК з використанням усіх правил техніки безпеки та охорони праці.

в) виховна – виховувати професійні риси, почуття відповідальності, вміння об’єктивно оцінювати себе та інших, культуру користувача ПК. 

Тип уроку: урок вдосконалення вмінь та формування навичок.

Дидактичне забезпечення (інтернет, конспект майстра, роздатковий матеріал)

Міжпредметні зв’язки: «охорона праці»,

Хід уроку:

Організаційна частина – 5 хв.

1. Привітання.

2. Перевірка наявності учнів.

1. Вступний інструктаж – 50 хв.

   1. Повідомлення учням теми та мети уроку.

   2. Актуалізація опорних знань

   3. Вивчення нової теми за планом уроку.

   4. Закріплення нової теми.

   5. Інструктаж з охорони праці перед початком роботи.

   6. Доведення денного завдання та критеріїв оцінювання.

2. Поточний інструктаж – 205 хв.

   1. Перевірка організації робочих місць.

   2. Робота з вправами.

   3. Пояснення і демонстрування завдання невстигаючим учням.

   4. Перевірка правильності виконання вправ.

   5. Надання консультацій учням, у яких виявленні помилки.

3. Заключний інструктаж – 10 хв.

   1. Підведення підсумків за урок.

   2. Аналіз допущених помилок та недопущення їх в подальшій роботі.

   3. Відзначення успішних робіт учнів.

   4. Оголошення оцінок за виконане завдання.

   5. Домашнє завдання: вивчити з конспекту нові записи і терміни даної теми.

Каскадні таблиці стилів (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">

стилі сss.pdf

виконати практичні завдання.