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 sử dụng cho mục đích này vì nó liên kết một biểu định kiểu trong tài liệu. Điều này thường được sử dụng khi một biểu định kiểu phụ thuộc vào biểu định kiểu khác. Nó được chỉ định ở đầu tài liệu sau khai báo @charset bên trong
.Cú pháp
Cú pháp của quy tắc @import như sau
@import /*url or list-of-media-queries*/
Các truy vấn phương tiện có thể là các câu lệnh ghép có thể chỉ định hoạt động 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>This is demo paragraph one. </p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html> Tài liệu CSS:style.css
p { color: navy; font-style: italic; }
.two { color: darkgreen; font-size: 24px; } Đầu ra
Điều này tạo ra kết quả sau -
Ví dụ
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;
} Đầu ra
Điều này cho kết quả sau -
