Презентація на тему "Вступ до CSS.""

Бібліотека Інформатика 11 клас Презентації
Про матеріал
Презентація створена до підручника О. Бондаренко "Інформатика. 10-11 клас". В презентації знайомство з селекторами, їх різновидами. Як правильно приєднати каскадні таблиці стилів у структуру html-файлу.
Перегляд файлу
Вступ до CSSCascading Style Sheets. Каскадні таблиці стилів. Сьогодні01.03.2023
Сьогодні01.03.2023 CSS (Cascading Style Sheets, каскадні таблиці стилів) - це мова для опису і зміни зовнішнього вигляду елементів. HTML використовується для визначення структури і семантики вмісту документа. CSS - для його оформлення і позиціонування. Блок CSS-коду називається правилом, яке складається з селектора і групи оголошень у фігурних дужках.
Сьогодні01.03.2023 Селектор вказує браузеру на те, до яких елементів потрібно застосувати стилі з цього правила. Кожне оголошення складається з пари властивість: значення; де властивість і його значення розділяються двокрапкою з пробілом і обов’язково закінчуються крапкою з комою. Вони описують, що саме потрібно зробити зі стилями елемента.
Сьогодні01.03.2023Є три способи додати стилі до HTML-документу: 1) вбудовані стилі (inline styles), 2) вбудована таблиця стилів (embedded stylesheet), 3) зовнішня таблиця стилів (external stylesheet). У кожного способу є свої переваги, недоліки, обмеження і сфера застосування. Підключення стилів​
Сьогодні01.03.2023 Вбудовані (інлайн) стилі задаються тегу безпосередньо в атрибуті style. Їх неможливо масштабувати, складно перевизначати і використовувати повторно, тому вони застосовуються в дуже рідкісних випадках. Наприклад, для динамічних стилів, які встановлюються під час виконання Java. Script коду, коли ми заздалегідь не знаємо, яке буде значення властивості. Вбудовані стилі​
Сьогодні01.03.2023 За такого підходу CSS-правила додаються всередину тегу <style> в шапці документа. Їх неможливо використовувати повторно на інших сторінках і складно масштабувати і підтримувати. Вбудована таблиця стилів​
Сьогодні01.03.2023 Зовнішній CSS-код легко масштабувати, підтримувати і використовувати повторно на інших сторінках, тому це стандарт підключення стилів. У проекті створюється окремий файл стилів з розширенням .css і підключається в HTML-документі. На одному рівні з index.html створюється папка css, а всередині неї – файл стилів style.css. В тезі <head>, використовуючи тег <link>, підключається створений раніше файл. В атрибуті rel вказується тип документа – stylesheet (таблиця стилів), що підключається. В атрибуті href вказується шлях до файлу стилів щодо HTML-документа. Зовнішня таблиця стилів​
Сьогодні01.03.2023 Селектори За допомогою різних селекторів можна вибрати один або групу елементів. Селекторів доволі багато, тому розглянемо основні, які можуть застосовуватися щодня.
Сьогодні01.03.2023 Універсальний селектор (*)Почнемо з найпростішого.
Сьогодні01.03.2023 Описує, до якого типу елементів буде застосоване CSS-правило. Селектор елемента недостатньо специфічний для того, щоб стилізувати окремі елементи, тому найчастіше застосовується для оформлення всіх тегів одного типу на сторінці. Наприклад, якщо у всіх посилань в документі потрібно прибрати підкреслення. Селектор елемента (тегу)
Сьогодні01.03.2023 Селектор класу Основний селектор в сучасній розробці. Використовується разом із глобальним атрибутом class. Ім’я класу задається тільки англійською мовою, і це обов’язково іменник, що описує цей елемент. В CSS використовується селектор класу, щоб задати стилі для одного і більше елементів з однаковим значенням атрибута class (ім’ям класу). У селекторі, перед ім’ям класу ставиться крапка . Відмінність селектора class від id полягає в тому, що клас не повинен бути унікальним і може використовуватися для вибору декількох елементів на сторінці.
Сьогодні01.03.2023
Сьогодні01.03.2023​ Як і з класом, тегам можна задавати глобальний атрибут id. Відмінність у тому, що значення id повинно бути унікальним на сторінці, тобто не може бути двох елементів з однаковими значеннями ідентифікатора. За можливості намагайтеся обходитися без ідентифікаторів. Намагайтеся використовувати теги чи псевдокласи. В CSS-селекторі перед ім’ям ідентифікатора ставиться символ решітки #. Селектор ідентифікатора
Сьогодні01.03.2023 В елемента може бути кілька класів, тоді вони записуються через пробіл. Композиція класів​
Сьогодні01.03.2023 Це можна застосовувати для комбінування і повторного використання стилів. Створимо розмітку і стилі для компонента повідомлень. У стилях описуємо кілька правил: загальних для всіх повідомлень і специфічних для кожного типу.
Сьогодні01.03.2023
Сьогодні01.03.2023 Ось робочий приклад.
Сьогодні01.03.2023 Селектор нащадка або контекстний селектор застосовує стилі до дітей і нащадків елемента за будь-якої глибини вкладеності. Селектор нащадка​
Сьогодні01.03.2023 Наприклад, замість того, щоб задавати стиль усім посиланням, потрібно змінити стилі тільки тих, які знаходяться всередині списку з класом social-links.
Сьогодні01.03.2023 Ще один поширений селектор, який дозволяє вибрати тільки безпосередню дитину всередині батьківського елементу. Використовуємо розмітку для багаторівневого меню магазину, в якому необхідно стилізувати теги <li> у списку з класом menu, але не submenu. Селектор дитини​
Сьогодні01.03.2023 Якщо використовувати селектор нащадка (контекстний), то CSS-правило застосується до всіх тегів <li>, і червона рамка буде у кожного. Селектор дитини допомагає вирішити цю проблему, вибравши тільки ті <li>, які є дітьми (перша вкладеність) списку ul.menu.
Сьогодні01.03.2023 Дозволяє застосувати стилі до елементів з певним атрибутом або його значенням.елемент[атрибут]​Застосує стилі до всіх елементів, у яких є вказаний атрибут. Вибере всі посилання з атрибутом title. Псевдокласи стану. Селектор атрибута​
Сьогодні01.03.2023 Псевдокласи стану. Вибере всі посилання з атрибутом href і відповідним значенням.
Сьогодні01.03.2023 Псевдокласи стану. Узагальнення:Є три способи додати стилі до HTML-документу: 1) вбудовані стилі (inline styles), 2) вбудована таблиця стилів (embedded stylesheet), 3) зовнішня таблиця стилів (external stylesheet). Селектор атрибута​Селектор дитини​Селектор нащадка​Селектор ідентифікатора. Селектор класу. Універсальний селектор (*)Селектор елемента (тегу)
Домашня робота. Сьогодні01.03.2023 Розгадати філворд. Скрін надіслати особистим повідомленням на Вайбер вчителю. Підготуватися до тестової перевірки знань.https://learningapps.org/display?v=pr1j99o3n23
Сьогодні01.03.2023 Сьогодні на уроці я навчився/навчилася…На уроція запам’ятав/запам’ятала…Найкраще мені вдалося…Найбільше мені сподобалося…Урок завершую з настроєм…Труднощі виникали…Обери лист, який ти хочеш відкрити(щоби відкрити лист, натисніть на нього)Рефлексія «Загадкові листи»
До нових зустрічей!Сьогодні01.03.2023
1 / 27
Зміст слайдів
Номер слайду 1

