Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
14 слайдов
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
196.10 kB
Просмотров:
95
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![CSS основи гор Лютак](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img0.jpg)
Содержание слайда: CSS 3
основи
Ігор Лютак
№2 слайд![ПЛАН Зрозум ти область](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img1.jpg)
Содержание слайда: ПЛАН
Зрозуміти область застосування CSS
Способи використання в HTML документі
Основні можливості CSS
Користуватись довідником
Приклади елементів документу
Завдання
№3 слайд![РЕСУРСИ В НТЕРНЕТ https www.w](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img2.jpg)
Содержание слайда: РЕСУРСИ В ІНТЕРНЕТІ
https://www.w3schools.com/css/
http://getbootstrap.com/
http://twbs.docs.org.ua/getting-started/
https://www.w3schools.com/w3css/w3css_templates.asp
http://nt1m.github.io/material-framework/#introduction
http://materializecss.com/footer.html
...
№4 слайд![ЩО ТАКЕ CSS? CSS це мова, що](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img3.jpg)
Содержание слайда: ЩО ТАКЕ CSS?
CSS це мова, що описує стиль HTML документу, тобто як будуть відображатись елементи.
Наприклад:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
№5 слайд![П Д ДНАННЯ ДО HTML три](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img4.jpg)
Содержание слайда: ПІД'ЄДНАННЯ ДО HTML
Є три способи:
Зовнішній файл
Всередині документу
Як слиль елементу
Наприклад:
№6 слайд![СЕЛЕКТОРИ Застосування стилю](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img5.jpg)
Содержание слайда: СЕЛЕКТОРИ
Застосування стилю робиться за правилом: селектор і блок опису стилю. Селектор використовується для "пошуку" елементів в документі до яких буде застосовано стиль
№7 слайд![СЕЛЕКТОРИ ПРОДОВЖЕННЯ Можна](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img6.jpg)
Содержание слайда: СЕЛЕКТОРИ ПРОДОВЖЕННЯ
Можна групувати селектори (перераховуючи їх через кому), застосовувати один стиль для різних елементів, наприклад:
h1, h2, p {
text-align: center;
color: red;
}
три елементи мають однакивий стиль
№8 слайд![КОЛЬОРИ три основн способи](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img7.jpg)
Содержание слайда: КОЛЬОРИ
Є три основні способи визначити колір:
Через ім'я: h1 { color: red; }
За допомогою значення RGB: h1 { color: rgb(255, 0, 0); }
Через шістнадцяткове число: h1 { color: #FF0000; }
Колір можна застосувати до:
Тексту: h1 { color: blue; }
Фону елементу: h1 { background-color: lightblue; }
Границі елементу: h1 { border-color: green; }
Прозорість кольору, функція rgba(0, 0, 0, 0.0):
0.0 - повністю прозорий, 1.0 - непрозорий
p1 {background-color: rgba(255, 0, 0, 0.3);} /* червоний з прозорістю */
№9 слайд![МОДЕЛЬ quot КОРОБКИ Кожен](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img8.jpg)
Содержание слайда: МОДЕЛЬ "КОРОБКИ'
Кожен елемент можна представляти у вигляді коробки у якої є набивка (padding), границя (border), відступ (margin) та обвід (outline)
Наприклад:
№10 слайд![TEKCT Текст ма багато](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img9.jpg)
Содержание слайда: TEKCT
Текст має багато властивостей до яких належать:
№11 слайд![ШРИФТИ типи шрифт в generic](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img10.jpg)
Содержание слайда: ШРИФТИ
Є 2 типи шрифтів:
generic family (загальна сім'я) - виглядають однаково, (Times New Roman, Georgia)
font family (сім'я) - специфічний шрифт сім'ї
p { font-family: "Times New Roman", Times, serif; }
через кому, перераховуємо різні сім'ї шрифтів.
818 Google Fonts https://fonts.google.com/
Під'єднання шрифту у документ:
<link href='//fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
Застосування стилю
<style> body { font-family: 'Sofia';font-size: 22px; } </style>
№12 слайд![ВИДИМ СТЬ ЕЛЕМЕНТА Видим сть](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img11.jpg)
Содержание слайда: ВИДИМІСТЬ ЕЛЕМЕНТА
Видимість елемента контролюється найважливішою властивістю для розмітки (положення) елементів display
Кожен елемент має по замовчуванню своє значення.
Елементи рівня блоку (block-level elements) - починаються завжди з нового рядка і заповнюють сторінку на всю ширину, наприклад теги "p", "div", <form>, <header>, <footer>, <section>
Вставні елементи (Inline Elements) - не починаються з нового рядка і заповнюють тільке потрібне місце, наприклад теги <span>, <a>, <img>
Невидимими елементи можна зробити так
li {
display: inline;
}
display: block; - робить елемент блоком
display: inline; - робить елемент частиною зовнішнього елемента
display: inline-block; - подібно як inline але мають ширину і висоту
№13 слайд![ПОЛОЖЕННЯ ЕЛЕМЕНТ В Положення](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img12.jpg)
Содержание слайда: ПОЛОЖЕННЯ ЕЛЕМЕНТІВ
Положення елементів визначається властивістю position
Є 4 види положення
static - по замовчуванню, тобто нормальне розміщення елементів один за одним
relative - відносне положення (відносно нормального). Інші елементи не будуть заповнювати проміжки, що утворились
fixed - фіксоване положення по відношенню до видимої частини сторінки
absolute - фіксоване положення відносно зовнішнього елемента, який має значення position не static
№14 слайд![ЗАВДАННЯ Використовуючи глави](/documents_6/8feeb7723ad1ff9ee269208bb44bbd34/img13.jpg)
Содержание слайда: ЗАВДАННЯ
Використовуючи глави щодо форматування списків
щодо форматування меню
Зробити власну горизонтальну панель меню. Лого зробити текстом подібно до зображення (не потрібно, щоб було один в один як на завданні). Іконки кнопок можна зробити за прикладом: