Презентация Область застосування CSS. Способи використання в HTML документі онлайн

Содержание слайда: CSS 3 основи Ігор Лютак

Содержание слайда: ПЛАН Зрозуміти область застосування CSS Способи використання в HTML документі Основні можливості CSS Користуватись довідником Приклади елементів документу Завдання

Содержание слайда: РЕСУРСИ В ІНТЕРНЕТІ 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 ...

Содержание слайда: ЩО ТАКЕ CSS? CSS це мова, що описує стиль HTML документу, тобто як будуть відображатись елементи. Наприклад: body { background-color: lightblue; } h1 { color: white; text-align: center; }

Содержание слайда: ПІД'ЄДНАННЯ ДО HTML Є три способи: Зовнішній файл Всередині документу Як слиль елементу Наприклад:

Содержание слайда: СЕЛЕКТОРИ Застосування стилю робиться за правилом: селектор і блок опису стилю. Селектор використовується для "пошуку" елементів в документі до яких буде застосовано стиль

Содержание слайда: СЕЛЕКТОРИ ПРОДОВЖЕННЯ Можна групувати селектори (перераховуючи їх через кому), застосовувати один стиль для різних елементів, наприклад: h1, h2, p { text-align: center; color: red; } три елементи мають однакивий стиль

Содержание слайда: КОЛЬОРИ Є три основні способи визначити колір: Через ім'я: 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);} /* червоний з прозорістю */

Содержание слайда: МОДЕЛЬ "КОРОБКИ' Кожен елемент можна представляти у вигляді коробки у якої є набивка (padding), границя (border), відступ (margin) та обвід (outline) Наприклад:

Содержание слайда: TEKCT Текст має багато властивостей до яких належать:

Содержание слайда: ШРИФТИ Є 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>

Содержание слайда: ВИДИМІСТЬ ЕЛЕМЕНТА Видимість елемента контролюється найважливішою властивістю для розмітки (положення) елементів 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 але мають ширину і висоту

Содержание слайда: ПОЛОЖЕННЯ ЕЛЕМЕНТІВ Положення елементів визначається властивістю position Є 4 види положення static - по замовчуванню, тобто нормальне розміщення елементів один за одним relative - відносне положення (відносно нормального). Інші елементи не будуть заповнювати проміжки, що утворились fixed - фіксоване положення по відношенню до видимої частини сторінки absolute - фіксоване положення відносно зовнішнього елемента, який має значення position не static

Содержание слайда: ЗАВДАННЯ Використовуючи глави щодо форматування списків щодо форматування меню Зробити власну горизонтальну панель меню. Лого зробити текстом подібно до зображення (не потрібно, щоб було один в один як на завданні). Іконки кнопок можна зробити за прикладом: