Làm cách nào để liên kết một tệp với một tệp khác trong css?

Question

Khi bạn đang làm việc với HTML, kiểu và tập lệnh và bạn đang làm việc trên một dự án lớn, tôi thực sự khuyên bạn nên tách các tệp trong các thư mục khác nhau. Có tất cả các tệp CSS của bạn trong một thư mục và tất cả các tệp JavaScript của bạn trong một thư mục khác. Làm tương tự cho các tệp HTML của bạn

Nội dung chính Show

Sự miêu tả
cú pháp chính thức
Nhập quy tắc CSS
Nhập quy tắc CSS có điều kiện
Nhập các quy tắc CSS vào một lớp xếp tầng

Để liên kết tệp CSS với tệp HTML của bạn, bạn phải viết tập lệnh tiếp theo trên tệp HTML của mình bên trong thẻ đầu

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

6

Nếu bạn có tệp CSS trong cùng thư mục với tệp HTML của mình, bạn chỉ cần viết tên tệp CSS của mình, như thế này (Tôi khuyên bạn nên đặt các tệp trong các thư mục khác nhau được liên kết theo loại)

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

7

Nếu bạn đang làm việc với chủ đề bootstrap, bạn có thể thêm liên kết của tệp

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

8

Để liên kết tệp Js với HTML của bạn, bạn chỉ cần thêm nguồn của tập lệnh bên trong thẻ body hoặc bên ngoài;

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

9

Nếu bạn có tệp Js trong cùng thư mục với tệp HTML của mình, bạn chỉ cần viết tên tệp Js của mình, như thế này (Tôi khuyên bạn nên đặt các tệp trong các thư mục khác nhau được liên kết theo loại)

Quy tắc tại

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 CSS được sử dụng để nhập quy tắc kiểu từ các biểu định kiểu hợp lệ khác. Quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 phải được xác định ở đầu biểu định kiểu, trước bất kỳ quy tắc nào khác (ngoại trừ @charset và @layer) và khai báo kiểu, nếu không nó sẽ bị bỏ qua

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;

ở đâu

url

Hàm

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

2,

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 hoặc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

1 đại diện cho vị trí của tài nguyên cần nhập. URL có thể là tuyệt đối hoặc tương đối

danh sách truy vấn phương tiện truyền thông

Là một danh sách các truy vấn phương tiện được phân tách bằng dấu phẩy, danh sách này 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ó sẽ không tải tài nguyên được liên kết

truy vấn hỗ trợ

Là một

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

2 hoặc một

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

3. Nếu các điều kiện nhập không khớp, các quy tắc trong biểu định kiểu đã nhập sẽ không áp dụng

tên lớp

Là tên của tầng xếp tầng mà nội dung của tài nguyên được liên kết được nhập vào

Sự miêu tả

Quy tắc đã nhập phải xuất hiện trước tất cả các loại quy tắc khác, ngoại trừ quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

4 và lớp tạo câu lệnh

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

5. Quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 không phải là một câu lệnh lồng nhau. Do đó, nó không thể được sử dụng bên trong quy tắc nhóm có điều kiện

Để 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ợ, tác giả có thể chỉ định các điều kiện nhập phụ thuộc vào phương tiện. Các lần nhập có điều kiện này chỉ định các truy vấn phương tiện đượ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 phương tiện nào, việc nhập là vô điều kiện. Chỉ định

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

7 cho

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

8 cũng có tác dụng tương tự

Quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 cũng có thể được sử dụng để tạo lớp xếp tầng bằng cách nhập 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 tầng tầng hiện có. Từ khóa

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

0 hoặc hàm

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

1 được sử dụng với

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 cho mục đích này. Các khai báo trong quy tắc kiểu từ biểu định kiểu đã nhập tương tác với tầng như thể chúng được viết theo nghĩa đen vào biểu định kiểu tại thời điểm nhập

cú pháp chính thức

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

ví dụ

Nhập 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 dưới dạng hàm

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

2 và hàm

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

1

Nhập quy tắc CSS có điều kiện

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

4

Các quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 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 cần phải đúng trước khi áp dụng các quy tắc CSS được liên kết

Vì vậy, ví dụ, quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

0 cuối cùng sẽ tải biểu định kiểu

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

7 nếu tác nhân người dùng hỗ trợ

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

8. Truy vấn phương tiện, sử dụng toán tử

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

9, chỉ định thêm để chỉ áp dụng quy tắc kiểu cho thiết bị màn hình có chiều rộng khung nhìn tối đa là 400px

Nhập các quy tắc CSS vào một lớp xếp tầng

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

8

Trong ví dụ trên, một tầng tầng có tên là

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

40 được tạo và nó sẽ bao gồm các quy tắc từ biểu định kiểu đã nhập

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

41

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

1

Trong ví dụ trên, các quy tắc trong biểu định kiểu

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

42 và

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

43 xếp tầng trong cùng một lớp với quy tắc

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

44

@import = 
  @import [  |  ] [ layer | layer(  ) ]?  ;  

 = 
  url(  * )  |
  src(  * )  

 = 
   [ '.'  ]*  

 = 
  [ supports( [  |  ] ) ]? ?  

 = 
  not                             |
   [ and  ]*  |
   [ or  ]*   

 = 
  (  )  |
          |
          

 = 
    

 = 
  [  ? ) ]  |
  [ ( ? ) ]                 

 = 
  (  )

5

Đây là một ví dụ về việc tạo hai lớp xế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 lớp một cách riêng biệt. Tầng tầng được khai báo không có tên là tầng tầng ẩn danh. Các lớp xếp tầng ẩn danh được hoàn thiện khi 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

programming css

Làm cách nào để liên kết một tệp với một tệp khác trong css?

cú pháp

Sự miêu tả

cú pháp chính thức

ví dụ

Nhập quy tắc CSS

Nhập quy tắc CSS có điều kiện

Nhập các quy tắc CSS vào một lớp xếp tầng

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội