2.1 CSS dəyişənlərinin elan edilməsi
CSS dəyişənləri, həmçinin Custom Properties (Fərdi Xüsusiyyətlər) kimi də tanınır, müxtəlif CSS kod hissələrində yenidən istifadə edilə biləcək dəyərləri müəyyən etməyə imkan verir. Onlar stillərin idarə olunmasını əhəmiyyətli dərəcədə asanlaşdırır və onların elastikliyini artırır.
CSS dəyişənləri cüt tire (--) vasitəsilə elan edilir və istənilən seçicidə təyin edilə bilər. Ancaq dəyişənlərin bütün sənəd üçün əlçatanlığını təmin etmək məqsədilə, onları tez-tez kök seçicidə :root müəyyən edirlər.
Sintaksis:
seçici {
--dəyişən-adı: dəyər;
}
Nümunə:
Bu nümunədə dörd dəyişən elan edilir: --main-bg-color, --main-text-color, --primary-color və --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
CSS dəyişənlərinin istifadəsi
Dəyişən dəyərinin istifadəsi üçün var() funksiyası istifadə olunur ki, o, dəyişənin adını arqument kimi qəbul edir.
Sintaksis:
seçici {
xüsusiyyət: var(--dəyişən-adı);
}
Nümunə:
Bu nümunədə dəyişənlərin dəyərləri fon rəngi, mətn rəngi, şrift ölçüsü və linklərin rəngini təyin etmək üçün istifadə olunur.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 CSS-dəyərlərinin istifadəsi nümunələri
Nümunə 1: Dəyərlərin əsas istifadəsi
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>Bu, bir abzasdır və <a href="#">Example.com</a>-a keçid edir.</p>
</body>
Nəticə:
- Səhifənin fonu açıq boz olacaq
- Mətn tünd boz olacaq
- Şrift ölçüsü 16 piksel olacaq
- Linklər mavi rəngdə olacaq
Nümunə 2: Ayrı komponentlərdə dəyərlərin yenidən təyin edilməsi
CSS-dəyərləri ayrı elementlər və ya komponentlər üçün yenidən təyin edilə bilər ki, bu da stilizasiyada elastikliyi təmin edir:
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Dəyişənin yenidən təyinatı */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>Bu, başlıqdır.</p>
</div>
<div class="footer">
<p>Bu, altlıqdır.</p>
</div>
Nəticə:
- Başlığın fonu mavi rəngdə olacaq, mətn isə açıq boz olacaq
- Altlığın fonu qırmızı rəngdə olacaq (yenidən təyin edilmiş dəyişən), mətn isə açıq boz olacaq
Nümunə 3: Dəyərlərin digər dəyərlərlə kombinasiya edilməsi
CSS-dəyərləri digər dəyərlər və CSS funksiyaları ilə kombinasiya edilə bilər:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>Bu, padding və margin ilə bir konteynerdir.</p>
</div>
Nəticə:
- Konteyner dəyişənlər ilə təyin edilmiş padding və margin-ə sahib olacaq
2.3 CSS-də dəyişənlərin JavaScript-də istifadəsi
CSS-də dəyişənlərin JavaScript-də istifadəsinə nümunə
CSS-də dəyişənlər JavaScript vasitəsilə dinamik olaraq dəyişdirilə bilər ki, bu da stilləri real vaxt rejimində dəyişdirməyə imkan verir:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Tema Dəyiş</button>
<p>Bu bir paraqrafdır.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
İzah:
Düyməyə basıldıqda --bg-color və --text-color dəyişənlərinin dəyərləri dəyişdirilir ki, bu da səhifədə arxa fonun və mətnin rənginin dəyişməsinə səbəb olur.
GO TO FULL VERSION