Tổng quan các At-rules (Quy tắc @) quan trọng trong CSS
CSS có các quy tắc đặc biệt bắt đầu bằng ký tự @ gọi là **at-rules**. Dưới đây là 4 quy tắc cốt lõi:
1. @import - Nhập stylesheet khác
@import url("reset.css");
@import url("components.css") screen;
@import url("print.css") print;Lưu ý: Phải đặt ở đầu file, trước mọi rule khác. Xem chi tiết ID 1003062456.
2. @charset - Khai báo encoding
@charset "UTF-8";- Phải là **dòng đầu tiên tuyệt đối** trong file CSS (không có ký tự nào trước, kể cả khoảng trắng/BOM)
- Chỉ dùng trong file CSS الخارجية (external), không dùng trong <style> hoặc style attribute
- UTF-8 là chuẩn khuyến nghị cho đa ngôn ngữ
3. @font-face - Nhúng font tùy chỉnh
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}Cho phép sử dụng font không cài trên máy user. Xem chi tiết ID 1003062430.
4. !important - Ghi đè ưu tiên
.critical { color: red !important; }Buộc áp dụng khai báo, bỏ qua specificity. Dùng thận trọng. Xem chi tiết ID 1003062458.
Các at-rules quan trọng khác
| At-rule | Chức năng |
|---|---|
@media |
Responsive design, media queries |
@keyframes |
Định nghĩa animation |
@supports |
Feature queries (kiểm tra hỗ trợ CSS) |
@property |
Đăng ký custom property (CSS Houdini) |
@layer |
Cascade layers (CSS Layers - mới) |
@container |
Container queries (responsive theo container) |
@page |
Định dạng trang in (print) |
@counter-style |
Tùy biến danh sách số (list-style) |
Thứ tự viết file CSS chuẩn
@charset "UTF-8"; /* 1. Encoding - dòng 1 */
@import ...; /* 2. Imports */
@layer reset, base, ...; /* 3. Cascade layers (nếu dùng) */
:root { --vars: ...; } /* 4. Custom properties */
@font-face { ... } /* 5. Fonts */
@keyframes ... { } /* 6. Animations */
@supports ... { } /* 7. Feature queries */
.selector { ... } /* 8. Rules thông thường */
@media ... { } /* 9. Media queries (cuối file hoặc nhóm theo component) */