如何在CSS文件中引入另一個(gè)CSS文件

發(fā)布時(shí)間：2020-07-20 11:36:06 來(lái)源：億速云閱讀：312 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了如何在CSS文件中引入另一個(gè)CSS文件，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

@import規(guī)則

首先我們來(lái)了解一下@import規(guī)則。

@import規(guī)則用于將一個(gè)樣式表導(dǎo)入到另一個(gè)樣式表中。此規(guī)則還支持媒體查詢，以便用戶可以導(dǎo)入與媒體相關(guān)的樣式表。在任何@charset聲明之后，必須在文檔的頂部聲明@import規(guī)則。

@import的特點(diǎn)：

● @import規(guī)則用于將樣式表導(dǎo)入HTML頁(yè)面或其他樣式表。

● @import規(guī)則也用于添加媒體查詢，因此import是依賴于媒體的。

● @import規(guī)則總是在文檔的頂部聲明。

基本句式：

@import url | string list-of-mediaqueries;

url | string：表示要導(dǎo)入的資源的位置，可以是相對(duì)的或絕對(duì)的。

list-of-mediaqueries：決定了URL鏈接中定義的CSS規(guī)則的應(yīng)用。

代碼示例

下面我們就通過(guò)示例來(lái)帶大家了解一下CSS文件中引入另一個(gè)CSS文件的方法。

HTML部分：創(chuàng)建文件名為index.html的文件

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<link rel="stylesheet" href="style1.css" /><!--在HTML文件中導(dǎo)入style1.css文件-->
<head>
<body>
<div class="box">
<h2>億速云</h2>
<p>測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！</p>
</div>
</body>
</html>

CSS部分：

style1.css文件：

/*導(dǎo)入另一個(gè)CSS文件 */
@import "style2.css"; /* 或者@import url(style2.css);*/ 
.box{
width: 400px;
margin: 100px auto;
}
h2 { 
     color:red;  
     text-align: center;  
 } 
   
p { 
     color:black; 
     padding: 10px;
     background-image: linear-gradient(to right, #fbd6d3, #ff1200); 
     position:static; 
       
 }

輸出：在不使用@import規(guī)則導(dǎo)入另一個(gè)CSS文件（style2.css）的情況下

如何在CSS文件中引入另一個(gè)CSS文件

style2.css文件：

 body { 
    background:gainsboro; 
        opacity: 0.5; 
} 
h2{
color: #008000;
}

輸出：在style1.css文件中使用@import規(guī)則導(dǎo)入 style2.css文件

如何在CSS文件中引入另一個(gè)CSS文件

說(shuō)明：使用@import規(guī)則導(dǎo)入另一個(gè)CSS樣式表有兩種方法：@import url(style2.css);和@import "style2.css";

注：使用@import規(guī)則導(dǎo)入另一個(gè)CSS樣式表時(shí)，需要注意樣式表的路徑。

上述內(nèi)容就是如何在CSS文件中引入另一個(gè)CSS文件，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何在CSS文件中引入另一個(gè)CSS文件

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