Chúng ta có thể nhập các tệp CSS bổ sung bên trong một khai báo CSS khác. Quy tắc @import được dùng cho mục đích này vì nó liên kết một bảng định kiểu trong tài liệu. Điều này thường dùng khi một bảng định kiểu phụ thuộc vào bảng khác. Nó được chỉ định ở đầu tài liệu sau khai báo @charset bên trong <head>.
Cú pháp
Cú pháp của quy tắc @import như sau:
@import /*url hoặc danh sách-truy-vấn-phương-tiện*/
Các truy vấn phương tiện có thể là các câu phức hợp chỉ định hành vi của tài liệu trong các phương tiện khác nhau.
Ví dụ
Các ví dụ sau triển khai quy tắc @import:
Tài liệu HTML:
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(style.css); body { background-color: honeydew; } </style> </head> <body> <p>Đây là đoạn văn demo một. </p> <p class="two">Đây là đoạn văn demo hai.</p> <p>Đây là đoạn văn demo ba</p> </body> </html>
Tài liệu CSS: style.css
p { color: navy; font-style: italic; } .two { color: darkgreen; font-size: 24px; }
Kết quả
Đoạn mã trên tạo ra kết quả sau:
Ví dụ khác
Tài liệu HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div></div> </body> </html>
Tài liệu CSS:
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; }
Kết quả
Đoạn mã trên cho kết quả sau:
