2.1 Khai báo biến CSS
Biến CSS, còn được gọi là Custom Properties, cho phép bạn định nghĩa các giá trị có thể tái sử dụng ở nhiều phần khác nhau của mã CSS. Chúng giúp quản lý style đơn giản hơn và tăng tính linh hoạt.
Biến CSS được khai báo với hai dấu gạch ngang (--) và có thể được đặt trong bất kỳ selector nào. Tuy nhiên, để đảm bảo các biến có thể truy cập trong toàn bộ tài liệu, chúng thường được xác định trong selector gốc :root.
Cú pháp:
selector {
--tên-biến: giá trị;
}
Ví dụ:
Trong ví dụ này, bốn biến được khai báo: --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;
}
Sử dụng biến CSS
Để sử dụng giá trị của biến, bạn dùng hàm var(), hàm này nhận tên biến làm tham số.
Cú pháp:
selector {
thuộc tính: var(--tên-biến);
}
Ví dụ:
Trong ví dụ này, các giá trị biến được sử dụng để đặt màu nền, màu văn bản, kích thước font và màu của liên kết.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Ví dụ sử dụng biến CSS
Ví dụ 1: Sử dụng biến cơ bản
: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>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
</body>
Kết quả:
- Phông nền trang sẽ có màu xám nhạt
- Văn bản sẽ có màu xám đậm
- Kích thước font sẽ là 16 pixel
- Các liên kết sẽ có màu xanh dương
Ví dụ 2: Ghi đè biến trong các thành phần riêng lẻ
Biến CSS có thể được ghi đè cho các phần tử hoặc thành phần riêng lẻ, cung cấp độ linh hoạt trong việc style:
: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; /* Ghi đè biến */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>This is the header.</p>
</div>
<div class="footer">
<p>This is the footer.</p>
</div>
Kết quả:
- Phông nền của tiêu đề sẽ có màu xanh dương, văn bản sẽ có màu xám nhạt
- Phông nền của chân trang sẽ có màu đỏ (biến đã được ghi đè), văn bản sẽ có màu xám nhạt
Ví dụ 3: Sử dụng biến kết hợp với các giá trị khác
Biến CSS có thể được kết hợp với các giá trị và hàm CSS khác:
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>This is a container with padding and margin.</p>
</div>
Kết quả:
- Container sẽ có các khoảng đệm và khoảng cách ngoài được xác định bởi các biến
2.3 Sử dụng biến CSS trong JavaScript
Ví dụ sử dụng biến CSS trong JavaScript
Biến CSS có thể được thay đổi động bằng JavaScript, điều này cho phép điều chỉnh style theo thời gian thực:
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>This is a paragraph.</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');
}
});
Giải thích:
Khi bấm nút, các giá trị của biến --bg-color và --text-color sẽ thay đổi, dẫn đến việc thay đổi màu nền và màu văn bản của trang.
GO TO FULL VERSION