這篇文章給大家介紹引入CSS文件的方式有哪些，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)建站專注于蓬萊網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供蓬萊營(yíng)銷型網(wǎng)站建設(shè)，蓬萊網(wǎng)站制作、蓬萊網(wǎng)頁(yè)設(shè)計(jì)、蓬萊網(wǎng)站官網(wǎng)定制、小程序開(kāi)發(fā)服務(wù)，打造蓬萊網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蓬萊網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

css的三種引入方式

1.行內(nèi)樣式，最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫(xiě)在之間，并且用

進(jìn)行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在之間加上

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：

style屬性的應(yīng)用

直接在HTML標(biāo)簽中設(shè)置的樣式

實(shí)際在寫(xiě)頁(yè)面時(shí)不提倡使用，在測(cè)試的時(shí)候可以使用。

例如：

  
  


     
     Leaping Above The Water
     我是p標(biāo)簽

二、內(nèi)部樣式表

在style標(biāo)簽中書(shū)寫(xiě)CSS代碼。style標(biāo)簽寫(xiě)在head標(biāo)簽中。

示例：

h4{

color:red;

}

例如：

  
  
  
  
    div{
        background: green;
    }
  


     
我是DIV

三、外部樣式表

CSS代碼保存在擴(kuò)展名為.css的樣式表中

HTML文件引用擴(kuò)展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。

語(yǔ)法：

1、鏈接式

2、導(dǎo)入式

@import url("css文件路徑");

例如：

  
  
  
   
  
  
    @import url("css/style.css");
  


     

         
1111
         
2222
     

鏈接式和導(dǎo)入式的區(qū)別

1、屬于XHTML

2、優(yōu)先加載CSS文件到頁(yè)面

@import

1、屬于CSS2.1

2、先加載HTML結(jié)構(gòu)在加載CSS文件。

四、CSS中的優(yōu)先級(jí)

1、樣式優(yōu)先級(jí)

行內(nèi)樣式>內(nèi)部樣式>外部樣式(后兩者是就近原則)

例如：

行內(nèi)樣式和內(nèi)部樣式比較優(yōu)先級(jí)：

  
  
    
  
    p{
      color: blue;
    }
  


     
     我是p段落

瀏覽器運(yùn)行效果：

結(jié)論：行內(nèi)樣式優(yōu)先級(jí)高于內(nèi)部樣式表。

內(nèi)部樣式表和外部樣式表比較優(yōu)先級(jí)：

a、內(nèi)部樣式表在外部樣式表上面

  
  
    
  
    p{
      color: blue;
    }
  
  
   


     
我是p段落
     
我是div
     

         
1111
         
2222
     

瀏覽器運(yùn)行效果：

b、外部樣式表在內(nèi)部樣式表上面

  
  
    
   
    
  
    p{
      color: blue;
    }
  


     
我是p段落
     
我是div
     

         
1111
         
2222
     

瀏覽器運(yùn)行效果：

結(jié)論：內(nèi)部樣式表和外部樣式表使用就近原則，即誰(shuí)寫(xiě)在下面以誰(shuí)為準(zhǔn)。

注意：導(dǎo)入式和鏈接式的優(yōu)先級(jí)也是使用就近原則。

2、選擇器優(yōu)先級(jí)

優(yōu)先級(jí)：ID選擇器>類選擇器>標(biāo)簽選擇器

  
  
  
    #a{
      color: green;
    }
    .b{
      color: yellow;
    }
    h3{
      color: red;
    }
  


     
111
 
     222 
     333

瀏覽器運(yùn)行效果：

關(guān)于引入CSS文件的方式有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。