Вступ до CSSCascading Style Sheets. Каскадні таблиці стилів. Сьогодні01.03.2023

Номер слайду 2

Сьогодні01.03.2023 CSS (Cascading Style Sheets, каскадні таблиці стилів) - це мова для опису і зміни зовнішнього вигляду елементів. HTML використовується для визначення структури і семантики вмісту документа. CSS - для його оформлення і позиціонування. Блок CSS-коду називається правилом, яке складається з селектора і групи оголошень у фігурних дужках.

Номер слайду 3

Сьогодні01.03.2023 Селектор вказує браузеру на те, до яких елементів потрібно застосувати стилі з цього правила. Кожне оголошення складається з пари властивість: значення; де властивість і його значення розділяються двокрапкою з пробілом і обов’язково закінчуються крапкою з комою. Вони описують, що саме потрібно зробити зі стилями елемента.

Номер слайду 4

Сьогодні01.03.2023Є три способи додати стилі до HTML-документу: 1) вбудовані стилі (inline styles), 2) вбудована таблиця стилів (embedded stylesheet), 3) зовнішня таблиця стилів (external stylesheet). У кожного способу є свої переваги, недоліки, обмеження і сфера застосування. Підключення стилів​

Номер слайду 5

Сьогодні01.03.2023 Вбудовані (інлайн) стилі задаються тегу безпосередньо в атрибуті style. Їх неможливо масштабувати, складно перевизначати і використовувати повторно, тому вони застосовуються в дуже рідкісних випадках. Наприклад, для динамічних стилів, які встановлюються під час виконання Java. Script коду, коли ми заздалегідь не знаємо, яке буде значення властивості. Вбудовані стилі​

Номер слайду 6

Сьогодні01.03.2023 За такого підходу CSS-правила додаються всередину тегу