Зміст курсу
Основи CSS
Основи CSS
Ефективна Робота з CSS
Змінні
Змінні CSS, також відомі як користувацькі властивості CSS, надають можливість визначати багаторазові значення в нашому CSS-коді. Використовуючи змінні, ми можемо створювати динамічні та гнучкі дизайни, які легше підтримувати та оновлювати.
Щоб оголосити змінну, ми використовуємо псевдоклас :root
у верхній частині нашого CSS-файлу і додаємо до імені змінної префікс --
. Наприклад, давайте визначимо змінну --blue-color
зі значенням #3f42f3
у нашому блоці :root
:
Оголосивши змінну, ми можемо застосувати її до будь-якої властивості CSS за допомогою функції var()
. Наприклад, щоб присвоїти властивості color
елемента <h1>
значення нашої змінної --blue-color
, ми можемо написати
Давайте об'єднаємо знання про оголошення та використання змінних у наступному прикладі:
index
index
index
У цьому прикладі ми визначаємо дві змінні, --background-color
і --text-color
, і застосовуємо їх до властивостей background-color
і color
відповідно. Змінюючи значення цих змінних, ми можемо легко оновити кольори по всій таблиці стилів.
Перевизначення властивостей
Іноді нам потрібно перевизначити певні властивості в CSS, щоб досягти бажаного стилю. Це можна зробити, оголосивши однойменну властивість у вкладеному селекторі та присвоївши їй нове значення.
Розглянемо наступний приклад світлофора з різними кольорами сигналів:
index
index
index
Орієнтуючись на конкретні класи сигналів, ми можемо точно налаштувати колір для кожного сигналу, зберігаючи при цьому загальні стилі, визначені в базовому селекторі .signal
.
Примітка
Насамкінець, змінні CSS забезпечують гнучкість і зручність підтримки, дозволяючи динамічно оновлювати дизайн, а перевизначення властивостей дає змогу тонко налаштовувати стилі та досягати бажаних візуальних ефектів.
Дякуємо за ваш відгук!