Hướng dẫn can i use import in css file? - tôi có thể sử dụng nhập trong tệp css không?

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:

Là một hàm

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

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.

Là

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

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( [  |  ] ) ]?
        ? ;

Để 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( [  |  ] ) ]?
        ? ;

@import "custom.css";
@import url("chrome://communicator/skin/");

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/");

@import "custom.css";
@import url("chrome://communicator/skin/");

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( [  |  ] ) ]?
        ? ;

@import [  |  ]
        [ supports( [  |  ] ) ]?
        ? ;

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/");

@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);

@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);

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);

@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);

@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);

@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);

@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);

@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.

Xem thêm