CSS - Tính t的自定义属性：初学者的友好指南

Xin chào các pháp sư CSS tương lai! ? Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của CSS Custom Properties. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - Tôi sẽ là hướng dẫn viên thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ làm cho bạn bè của mình ngạc nhiên với siêu năng lực CSS của bạn!

CSS Custom Properties là gì?

Hãy bắt đầu từ cơ bản. CSS Custom Properties, còn được gọi là CSS Variables, giống như những hộp ma thuật chứa các giá trị bạn có thể sử dụng trong suốt stylesheet của mình. Hãy tưởng tượng chúng như những hộp nhỏ nơi bạn có thể lưu trữ màu sắc yêu thích, kích thước, hoặc bất kỳ giá trị CSS nào khác.

Tại sao sử dụng Custom Properties?

1. Tái sử dụng: Viết một lần, sử dụng ở mọi nơi!
2. Linh hoạt: Thay đổi giá trị ở một nơi, thấy thay đổi ở mọi nơi.
3. Dễ bảo trì: Dễ dàng cập nhật và quản lý phong cách của bạn.

Cú pháp: Làm thế nào để khai báo và sử dụng Custom Properties

Hãy cùng lặn vào một chút mã! Dưới đây là cách bạn khai báo một thuộc tính tùy chỉnh:

:root {
--my-favorite-color: #ff6347;
}

Ở đây, chúng ta đang tạo một thuộc tính tùy chỉnh叫做 --my-favorite-color và cấp给它 giá trị của một màu đỏ cà chua可爱. Selector :root có nghĩa là biến này có thể sử dụng khắp toàn bộ tài liệu của chúng ta.

Để sử dụng thuộc tính này, chúng ta sử dụng hàm var():

.tomato-text {
color: var(--my-favorite-color);
}

Bây giờ, bất kỳ phần tử nào có class tomato-text sẽ có màu đỏ cà chua yêu thích của chúng ta!

Giá trị có thể lưu trữ: Bạn có thể lưu trữ gì trong Custom Properties?

Các thuộc tính tùy chỉnh rất linh hoạt. Bạn có thể lưu trữ hầu như bất kỳ giá trị CSS nào trong chúng:

Loại giá trị	Ví dụ
Màu sắc	--main-color: #3498db;
Độ dài	--spacing: 20px;
Chuỗi	--font-family: 'Arial', sans-serif;
Số	--z-index: 100;
Tính toán	--width: calc(100% - 20px);

Áp dụng cho: Bạn có thể sử dụng Custom Properties ở đâu?

Câu trả lời ngắn gọn? Ở mọi nơi! Bạn có thể sử dụng các thuộc tính tùy chỉnh trong bất kỳ giá trị thuộc tính CSS nào. Hãy cùng xem một số ví dụ:

:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--main-font: 'Helvetica', sans-serif;
--spacing: 20px;
}

.button {
background-color: var(--primary-color);
color: white;
font-family: var(--main-font);
padding: var(--spacing);
margin-bottom: var(--spacing);
}

.section {
border: 2px solid var(--secondary-color);
}

CSS Custom Properties - Đặt giá trị

Bạn có thể đặt giá trị thuộc tính tùy chỉnh trong CSS, nhưng bạn có biết rằng bạn cũng có thể đặt chúng trong JavaScript? Điều này mở ra một thế giới của các khả năng styling động!

// Đặt giá trị thuộc tính tùy chỉnh bằng JavaScript
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

CSS Custom Properties - Tách màu

Đây là một mẹo hay: Bạn có thể tách màu thành các thành phần và sử dụng các thuộc tính tùy chỉnh cho từng phần!

:root {
--red: 255;
--green: 99;
--blue: 71;
}

.tomato-background {
background-color: rgb(var(--red), var(--green), var(--blue));
}

CSS Custom Properties - Bóng đổ

Các thuộc tính tùy chỉnh làm cho các thuộc tính phức tạp như box-shadow dễ quản lý hơn:

:root {
--shadow-color: rgba(0, 0, 0, 0.2);
--shadow-offset-x: 5px;
--shadow-offset-y: 5px;
--shadow-blur: 10px;
}

.shadowed-box {
box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-color);
}

CSS Custom Properties -Gradient

Gradient trở nên dễ dàng với các thuộc tính tùy chỉnh:

:root {
--gradient-start: #3498db;
--gradient-end: #2ecc71;
}

.gradient-background {
background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
}

CSS Custom Properties - Lưới

Các thuộc tính tùy chỉnh có thể làm cho các bố cục lưới linh hoạt hơn:

:root {
--grid-columns: 3;
--grid-gap: 20px;
}

.grid-container {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--grid-gap);
}

CSS Custom Properties - Chuyển đổi

Các chuyển đổi trở nên dễ đọc và dễ bảo trì hơn:

:root {
--rotate-angle: 45deg;
--scale-factor: 1.2;
}

.transformed-element {
transform: rotate(var(--rotate-angle)) scale(var(--scale-factor));
}

CSS Custom Properties - Kết hợp các loại đơn vị

Bạn thậm chí có thể kết hợp các thuộc tính tùy chỉnh với các đơn vị:

:root {
--base-size: 10;
}

.sized-element {
width: calc(var(--base-size) * 1px);
height: calc(var(--base-size) * 2px);
}

CSS Custom Properties - Sử dụng CASCADE

Các thuộc tính tùy chỉnh tuân theo cascade CSS, có nghĩa là bạn có thể ghi đè chúng cho các phần tử cụ thể:

:root {
--text-color: black;
}

.dark-theme {
--text-color: white;
}

p {
color: var(--text-color);
}

CSS Custom Properties - :root

Chúng ta đã sử dụng :root rất nhiều. Đây là một伪类 đặc biệt đại diện cho phần tử gốc của cây tài liệu, thường là phần tử <html>. Đây là một nơi tuyệt vời để xác định các thuộc tính tùy chỉnh toàn cục.

CSS Custom Properties - Kết hợp với !important

Các thuộc tính tùy chỉnh có thể kết hợp với !important:

.override-color {
color: var(--text-color) !important;
}

CSS Custom Properties - Fallbacks

Bạn có thể cung cấp các giá trị thay thế trong trường hợp một thuộc tính tùy chỉnh không được xác định:

.fallback-example {
color: var(--undefined-color, blue);
}

CSS Custom Properties - @property

Quy tắc @property là một tính năng mới thú vị cho phép bạn xác định các đặc điểm của các thuộc tính tùy chỉnh:

@property --my-color {
syntax: '<color>';
inherits: false;
initial-value: #c0ffee;
}

Điều này xác định một thuộc tính tùy chỉnh --my-color phải là giá trị màu hợp lệ, không kế thừa từ phần tử cha, và có giá trị khởi tạo là #c0ffee.

Và đây là tất cả, các học viên yêu quý của tôi! Chúng ta đã bao quát rất nhiều nội dung hôm nay, từ cơ bản của CSS Custom Properties đến một số kỹ thuật tiên tiến. Nhớ rằng, chìa khóa để thành thạo các khái niệm này là thực hành. Vậy hãy đi lên, thử nghiệm và tạo ra những thiết kế tuyệt vời với siêu năng lực CSS mới của bạn!

Đến gặp lại lần sau, chúc các bạn lập trình vui vẻ! ??‍??‍?

Credits: Image by storyset