Thí dụ
Nhập bảng kiểu "điều hướng.css" vào bảng kiểu hiện tại:
@Import "điều hướng.css"; / * Sử dụng chuỗi */
hoặc
@Import url ["điều hướng.css"]; / * Sử dụng URL */
Thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Quy tắc @import
cho phép bạn nhập một bảng kiểu vào một bảng kiểu khác.
Quy tắc @import
phải ở đầu tài liệu [nhưng sau bất kỳ khai báo @Charet nào].
Quy tắc @import
cũng hỗ trợ các truy vấn truyền thông, vì vậy bạn có thể cho phép nhập không phụ thuộc vào phương tiện truyền thông.
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
@nhập khẩu | 1.0 | 5.5 | 1.0 | 1.0 | 3.5 |
CSS Cú pháp
@Import URL | Danh sách chuỗi MediaQueries;
Giá trị tài sản
url | chuỗi | URL hoặc chuỗi đại diện cho vị trí của tài nguyên để nhập. URL có thể là tuyệt đối hoặc tương đối |
Danh sách các phương tiện truyền thông | Một danh sách các truy vấn truyền thông được phân tách bằng dấu phẩy điều chỉnh ứng dụng các quy tắc CSS được xác định trong URL được liên kết |
Nhiều ví dụ hơn
Thí dụ
Nhập bảng kiểu "printstyle.css" chỉ khi phương tiện được in:
@Import "printstyle.csss" in;
Thí dụ
Nhập bảng kiểu "Mobstyle.css" chỉ khi phương tiện truyền thông là màn hình và chế độ xem là tối đa 768 pixel:
@Import "Mobstyle.csss" và [Max-Width: 768px];
Các quy tắc AT AT @import
được sử dụng để nhập các quy tắc kiểu từ các kiểu dáng khác.@import
CSS at-rule is used to import style rules from other stylesheets.Cú pháp
@import url;
@import url list-of-media-queries;
@import url supports[ supports-query ];
@import url supports[ supports-query ] list-of-media-queries;
@import url layer;
@import url layer[ layer-name ];
@import url layer[ layer-name ] list-of-media-queries;
@import url layer[ layer-name ] supports[ supports-query ] list-of-media-queries;
where:
URLLà một hàm
@import [ | ] [ supports[ [ | ] ] ]? ? ;1,
@import [ | ] [ supports[ [ | ] ] ]? ? ;2 hoặc
@import [ | ] [ supports[ [ | ] ] ]? ? ;3 đại diện cho vị trí của tài nguyên để nhập. URL có thể là tuyệt đối hoặc tương đối.
Là một danh sách các truy vấn truyền thông được phân tách bằng dấu phẩy, trong đó chỉ định các điều kiện phụ thuộc vào phương tiện để áp dụng các quy tắc CSS được xác định trong URL được liên kết. Nếu trình duyệt không hỗ trợ bất kỳ truy vấn nào trong số này, nó không tải tài nguyên được liên kết.
supports-queryLà
@import [ | ] [ supports[ [ | ] ] ]? ? ;4 hoặc
@import [ | ] [ supports[ [ | ] ] ]? ? ;5. Nếu các điều kiện nhập không khớp, các quy tắc trong bảng kiểu nhập khẩu không áp dụng.layer-name
Là tên của một lớp tầng mà nội dung của tài nguyên được liên kết được nhập.
Sự mô tả
Các quy tắc đã nhập phải đến trước tất cả các loại quy tắc khác, ngoại trừ các quy tắc và lớp tạo ra các câu lệnh
@import [ | ] [ supports[ [ | ] ] ]? ? ;7. Quy tắc
@import
không phải là một tuyên bố lồng nhau. Do đó, nó không thể được sử dụng bên trong các nhóm điều kiện tại các quy tắc.Để các tác nhân người dùng có thể tránh truy xuất tài nguyên cho các loại phương tiện không được hỗ trợ, các tác giả có thể chỉ định các điều kiện nhập phụ thuộc phương tiện. Các nhập khẩu có điều kiện này chỉ định các truy vấn truyền thông được phân tách bằng dấu phẩy sau URL. Trong trường hợp không có bất kỳ truy vấn truyền thông nào, nhập khẩu là vô điều kiện. Chỉ định
@import [ | ] [ supports[ [ | ] ] ]? ? ;9 cho
@import "custom.css";
@import url["chrome://communicator/skin/"];
0 có tác dụng tương tự.Quy tắc @import
cũng có thể được sử dụng để tạo lớp Cascade bằng cách nhập các quy tắc từ tài nguyên được liên kết. Các quy tắc cũng có thể được nhập vào một lớp tầng hiện có. Từ khóa
@import "custom.css";
@import url["chrome://communicator/skin/"];
2 hoặc hàm @import "custom.css";
@import url["chrome://communicator/skin/"];
3 được sử dụng với @import
cho mục đích này. Khai báo trong các quy tắc phong cách từ các bảng kiểu nhập khẩu tương tác với tầng như thể chúng được viết theo nghĩa đen vào bảng kiểu tại điểm nhập khẩu.Cú pháp chính thức
@import [ | ] [ supports[ [ | ] ] ]? ? ;
Ví dụ
Nhập các quy tắc CSS
@import "custom.css";
@import url["chrome://communicator/skin/"];
Hai ví dụ ở trên cho thấy cách chỉ định URL là
@import [ | ] [ supports[ [ | ] ] ]? ? ;1 và là hàm
@import [ | ] [ supports[ [ | ] ] ]? ? ;3.
Nhập các quy tắc CSS một cách có điều kiện
@import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
Các quy tắc @import
trong các ví dụ trên cho thấy các điều kiện phụ thuộc vào phương tiện sẽ cần phải đúng trước khi các quy tắc CSS được liên kết được áp dụng.
Vì vậy, ví dụ, quy tắc @import
cuối cùng sẽ tải bảng kiểu
@import "custom.css";
@import url["chrome://communicator/skin/"];
9 nếu tác nhân người dùng hỗ trợ @import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
0. Truy vấn phương tiện, sử dụng toán tử @import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
1, chỉ định thêm để áp dụng các quy tắc kiểu chỉ cho một thiết bị màn hình với chiều rộng chế độ xem tối đa là 400px.Nhập các quy tắc CSS vào một lớp tầng
@import "theme.css" layer[utilities];
Trong ví dụ trên, một lớp tầng có tên
@import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
2 được tạo và nó sẽ bao gồm các quy tắc từ bảng kiểu nhập khẩu @import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
3.@import url[headings.css] layer[default];
@import url[links.css] layer[default];
@layer default {
audio[controls] {
display: block;
}
}
Trong ví dụ trên, các quy tắc trong các kiểu dáng theo kiểu
@import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
4 và @import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
5 trong cùng một lớp với quy tắc @import url["fineprint.css"] print;
@import url["bluish.css"] print, screen;
@import "common.css" screen;
@import url["landscape.css"] screen and [orientation: landscape];
@import url["narrow.css"] supports[display: flex] screen and [max-width: 400px];
6.@import "theme.css" layer[];
@import "style.css" layer;
Đây là một ví dụ về việc tạo hai lớp tầng ẩn danh riêng biệt và nhập các quy tắc được liên kết vào từng loại một cách riêng biệt. Một lớp tầng được tuyên bố mà không có tên là một lớp tầng ẩn danh. Các lớp tầng ẩn danh được hoàn thiện khi được tạo: chúng không cung cấp bất kỳ phương tiện nào để sắp xếp lại hoặc thêm các kiểu và chúng không thể được tham chiếu từ bên ngoài.
Thông số kỹ thuật
CSS CASCADING VÀ KIỂM TRA CẤP 5 # AT-IT-IN # at-import |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt