Hướng dẫn toàn diện về CSS @ Rules cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của CSS @ Rules. Đừng lo lắng nếu bạn chưa từng nghe đến chúng trước đây - đến cuối bài hướng dẫn này, bạn sẽ sử dụng những công cụ mạnh mẽ này như một chuyên gia!

CSS @ Rules là gì?

Trước khi chúng ta bắt đầu, hãy bắt đầu từ những điều cơ bản. CSS @ Rules (phát âm là "at-rules") là những hướng dẫn đặc biệt giúp CSS có thêm sức mạnh. Chúng cho phép chúng ta xác định cách các样式 của mình hành xử trong các tình huống khác nhau, tạo animation, và thậm chí định nghĩa các thuộc tính tùy chỉnh. Hãy nghĩ về chúng như là gia vị bí mật giúp trang web của bạn trở nên thực sự sống động và hấp dẫn!

Cú pháp

Cú pháp cho @ Rules rất đơn giản. Chúng luôn bắt đầu với ký tự '@', tiếp theo là một идентификатор (tên của quy tắc), và sau đó là một khối các khai báo hoặc một dấu chấm phẩy. Dưới đây là cấu trúc tổng quát:

@rule-name {
/* nội dung quy tắc */
}

Or cho một số quy tắc không yêu cầu khối:

@rule-name value;

Đơn giản phải không? Bây giờ, hãy cùng khám phá một số @ Rules phổ biến và hữu ích nhất!

Các loại @ Rules

Có rất nhiều @ Rules trong CSS, mỗi loại có mục đích đặc biệt của riêng nó. Dưới đây là bảng tóm tắt một số quan trọng nhất:

@ Rule	Mục đích
@media	Áp dụng các style dựa trên các đặc điểm của thiết bị
@keyframes	Định nghĩa các chuỗi animation
@font-face	Cho phép sử dụng font tùy chỉnh
@import	Nhập style từ các file CSS khác
@page	Định nghĩa các quy tắc cụ thể cho việc in ấn
@supports	Áp dụng style dựa trên sự hỗ trợ của tính năng trình duyệt
@charset	Xác định mã hóa ký tự cho file stylesheet

Bây giờ, hãy cùng đi sâu hơn vào một số quy tắc với các ví dụ!

CSS @ Rules - Ví dụ @page

Quy tắc @page đặc biệt hữu ích khi bạn làm việc với các bố cục in. Nó cho phép bạn xác định kích thước, lề và các thuộc tính khác của một trang in.

@page {
size: A4;
margin: 1cm;
}

@page :first {
margin-top: 2cm;
}

Trong ví dụ này, chúng ta đang đặt tất cả các trang có kích thước A4 và lề 1cm. Sau đó, chúng ta đặt lề trên đặc biệt 2cm cho trang đầu tiên. Hãy tưởng tượng bạn đang tạo một bản sơ yếu lý lịch đẹp - quy tắc này đảm bảo rằng nó trông đẹp như trên màn hình khi in ra!

CSS @ Rules - Ví dụ @keyframes

Bây giờ, hãy thêm một chút sống động với animation! Quy tắc @keyframes là vé của bạn để tạo các animation mượt mà và bắt mắt trên trang web của bạn.

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.bouncy-button {
animation: bounce 1s infinite;
}

Mã này tạo một animation đơn giản. Nút sẽ di chuyển lên 20 pixel và sau đó trở lại, lặp lại vô hạn. Đó như thể cho nút một tấm đệm nhỏ!

Để sử dụng animation này, bạn sẽ áp dụng nó cho một phần tử như sau:

<button class="bouncy-button">Nhấn tôi!</button>

CSS @ Rules - Ví dụ @property

Quy tắc @property là một bổ sung mới trong CSS, cho phép bạn định nghĩa và sử dụng các thuộc tính tùy chỉnh (còn được gọi là CSS variables) với các kiểu cụ thể, hành vi kế thừa, và giá trị ban đầu.

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

.my-element {
background-color: var(--main-color);
}

Trong ví dụ này, chúng ta đang định nghĩa một thuộc tính tùy chỉnh叫做 --main-color. Nó được đặt là giá trị màu sắc, không kế thừa từ phần tử cha, và có giá trị ban đầu là đỏ. Điều này cho chúng ta thêm quyền kiểm soát và linh hoạt khi làm việc với CSS variables.

CSS @ Rules - Danh sách các quy tắc

Mặc dù chúng ta đã xem xét một số @ Rules phổ biến, nhưng vẫn còn nhiều quy tắc khác để khám phá. Dưới đây là danh sách đầy đủ hơn:

@ Rule	Mô tả
@charset	Xác định mã hóa ký tự cho file stylesheet
@import	Nhập style từ các file CSS khác
@namespace	Khai báo một tiền tố không gian tên
@media	Áp dụng style dựa trên các đặc điểm của thiết bị
@supports	Áp dụng style dựa trên sự hỗ trợ của tính năng trình duyệt
@document	Áp dụng style dựa trên các đặc điểm của tài liệu (đã lỗi thời)
@font-face	Cho phép sử dụng font tùy chỉnh
@keyframes	Định nghĩa các chuỗi animation
@viewport	Điều khiển các đặc điểm của viewport (thường được thay thế bằng thẻ meta viewport)
@page	Định nghĩa các quy tắc cụ thể cho việc in ấn
@counter-style	Định nghĩa các style đếm
@font-feature-values	Định nghĩa các giá trị có tên cho các tính năng OpenType font
@property	Định nghĩa các thuộc tính CSS tùy chỉnh

Mỗi quy tắc này mở ra các khả năng mới cho việc styling và kiểm soát các trang web của bạn. Khi bạn tiếp tục hành trình CSS của mình, bạn sẽ thấy mình sử dụng các công cụ mạnh mẽ này ngày càng thường xuyên hơn.

Nhớ rằng, chìa khóa để thành thạo CSS @ Rules là thực hành. Đừng ngại thử nghiệm và thử các kết hợp khác nhau. Ai biết được? Bạn có thể tạo ra xu hướng thiết kế web tiếp theo!

Chúc các bạn lập trình vui vẻ và stylesheet của bạn luôn không có lỗi!

Credits: Image by storyset