Quy tắc @import dùng để nhập một bảng định kiểu vào bảng định kiểu khác. Quy tắc này hỗ trợ media queries để nhập style sheet phụ thuộc media. Quy tắc @import phải được khai báo ở đầu tài liệu sau khai báo @charset.
Cú pháp:
@import url|string list-of-mediaqueries;
Giá trị thuộc tính:
- url|string: Một url hoặc một chuỗi đại diện cho vị trí tài nguyên được nhập. URL này có thể là tương đối hoặc tuyệt đối.
- list-of-mediaqueries: Danh sách media queries quy định việc áp dụng các quy tắc CSS trong URL được liên kết.
Ví dụ: Xem xét hai tệp CSS như hình bên dưới.
- icss.css
@import url("i1css.css");
h1 {
color: #00ff00;
}- i1css.css
h1 {
text-decoration: underline;
font-size:60px;
}
p {
padding-left: 20px;
font-size: 60px;
}
Liên kết tệp CSS đầu tiên icss.css trong tệp HTML bên dưới để xem kết quả.
html<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
<link href="icss.css" rel="stylesheet">
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ quy tắc @import được liệt kê bên dưới:
- Google Chrome 1 trở lên
- Edge 12 trở lên
- Firefox 1 trở lên
- Safari 1 trở lên
- Opera 3.5 trở lên