Презентація "Каскадні таблиці стилів"

Бібліотека Інформатика 11 клас Матеріали до уроків
Про матеріал
В презентації на прикладах представлені основні поняття CSS: синтаксис, підключення, селектори/важливість селекторів.
Перегляд файлу
Інформатика. Заняття 32 Каскадні таблиці стилів
План заняття Повторення. Виклад теоретичного матеріалу. Закріплення. Підсумки, домашнє завдання
Повторення:1. На мобільних телефонах введіть адресу:www.kahoot.it2. Введіть3. Введіть (вводьте своє прізвище)4. Натисніть5. Чекаємо на приєднання інших гравців. Невеличке опитування-вікторина «Впізнай мене!»Game PINNickname. OK, go
Каскадні таблиці стилів. CSS – це мова стилів, яка відповідає за відображення HTML-коду: за шрифти, колір, відступи, висоту, ширину елементів, позіціонування, фонове зображення і багато іншого.
Приклад
СSS синтаксис. CSS синтаксис – це правила написання CSS кодуh1 {color: green;}селекторвластивістьзначення
ПІДКЛЮЧЕННЯ CSSInline стиліЗа допомогою тега <style>Винесення CSS коду в окремий документ
1. Inline стиліЦе додавання CSS конструкцій в сам HTML тег за допомогою атрибута style. Використання inline-стилів відразу погіршує читабельність HTML-розмітки
2. За допомогою тега style. Тег <style> поміщається у <head>.
3. Винесення CSS коду в окремий документ CSS код прописуємо в окремому документі з розширення .css і підключаємо цей документ в <head> за допомогою тега <link>. Тег <link> відразу додє собі атрибути rel=
HTMLCSSРезультат
Порядок застосування стилів. Дефолтні стилі браузера. Стилі зовнішніх файлів та стилі, прописані всередині тега <style>, що міститься в <head>Inline стилі, що прописані всередині HTML елемента.
Селектори. Важливість селекторів. Селектор дозволяє звернутись до конкретного HTML елементу, або кількох HTML елементів.Існують наступні селектори:id, або ідентифікатор;class;tag;атрибут;* – універсальний селектор;псевдо-елементи;псевдо-класи.
1. ІдентифікаторІдентифікатор позначається як id і його назва і прописується в середині відкриваючого тега.id=“i_am_id”назва ідентифікатораідентифікаторІдентифікатор повинен бути унікальним в рамка HTML-сторінки!Тобто на одній HTML-сторінці не може бути більше ніж одного ідентифікатора з тим самим ім’ям.
1. Ідентифікатор. Щоб звернутися до ідентифікатора, прописуємо # і назву самого ідентифікатора
2. Клас. Селектор клас позначається як class і його назва і прописується в середині відкриваючого тега.class=“i_am_class”назва селеткораселектор клас Один і той самий клас, може бути присвоєний кільком елементам. Тобто в один клас виносяться спільні для кількох елементів стилі.
2. Клас. Щоб звернутися до елемента за класом, прописуємо крапку (.) і назву самого класу
3. Tag. Щоб звернутися до елемента за допомогою тега, достатньо прописати назву тега і властивість/значення
Важливість селекторів!important. Inline стиліІдентифікаторкласи, псевдо-класи та атрибутитегидефолтні стилі браузера
Закріплення:1. Перейдіть за посиланням: Дайте відповіді на коротенькі запитання!
Домашнє завдання. Повторити теоретичний матеріал. Виконати практичну роботу. Скористатися додатковим матеріалом
Дякую за увагу!
1 / 22
Зміст слайдів
Номер слайду 1

Інформатика. Заняття 32 Каскадні таблиці стилів

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

План заняття Повторення. Виклад теоретичного матеріалу. Закріплення. Підсумки, домашнє завдання

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

Повторення:1. На мобільних телефонах введіть адресу:www.kahoot.it2. Введіть3. Введіть (вводьте своє прізвище)4. Натисніть5. Чекаємо на приєднання інших гравців. Невеличке опитування-вікторина «Впізнай мене!»Game PINNickname. OK, go

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

Каскадні таблиці стилів. CSS – це мова стилів, яка відповідає за відображення HTML-коду: за шрифти, колір, відступи, висоту, ширину елементів, позіціонування, фонове зображення і багато іншого.

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

Приклад

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

СSS синтаксис. CSS синтаксис – це правила написання CSS кодуh1 {color: green;}селекторвластивістьзначення

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

ПІДКЛЮЧЕННЯ CSSInline стиліЗа допомогою тега