Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Ефективна Робота з CSS | Вступ до CSS
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

bookЕфективна Робота з CSS

Змінні

Змінні CSS, також відомі як користувацькі властивості CSS, надають можливість визначати багаторазові значення в нашому CSS-коді. Використовуючи змінні, ми можемо створювати динамічні та гнучкі дизайни, які легше підтримувати та оновлювати.

Щоб оголосити змінну, ми використовуємо псевдоклас :root у верхній частині нашого CSS-файлу і додаємо до імені змінної префікс --. Наприклад, давайте визначимо змінну --blue-color зі значенням #3f42f3 у нашому блоці :root:

Оголосивши змінну, ми можемо застосувати її до будь-якої властивості CSS за допомогою функції var(). Наприклад, щоб присвоїти властивості color елемента <h1> значення нашої змінної --blue-color, ми можемо написати

Давайте об'єднаємо знання про оголошення та використання змінних у наступному прикладі:

html

index

css

index

js

index

copy

У цьому прикладі ми визначаємо дві змінні, --background-color і --text-color, і застосовуємо їх до властивостей background-color і color відповідно. Змінюючи значення цих змінних, ми можемо легко оновити кольори по всій таблиці стилів.

Перевизначення властивостей

Іноді нам потрібно перевизначити певні властивості в CSS, щоб досягти бажаного стилю. Це можна зробити, оголосивши однойменну властивість у вкладеному селекторі та присвоївши їй нове значення.

Розглянемо наступний приклад світлофора з різними кольорами сигналів:

html

index

css

index

js

index

copy

Орієнтуючись на конкретні класи сигналів, ми можемо точно налаштувати колір для кожного сигналу, зберігаючи при цьому загальні стилі, визначені в базовому селекторі .signal.

Примітка

Насамкінець, змінні CSS забезпечують гнучкість і зручність підтримки, дозволяючи динамічно оновлювати дизайн, а перевизначення властивостей дає змогу тонко налаштовувати стилі та досягати бажаних візуальних ефектів.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 1. Розділ 9
some-alt