нарешті ми підійшли до теми оформлення веб-сайту! в цьому уроці будемо вивчати, як додавати css-стилі та як звертатися до складових частей html-документу для їх оформлення
Зовнішні стилі CSS. Вони використовуються для відокремлення стилів від HTML-коду та зберігаються в окремому файлі (але в тій самій папці, де знаходиться HTML-файл) з розширенням .css і потім підключаються до HTML-сторінки за допомогою елемента link , який розташовується всередині блоку head. Це дає можливість використовувати один і той самий файл стилів на декількох сторінках, що полегшує управління та збереження консистентності дизайну. Елемент link містить атрибути href , type та rel . Href визначає шлях до файлу CSS. Атрибут type визначає тип документу, його значення дорівнює "text/css". В HTML5 специфікації цей атрибут не є обов'язковим. Атрибут rel визначає взаємозв'язок між сторінкою HTML та файлом, з яким він пов'язаний, його значення дорівнює "stylesheet".
See the Pen Зовнішні стилі by first_code (@maryna_kriukova) on CodePen.
Внутрішні стилі CSS. Внутрішні стилі CSS використовуються для вкладення стилів безпосередньо в HTML-код сторінки. Вони використовують елемент style всередині блоку head HTML-сторінки. Цей метод зручний, коли потрібно застосувати стилі до конкретного елемента або групи елементів на одній сторінці.
See the Pen Внутрішні стилі by first_code (@maryna_kriukova) on CodePen.
Основні правила синтаксису CSS включають селектори, властивості та значення.
Селектори використовується для вибору конкретних елементів HTML-структури, до яких будуть застосовуватися стилі.
Властивості вказують на зовнішні аспекти елемента, які ви хочете налаштувати, наприклад, колір (color), розмір шрифта (font-size).
Значення визначають параметри, яки ви хочете використати для вибраної властивості. Якщо ви хочете вказати властивість кольору, тоді значенням є колір, наприклад, red.
Основні найпоширеніші селектори приведені в даній таблиці.
| Назва селектора | Визначення | Приклад використання |
|---|---|---|
| Селектор елемента | Відповідіє іменам елементів | p { } Звертається до p елементу |
| Селектор класу | Відповідає елементу, атрибут класу якого має значення, яке співпадає із значенням, вказаним після символу точки | .container { } Звертається до будь-якого елементу, атрибут класу якого має значення container |
| Селектор ідентифікатора | Відповідає елементу, чий атрибут id має значення, яке відповідає тому, що вказується після знаку "решітки" (#) | #myElement { } Звертається до елементу, чий атрибут id має значення myElement |
| Селектор атрибуту | Відповідає елементу, чий атрибут має значення, що відповідає певному критерію або властивості | input[name="username"] { } Звертається до елементу, чий атрибут name має значення username |
| Дочірній селектор | Відповідає елементу, який є прямим дочірнім елементом іншого | header>h1 { } Звертається до будь-яких елементів h1, які є дочірніми елементами header |
| Селектор нащадку | Відповідає елементу, який є нащадком іншого зазначеного елемента (не просто прямим дочірнім елементом) | p a { } Звертається до будь-яких елементів a, які знаходяться всередині елемента p, навіть, якщо між ними вкладено інші елементи |
| Селектор сусіднього елемента | Відповідає елементу, який безпосередньо слідує за іншим елементом у структурі HTML | h2 + span { } Звертається до першого елементу span після будь-якого елемента h2 |
| Універсальний селектор | Застосовується до всіх елементів документа | * { } Звертається до всіх елементів |
Також існують селектори псевдокласів та псевдоелементів.
Селектори псевдокласів в CSS використовуються для вибору елементів на основі їхнього стану або дій, які відбуваються з цими елементами. Вони починаються з двокрапки (:) і додаються до селектора елемента або іншого селектора, до якого відноситься псевдоклас. Псевдокласи бувають статичними та динамічними.
Статичні псевдокласи використовуються для вибору елементів на основі їхнього статичного стану або структури. Їх значення не змінюються залежно від користувацьких дій.
Динамічні псевдокласи використовуються для вибору елементів на основі їхнього динамічного стану або користувацьких дій. Значення цих псевдокласів може змінюватися в залежності від дій користувача.
В наступній таблиці приведені приклади селекторів псевдокласів.
| Вид псевдокласу | Синтаксис | Визначення |
|---|---|---|
| Статичні | 1) :link 2) :visited |
1) вказує на невідвідане посилання 2) вказує на відвідане посилання |
| Динамічні | 1) :focus 2) :hover 3) :active 4) :checked |
1) обирає елемент, який знаходиться в фокусі 2) обирає елемент, на який наведений курсор миші 3) обирає активований елемент (наприклад, кліком мишею) 4) обирає елемент, який знаходиться в положенні "включено" (застосовується до елементів форми) |
Селектори псевдоелементів використовуються для вибору та стилізації певних частин елементів або додавання вмісту до документу, який не присутній в розмітці HTML. Розглянемо два поширених селектори псведоелементів – :before та :after.
Псевдоелемент :before дозволяє додати вміст перед змістом вибраного елемента. Цей псевдоелемент може використовуватись для додавання декоративних елементів, таких як лінії, символи або іконки, до початку елемента. Відповідно, псевдоелемент :after дозволяє додати вміст після змісту вибраного елемента. Цей псевдоелемент зазвичай використовується для додавання додаткових елементів або контенту після основного змісту елемента.
Також необхідно зазначити, що псевдоелементи :before та :after відображаються на сторінці, лише якщо ви визначаєте властивість вмісту — content . Ця властивість дозволяє вставити текстовий контент, URL-адресу зображення або інші спеціальні значення. Приклад застосування даної властивості продемонстрований в блоці із практикою.
В цьому уроці до коду сайту будуть додані усі необхідні селектори. Таким чином, змін у відображенні сайту практично не буде. Більшість коду було додано в документ із стилями, перейти до якого можна, натискаючи на кнопку CSS.
Можна помітити, що елемент header вже містить властивості. Вони були додані в уроці про додавання зображень.
В html-коді до певних елементів були додані класи та ідентифікатори, щоб до них звертатися в css документі. Звернути увагу потрібно на першу секцію із переліком послуг та на секцію із формою, в частині з елементами радіокнопок та чекбоксів.
В коді використані наступні типи селекторів: універсальний, елементу, нащадку, класу, ідентифікатору, атрибуту. Використані селектори псевдокласів: :hover , :focus , :checked та селектор псевдоелементів – :before .
Для визначення вмісту псевдоелементу :before була додана властивість content, яка містить символьне значення. Це значення вказує на символ з кодом в шрифті FontAwesome, який використовується для показу значків і піктограм на веб-сторінках. В нашому випадку іконки додаються перед назвами послуг. Щоб іконка була відображена, була додана властивість шрифту font-family із значенням FontAwesome. Детальніше про властивості шрифту буде розглянуто в наступному уроці.
See the Pen Untitled by first_code (@maryna_kriukova) on CodePen.
Таким чином, ми вивчили різновиди селекторів CSS та як їх використовувати на веб-сторінці. В наступному уроці до них будуть додані властивості.