Có thể bao gồm một tệp CSS trong một tệp khác không?
Có thể bao gồm một tệp CSS trong một tệp khác không?
Câu trả lời:
Đúng:
@import url("base.css");
Ghi chú:
@import
quy tắc phải đặt trước tất cả các quy tắc khác (trừ @charset
).@import
báo cáo đòi hỏi yêu cầu máy chủ bổ sung. Cách khác, ghép tất cả CSS vào một tệp để tránh nhiều yêu cầu HTTP. Ví dụ, sao chép nội dung của base.css
và special.css
vào base-special.css
và chỉ tham khảo base-special.css
.Đúng. Có thể nhập tệp CSS vào một tệp CSS khác.
Nó phải là quy tắc đầu tiên trong biểu định kiểu sử dụng quy tắc @import .
@import "mystyle.css";
@import url("mystyle.css");
Nhắc nhở duy nhất là các trình duyệt web cũ hơn sẽ không hỗ trợ nó. Trên thực tế, đây là một trong những 'hack' CSS để ẩn các kiểu CSS khỏi các trình duyệt cũ hơn.
Tham khảo danh sách này để được hỗ trợ trình duyệt.
Công @import url("base.css");
việc tốt nhưng hãy nhớ rằng mỗi @import
câu lệnh là một yêu cầu mới đối với máy chủ. Điều này có thể không phải là một vấn đề cho bạn, nhưng khi cần hiệu suất tối ưu, bạn nên tránh @import
.
@import
Quy tắc CSS làm điều đó. Ví dụ,
@import url('/css/common.css');
@import url('/css/colors.css');
Trong một số trường hợp, có thể sử dụng @import "file.css" và hầu hết các trình duyệt hiện đại sẽ hỗ trợ điều này, các trình duyệt cũ hơn như NN4, sẽ hơi khó hiểu.
Lưu ý: câu lệnh nhập phải đi trước tất cả các khai báo khác trong tệp và kiểm tra nó trên tất cả các trình duyệt mục tiêu của bạn trước khi sử dụng nó trong sản xuất.
Có, sử dụng @import
thông tin chi tiết dễ dàng được tìm kiếm, một thông tin tốt tại http://webdesign.about.com/od/beginningcss/f/css_import_link.htmlm
Quy tắc "@import" có thể gọi trong nhiều tệp kiểu. Các tệp này được trình duyệt hoặc Tác nhân người dùng gọi khi cần, ví dụ: thẻ HTML gọi CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>
Tệp CSS "main.css" Chứa Cú pháp sau:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
Để chèn phần tử kiểu, hãy sử dụng createTexNode, không sử dụng InternalHTML nhưng:
<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
@import 'fineprint.css' print;
@import 'bluish.css' projection, tv;
@import 'custom.css';
@import 'chrome://communicator/skin/';
@import 'common.css' screen, projection;
@import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
projection
và screen
?) Thì điều này thường không bao giờ là một việc nên làm. ;)
Tôi sử dụng điều này để nhập bootstrap.css trong activvista với wordpress
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
và nó hoạt động tốt, vì nó sẽ xóa mã rel link html nếu tôi đặt nó vào một trang
Có Bạn có thể dễ dàng nhập một css sang một cái khác (bất kỳ nơi nào trong trang web) Bạn phải sử dụng như:
@import url("url_path");
Vì lý do nào, @import không làm việc cho tôi, nhưng nó không thực sự cần thiết phải không?
Đây là những gì tôi đã làm thay vào đó, trong html:
<link rel="stylesheet" media="print" href="myap-print.css">
<link rel="stylesheet" media="print" href="myap-screen.css">
<link rel="stylesheet" media="screen" href="myap-screen.css">
Lưu ý rằng media = "print" có 2 biểu định kiểu: myap-print.css và myap-screen.css. Đó là hiệu ứng tương tự như bao gồm myap-screen.css trong myap-print.css.
hát Quy tắc CSS @import tại đây
@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
Tôi đã tạo tệp main.css và bao gồm tất cả các tệp css trong đó.
Chúng tôi chỉ có thể bao gồm một tệp main.css
@import url('style.css');
@import url('platforms.css');
Tôi đã vấp phải điều này và tôi chỉ muốn nói XIN ĐỪNG SỬ DỤNG @IMPORT IN CSS !!!! Câu lệnh nhập được gửi đến máy khách và máy khách thực hiện một yêu cầu khác. Nếu bạn muốn phân chia CSS của mình giữa các tệp khác nhau, hãy sử dụng Ít hơn. Trong Ít hơn, câu lệnh nhập xảy ra trên máy chủ và đầu ra được lưu trong bộ nhớ cache và không tạo ra một hình phạt hiệu suất bằng cách buộc khách hàng thực hiện một kết nối khác. Sass cũng là một lựa chọn khác không phải tôi đã khám phá. Thành thật mà nói, nếu bạn không sử dụng Ít hoặc Sass thì bạn nên bắt đầu. http://willseitz-code.blogspot.com/2013/01/USE-less-to-manage-css-files.html