🗊Презентация Область застосування 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

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