ось ми вже на фінішній прямій! в цьому уроці буде знайомство з основними властивостями CSS стилів
Колір в CSS задається за допомогою властивості color , а фоновий колір — використовуючи властивість background-color .
CSS надає різні способи задання значень кольорів. Нижче приведені найпоширеніші способи.
Іменовані кольори. CSS має певний набір передвстановлених іменованих кольорів, таких як "red" (червоний), "blue" (синій), "green" (зелений) та багато інших. Таким чином, можна встановити колір елементу, використовуючи ім'я кольору.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
HEX-кольори. HEX-коди використовують шістнадцяткову систему для представлення кольорів. Вони починаються з символу # і складаються з комбінації шести шістнадцяткових символів (цифри 0-9 та літери A-F). Кожна пара символів представляє значення червоного, зеленого та синього каналів колірної моделі RGB.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
RGB-кольори. RGB (Red, Green, Blue) — це колірна модель, яка дозволяє вказати значення червоного, зеленого та синього каналів для створення бажаного кольору. Кольори RGB визначаються за допомогою функції кольору rgb(), в дужках якої пишуться числові значення кожного кольорового каналу через кому. Числа мають бути в діапазоні 0-255.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Для зміни шрифту використовується властивість font-family . Значення цієї властивості — це назва шрифту, який ви бажаєте використовувати. Можна вказати один або кілька шрифтів у рядку, розділяючи їх комою. Браузер буде перевіряти шрифти вказані в порядку, починаючи з першого. Якщо шрифт недоступний, він перейде до наступного шрифту в списку.
Існують певні сімейства шрифтів та загальні. Певні сімейства шрифтів — це безпосередньо їх назви, наприклад, «Times New Roman». Назва сімейства, яка має пробіли, обгортається в лапки. Загальні сімейства шрифтів — це такі ключові слова, як serif (с засічками), sans-serif (без засічок) і monospace (моноширинний).
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Наступна для розгляду властивість шрифту — font-style . Ця властивість може мати одне з трьох значень: normal, italic (курсивний шрифт) та oblique (похилий шрифт).
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Для задання насиченості (товщини) шрифту використовується властивісь font-weight . Ця властивість має різні значення, що впливають на товщину шрифту. Нижче приведені основні значення.
normal (за замовчуванням). Встановлює нормальну насиченість шрифту.
bold. Встановлює жирний (товстий) шрифт.
lighter. Застосовує насиченість шрифту, що є менш товстою за вихідний шрифт.
bolder. Застосовує насиченість шрифту, що є більш товстою за вихідний шрифт.
числові значення. Можна встановити числове значення від 100 до 900, де більше значення вказує на більшу насиченість шрифту. Наприклад, 400 відповідає normal, а 700 відповідає bold.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Для задання розміру шрифту використовується властивісь font-size . Нижче приведений різновид значень цієї властивості.
Абсолютні значення. Можна встановити конкретний розмір шрифту в пікселях (px), пунктах (pt), дюймах (in), сантиметрах (cm) або міліметрах (mm). Наприклад, font-size: 16px; встановить розмір шрифту 16 пікселів.
Відносні значення. Можна встановити розмір шрифту відносно його вихідного розміру. Деякі варіанти відносних значень font-size включають:
em. Розмір шрифту буде множитися на величину, вказану в ем-одиницях. Наприклад, font-size: 1.2em; збільшить розмір шрифту на 20% від вихідного розміру.
rem. Розмір шрифту буде множитися на величину, вказану в рем-одиницях. Рем відноситься до розміру шрифту елемента html. Наприклад, font-size: 1.5rem; збільшить розмір шрифту на 50% від розміру шрифту html.
%. Розмір шрифту відноситься до розміру шрифту батьківського елемента. Наприклад, font-size: 120%; збільшить розмір шрифту на 20% від розміру шрифту батьківського елемента.
Тепер розглянемо декілька властивостей для стилізації тексту.
Для вирівнювання тексту всередині елемента використовується властивість text-align . Вона визначає, як текст розміщується горизонтально в межах свого батьківського елемента. Можливі значення даної властивості включають: left, right, center, justify (розтягування тексту по ширині). Ця властивість застосовується до блочних елементів, таких як div, або до елементів, які мають display: inline-block. Вона дозволяє контролювати вирівнювання тексту в рамках цих елементів.
Ще одною властивістю для стилізації тексту є text-shadow . Вона дозволяє додавати тінь до тексту. Ця властивість містить чотири значення. Перше визначає горизонтальне зміщення тіні від тексту. Позитивне значення зсуває тінь праворуч, а негативне значення — ліворуч. Друге визначає вертикальне зміщення тіні від тексту. Позитивне значення зсуває тінь вниз, а негативне значення — вгору. Третє значення визначає радіус розмиття тіні. Чим більше значення, тим більше розмиття має тінь. Значення 0 означає відсутність розмиття. Та четверте визначає колір тіні, який задається ідентично значенню властивості color, що було розглянуто раніше. Можна використовувати кілька тіней для тексту, розділяючи їх комами.
Для задання декорації тексту використовується властивість text-decoration . Можна обрати одне з наступних значень цієї властивості: none (відсутність лінії), underline (підкреслення тексту), overline (надкреслення тексту), line-through (перекреслення тексту), blink (миготіння тексту).
Нижче приведений приклад застосування цих трьох властивостей.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Все, що відображається в CSS, є блоками. Щоб визначити, як елемент HTML повинен відобразитися на сторінці, використовується властивість display . Нижче приведені базові значення цієї властивості.
block. Елемент відображається як блок і займає всю доступну ширину контейнера. Після блока автоматично створюється перенесення рядка.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
inline-block. Елемент відображається як стрічка, але зберігає властивості блока, такі як ширина і висота. Він займає тільки необхідний простір та не створює перенесення рядка.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
inline. Елемент відображається як стрічка і займає тільки необхідний простір, якщо це можливо. Після стрічки не створюється перенесення рядка.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
none. Елемент не відображається на сторінці. Він займає нульовий простір і не впливає на розташування інших елементів.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
За замовчуванням блок (бокс) має такий розмір, щоб умістити свій вміст. Щоб встановити власні розміри боксу, можна використовувати властивості ширини та висоти, а саме — width та height , відповідно. Найпоширеніші способи визначення розміру блоку — це використання пікселів, відсотків або em. Пікселі дозволяють дизайнерам точно контролювати розмір елементів. При використанні відсотків розмір блоку є відносним до розміру вікна браузера або, якщо блок знаходиться всередині іншого блоку, він виражається у відсотках від розміру зовнішнього блоку. При використанні em розмір блоку базується на розмірі тексту всередині нього.
У кожного боксу є три певні властивості, які можна налаштовувати для контролю його вигляду:
padding (внутрішній відступ). Ця властивість визначає простір всередині боксу, між його вмістом та зовнішньою рамкою. HTML-елемент має чотири сторони: left, right, top, bottom. Кожній стороні відповідає поле padding. Поля встановлюються за годинниковою стрілкою: top, right, bottom, left. Якщо поля є рівними: верхнє з нижнім та праве з лівим, тоді записуються тільки два значення. Відповідно, якщо усі поля є рівними, тоді — одне значення. Можна встановлювати окремі значення для верхнього (padding-top), нижнього (padding-bottom), лівого (padding-left) та правого (padding-right) відступів.
border (рамка). Ця властивість визначає зовнішню рамку боксу. Дана властивість містить три значення: ширина, стиль і колір. Скорочені значення властивості border вказуються в такому порядку: ширина, стиль, колір. Ширину та колір рамок можна визначити за допомогою загальних CSS одиниць довжини та кольору, які розглянуті трохи вище в даному уроці. А найпоширенішими значеннями стилю рамок є solid (суцільна), double (подвійна), dashed (штрихова), dotted (пунктирна), none (без рамки). Також можна задати рамку для окремої сторони боксу, використовуючи властивості border-top, border-bottom, border-left та border-right.
margin (зовнішній відступ). Ця властивість визначає простір навколо боксу, між ним та іншими елементами або зовнішнім середовищем. Принцип запису полів ідентичний до властивості padding. Можна також окремо встановлювати значення для верхнього (margin-top), нижнього (margin-bottom), лівого (margin-left) та правого (margin-right) відступів.
Нижче приведений код із застосуванням властивостей width, height, margin, padding, border. Для кращого розуміння, спробуйте повводити різні значення для цих властивостей в CSS-коді класу box.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Також в CSS існують властивості, які дозволяють контролювати розміри елементів, забезпечуючи їх відповідність встановленим межам ширини та висоти.
Властивості max-width та min-width дозволяють контролювати ширину елемента. Якщо встановлене значення max-width перевищує фактичну ширину елемента, то елемент автоматично змінює свою ширину, щоб не перевищувати задане значення. З іншого боку, якщо встановлене значення min-width більше, ніж фактична ширина елемента, то він буде автоматично збільшувати свою ширину, щоб відповідати мінімальному значенню.
Властивості max-height та min-height дозволяють контролювати висоту елемента. Якщо встановлене значення max-height перевищує фактичну висоту елемента, то елемент буде автоматично змінювати свою висоту, щоб не перевищувати задане значення. У випадку, коли встановлене значення min-height більше, ніж фактична висота елемента, він буде автоматично збільшувати свою висоту, щоб відповідати мінімальному значенню.
Зручно керувати розмірами елементів, особливо коли має значення поле і рамка, дозволяє властивість box-sizing. Дана властивість визначає, яким чином браузер обчислює загальну ширину та висоту елемента, включаючи його контент, поле (padding) і рамку (border). За замовчуванням, значення box-sizing встановлене на content-box, що означає, що ширина та висота елемента включають лише контент, і не враховують поле та рамку. Якщо встановити значення box-sizing на border-box, то ширина та висота елемента будуть враховувати як контент, так і поле та рамку. Це дозволяє більш точно контролювати розміри елементів, оскільки поле та рамка будуть займати простір всередині елемента, а не додаватись до загальної ширини та висоти.
Також розглянемо відносно нові властивості боксової моделі, які були додані у версію CSS3.
Властивість border-radius використовується для задання закруглених кутів для рамки (border) елемента HTML. За допомогою цієї властивості можна створювати елементи з круглими кутами, еліпси або інші складніші форми. Можна визначити радіус рамки для кожної сторони за допомогою властивостей border-top-left-radius, border-top-right-radius, border-bottom-right-radius і border-bottom-left-radius. Також можна вказати радіус кожного кута скорочено в наступному порядку: верхній лівий, верхній правий, нижній правий і нижній лівий кути.
Ще одним нововведенням в CSS3 є властивість box-shadow. Вона дозволяє додавати тінь навколо боксу. Дана властивість працює так само, як властивість text-shadow, яка була розглянута вище. Вона має використовувати принаймні перше з цих двох значень, а також колір:
Горизонтальний зсув. Від’ємні значення розміщують тінь ліворуч від поля.
Вертикальний зсув. Від’ємні значення розміщують тінь у верхній частині поля.
Відстань розмиття. Якщо опущено, тінь є суцільною лінією, як рамка.
Розповсюдження тіні. Якщо використовується позитивне значення, тінь розширюватиметься в усіх напрямках, а від’ємне — стискатиметься.
Ключове слово inset також можна використовувати перед цими значеннями для створення внутрішньої тіні.
Щоб краще зрозуміти, як налаштовувати дану властивість, пропонується у вікні Result повводити різні значення для налаштування тіні.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Під час створення веб-сторінок іноді виникає потреба виконати складніші маніпуляції з розташуванням елементів, щоб задовольнити вимоги дизайну. Наприклад, може знадобитися розмістити один елемент поверх іншого або зсунути його відносно його вихідного положення. У деяких випадках може знадобитися зафіксувати елемент, щоб він знаходився на одному місці незалежно від прокрутки сторінки. Для досягнення цих цілей використовується властивість position, сумісно з властивостями left, right, top, bottom. Дані властивості контролюють спосіб розташування елемента на сторінці.
Значенням за замовчуванням даної властивості є static. У звичайному потоці документа кожен елемент рівня блоку знаходиться поверх наступного. Оскільки це є типовим способом, яким браузери обробляють HTML елементи, не має потреби використовувати CSS властивість для позначення, що елементи повинні з'являтися в нормальному потоці.
Наступне можливе значення даної властивості — це relative. Положення елемента встановлюється відносно його вихідного положення в коді. Додавання властивостей left, top, right та bottom змінює позицію елемента і переміщує його в ту чи іншу сторону від початкового розташування.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Ще одним способом позіціонування є absolute. Елемент нібито виривається з коду та зависає у повітрі. Він перестає впливати на інші елементи. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в той чи інший бік щодо батька, у якого заданий параметр position: relative.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Наступним значенням для позіціонування є fixed. Це тип абсолютного позиціонування. Елемент розташовується відносно вікна браузера. Тому, коли користувач прокручує сторінку вниз, вона залишається на тому самому місці.
See the Pen Позіціонування_fixed by first_code (@maryna_kriukova) on CodePen.
Останнім значенням для розгляду є sticky. Це гібридне поєднання значень static та fixed. Спочатку елемент веде себе як static але після того як скролл доходить до його кордону він стає fixed та прилипає до зазначеної позиції top або bottom.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Останньою підтемою стилів CSS для розгляду в цьому уроці є переходи. Під час взаємодії з веб-сайтами можна помітити, що багато елементів мають стан. Наприклад, розкривні меню можуть бути відкритими або закритими. Кнопки можуть змінювати колір під час наведення курсору на них. Використовуючи переходи CSS, можна інтерполювати (тобто створювати проміжні кроки) між початковим станом і цільовим станом елемента. Перехід між двома станами покращує досвід користувача, надаючи візуальне керівництво, підтримку та підказки щодо причини та наслідку взаємодії.
Властивість transition-property вказує, для якої властивості створювати перехід. Дана властивість приймає одне або кілька імен властивостей CSS у списку, розділених комами. Опціонально можна використовувати transition-property: all, щоб вказати, що до кожної властивості повинен бути задіяний перехід.
Властивість transition-duration використовується для визначення часу, який знадобиться для завершення переходу. Тривалість переходу приймає одиниці часу в секундах (s) або мілісекундах (ms) і за замовчуванням дорівнює 0s.
Для зміни швидкості переходу протягом тривалості переходу використовується властивість transition-timing-function. Ця властивість приймає різні значення функцій, що задають криву згладжування для анімації. Декілька поширених значень включають:
ease. Анімація починається повільно, прискорюється в середині і затримується перед закінченням.
linear. Анімація відбувається з постійною швидкістю.
ease-in. Анімація починається повільно і прискорюється протягом перехідного ефекту.
ease-out. Анімація починається швидко і затримується перед закінченням.
ease-in-out. Анімація починається повільно, прискорюється в середині і затримується перед закінченням.
Для того, щоб вказати час, коли розпочнеться перехід, використовується властивість transition-delay. Якщо тривалість переходу не вказана, переходи розпочнуться миттєво, оскільки значення за замовчуванням становить 0s. Ця властивість приймає одиниці вимірювання часу, наприклад секунди (s) або мілісекунди (ms).
Як і для більшості властивостей CSS, для властивості переходу існує скорочена версія. Властивість transition поєднує в собі властивості transition-property, transition-duration, transition-timing-function та transition-delay.
Нижче продемонстрований приклад використання скороченої версії властивості transition та застосування властивостей переходу окремим чином. Результат, відповідно, однаковий.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
зараз ми поступово будемо додавати властивості для оформлення сайту, які були розглянуті в теоретичному блоці
Додаємо властивості боксової моделі. Зокрема встановлюємо ширину та висоту елементам, налаштовуємо внутрішні та зовнішні відступи, створюємо рамки. Сторінка тепер має більш точний вигляд. Структура та організація контенту стали краще.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Далі налаштовуємо шрифтове оформлення. Додаємо сімейства шрифтів, встановлюємо розміри, корегуємо насиченість. В певних блоках вирівнюємо текст по центру. Прибираємо декорацію тексту (його підкреслення) в усіх посиланнях, відповідно, прописуємо це в універсальному селекторі.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Додаємо колір та фоновий колір на веб-сторінку, використовуючи hex-коди.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Налаштовуємо позіціонування для кастомних радіокнопок та чекбоксів: точно задаємо положення та розміри цим елементам. Додаємо фонове зображення для елементу чекбоксу у вигляді галочки.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Заключним кроком оформлення веб-сайту стане додавання відносно нових властивостей, які прийшли в CSS3. Додаємо тіні до заголовків секцій, іконок та до певних елементів: навігаційного блоку, підвалу, таблиці та зображення. Округлюємо кути у контейнерів секцій, зображення, елементів вводу, кнопки "Надіслати" та радіокнопок. Встановлюємо переходи для елементів навігації, посилань в таблиці, кнопок форми. Залиште відкритим тільки вікно Result, щоб переглянути сайт при достатній ширині екрану.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, шляхом створення сайту ви отримали знання основних елементів HTML5 та стилів CSS3. Успіхів у подальшому навчанні!