詳解CSS文件的三種引入方式

2024-07-11 08:59:28

字體：大中小

供稿：網(wǎng)友

CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：

<h1 style="color:red;">style屬性的應(yīng)用</h1><p  style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>

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

例如：

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>行內(nèi)樣式</title></head><body>     <!--使用行內(nèi)樣式引入CSS-->     <h1 style="color:red;">Leaping Above The Water</h1>     <p style="color:red;font-size:30px;">我是p標(biāo)簽</p></body></html>

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

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

示例：

<head><style type="text/css">h3{color:red;}</style></head>

例如：

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>內(nèi)部樣式表</title>  <!--使用內(nèi)部樣式表引入CSS-->  <style type="text/css">    div{        background: green;    }  </style></head><body>     <div>我是DIV</div></body></html>

三、外部樣式表

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

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

語(yǔ)法：

1、鏈接式

<link type="text/css" rel="styleSheet"  href="CSS文件路徑" />

2、導(dǎo)入式

<style type="text/css">@import url("css文件路徑");</style>

例如：

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>外部樣式表</title>  <!--鏈接式:推薦使用-->  <link rel="stylesheet" type="text/css" href="css/style.css" />   <!--導(dǎo)入式-->  <style type="text/css">    @import url("css/style.css");  </style></head><body>     <ol>         <li>1111</li>         <li>2222</li>     </ol></html>

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

<link>

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í)：

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>行內(nèi)樣式和內(nèi)部樣式表的優(yōu)先級(jí)</title>    <!--內(nèi)部部樣式表-->  <style type="text/css">    p{      color: blue;    }  </style></head><body>     <!--行內(nèi)樣式-->     <p style="color: red;">我是p段落</p></html>

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

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

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

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

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)</title>    <!--內(nèi)部部樣式表-->  <style type="text/css">    p{      color: blue;    }  </style>  <!--外部樣式表-->  <link rel="stylesheet" type="text/css" href="css/style.css" /> </head><body>     <p>我是p段落</p>     <div>我是div</div>     <ol>         <li>1111</li>         <li>2222</li>     </ol></html>

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

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

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>內(nèi)部樣式表和外部樣式表的優(yōu)先級(jí)</title>    <!--外部樣式表-->  <link rel="stylesheet" type="text/css" href="css/style.css" />     <!--內(nèi)部部樣式表-->  <style type="text/css">    p{      color: blue;    }  </style></head><body>     <p>我是p段落</p>     <div>我是div</div>     <ol>         <li>1111</li>         <li>2222</li>     </ol></html>

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

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

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

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

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

<!DOCTYPE><html><head>  <meta charset="utf-8" />  <title>選擇器的優(yōu)先級(jí)</title>  <style type="text/css">    #a{      color: green;    }    .b{      color: yellow;    }    h2{      color: red;    }  </style></head><body>     <h2>111</h2> <!--紅色-->     <h2 id="a" class="b">222</h2> <!--綠色-->     <h2 class="b">333</h2><!--黃色--></html>

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