Nhưng trong khi mã hóa, rất khó để bao gồm các thuộc tính CSS giống nhau cho từng trang web một cách riêng biệt. Vì vậy, cần phải sử dụng một giải pháp thông qua đó có thể tạo một biểu định kiểu duy nhất và sau đó được truy cập bởi nhiều tệp một cách dễ dàng.
Quy tắc @import trong CSS là gì?
Cách tốt nhất để bao gồm các thuộc tính kiểu CSS là sử dụng quy tắc @import. @import được sử dụng để nhập hoặc truy cập biểu định kiểu CSS từ một biểu định kiểu khác. Điều này làm giảm nỗ lực của nhà phát triển vì tất cả các thuộc tính được thêm vào biểu định kiểu đã nhập được triển khai trực tiếp bằng cách chỉ cần viết @import và sau đó là tên chính xác của biểu định kiểu.
Cú pháp của Quy tắc @import
Cú pháp để thêm quy tắc @import để truy cập một biểu định kiểu từ một biểu định kiểu khác như sau:
@nhập khẩu 'bảng định kiểu.css' ;
Quy tắc @import cũng có thể được thêm vào bằng phương pháp sau:
@nhập khẩu url ( stylesheetname.css ) ;
Chỉ cần thêm tên của tệp biểu định kiểu CSS bằng dấu phẩy đảo ngược hoặc trong dấu ngoặc tròn với “ url ” sau khi viết “ @nhập khẩu ”.
Ví dụ: Thêm quy tắc @import
Để hiểu cách hoạt động của quy tắc @import, chúng tôi viết một đoạn mã đơn giản:
< h1 > Đây là một văn bản đơn giản! < / h1 >Trong đoạn mã trên, có một tiêu đề
với một câu đơn giản một dòng được thêm vào trong tài liệu HTML. Mã đơn giản này sẽ tạo ra đầu ra sau:
Hãy tạo một biểu định kiểu để xác định một số thuộc tính CSS mà sau này có thể được nhập từ tệp thông qua đó giao diện trang web ở trên được tạo. Chúng tôi tạo một tệp khác và đặt tên là “ biểu định kiểu ” với loại tệp được khai báo là “ css ” và chỉ cần thêm một số thuộc tính cho tiêu đề và nội dung
: h1 {
màu sắc : màu xanh nửa đêm ;
màu nền : màu xanh da trời ;
căn chỉnh văn bản : trung tâm ;
}
thân hình {
màu nền : xanh nhạt ;
}
Để truy cập tệp biểu định kiểu có chứa các thuộc tính kiểu cho tiêu đề và nội dung
, chúng ta chỉ cần thêm quy tắc @import vào bất kỳ tệp CSS nào cần kiểu đó.
Chỉ cần thêm một quy tắc @import đơn giản sẽ triển khai tất cả các thuộc tính kiểu vào giao diện trang web mà không cần phải nhập các thuộc tính riêng biệt trên mỗi trang web.
Vì vậy, bắt buộc phải viết quy tắc @import dưới dạng:
@nhập khẩu 'bản định kiểu.css' ;Thêm quy tắc @import bằng cách viết “ url ” và tên file CSS trong ngoặc tròn cũng sẽ hiển thị kết quả tương tự:
@nhập khẩu url ( biểu định kiểu.css ) ;Các thuộc tính được xác định trong phần “ biểu định kiểu ” tệp được triển khai bằng cách chỉ cần thêm một tệp “ @nhập khẩu ” quy tắc cho nó:
Đây là cách dễ nhất để đưa các thuộc tính CSS vào một tệp mà không cần thêm bất kỳ nỗ lực nào.
Lợi ích của Quy tắc @import trong CSS
Quy tắc @import được sử dụng phổ biến vì những lý do sau:
- Sử dụng Quy tắc @import giúp giảm thời gian và công sức của nhà phát triển vì nó triển khai tất cả các thuộc tính của một biểu định kiểu cụ thể bằng cách chỉ viết tên của trang tính đó sau @import.
- Trong các ứng dụng web lớn và phức tạp, quy tắc @import tỏ ra rất thuận lợi vì các thuộc tính kiểu giống nhau có thể được triển khai trong nhiều tệp chỉ bằng cách thêm tên của tệp biểu định kiểu.
- Các phần tử biểu định kiểu như đầu trang, chân trang, nội dung, v.v. có thể được lưu trữ trong các tệp biểu định kiểu riêng biệt, sau đó bằng cách sử dụng quy tắc @import, bất kỳ kiểu dáng nào được yêu cầu đều có thể được nhập mà không cần thêm, xóa hoặc nhận xét các thuộc tính kiểu từ một biểu định kiểu tài liệu.
Phần này tóm tắt việc sử dụng quy tắc @import và giải thích quy tắc này được coi là phương pháp tốt nhất để bao gồm CSS như thế nào.
Phần kết luận
Một biểu định kiểu CSS có thể được nhập hoặc truy cập trực tiếp từ một biểu định kiểu khác và tất cả các thuộc tính trong biểu định kiểu đã nhập được triển khai trực tiếp trên trang web của tệp mà nó đã được nhập. Không cần phải viết riêng từng thuộc tính CSS cho mọi giao diện trang web. Tất cả những gì cần làm là thêm tên của tệp biểu định kiểu CSS bằng @import. Và, đây được coi là phương pháp tốt nhất để thêm CSS.