簡體   English   中英

是否可以在另一個CSS文件中包含一個?

[英]Is it possible to include one CSS file in another?

是否可以在另一個CSS文件中包含一個?

是:

@import url("base.css");

注意:

  • @import規則必須在所有其他規則之前@charset除外)。
  • 額外的@import語句需要額外的服務器請求。 作為替代方案,將所有CSS連接到一個文件中以避免多個HTTP請求。 例如,將base.cssspecial.css的內容復制到base-special.css並僅引用base-special.css

是。 可以將CSS文件導入另一個CSS文件。

它必須是使用@import規則的樣式表中的第一個規則

@import "mystyle.css";
@import url("mystyle.css");

唯一需要注意的是舊的Web瀏覽器不支持它。 事實上,這是隱藏舊瀏覽器CSS樣式的CSS'hack'之一。

有關瀏覽器支持,請參閱此列表

@import url("base.css"); 工作正常但請記住,每個@import語句都是對服務器的新請求。 這對您來說可能不是問題,但是當需要最佳性能時,您應該避免使用@import

CSS @import規則就是這樣做的。 例如,

@import url('/css/common.css');
@import url('/css/colors.css');

是。

@import "your.css";

這里記錄規則。

在某些情況下,可以使用@import“file.css”,並且大多數現代瀏覽器都應該支持這一點,NN4等舊版瀏覽器會稍微堅固一些。

注意:import語句必須位於文件中的所有其他聲明之前,並在生產中使用之前在所有目標瀏覽器上對其進行測試。

是的,使用@import

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm上的詳細信息很容易google,一個很好的信息

是的,可以使用@import並提供css文件的路徑,例如

@import url("mycssfile.css");

要么

@import "mycssfile.css";

@import("/path-to-your-styles.css");

這是使用css在css樣式表中包含css樣式表的最佳方法。

“@import”規則可以調用多個樣式文件。 這些文件在需要時由瀏覽器或用戶代理調用,例如HTML標記調用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>

CSS文件“main.css”包含以下語法:

@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);

要在樣式元素中插入,使用createTexNode不要使用innerHTML,但是:

<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>

是的您可以輕松地將一個CSS導入到另一個(網站中的任何位置)您必須使用如下:

@import url("url_path");
@import url('style.css');

與最佳答案相反,建議不要在使用HTTP / 2.0時將所有CSS文件聚合到一個塊中

使用altervista和wordpress導入bootstrap

我使用它來在altervista中使用wordpress導入bootstrap.css

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

它工作正常,因為它會刪除html鏈接rel代碼,如果我把它放入頁面

無論出於何種原因,@ import對我不起作用,但它不是真的有必要嗎?

這是我在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">

請注意,media =“print”有兩個樣式表:myap-print.css和myap-screen.css。 這與在myap-print.css中包含myap-screen.css的效果相同。

這里唱CSS @import規則

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;

我創建了main.css文件,並在其中包含了所有css文件。

我們只能包含一個main.css文件

@import url('style.css');
@import url('platforms.css');

我偶然發現了這個,我只是想說請不要在CSS中使用@IMPORT !!!! import語句被發送到客戶端,客戶端執行另一個請求。 如果要在各種文件之間划分CSS,請使用Less。 在Less中,import語句在服務器上發生,並且輸出被緩存,並且不會通過強制客戶端建立另一個連接而造成性能損失。 Sass也是我探索過的另一種選擇。 坦率地說,如果你不使用Less或Sass那么你應該開始。 http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM