引入CSS文件的方式有哪些

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

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

css的三種引入方式

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

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

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：

<h2 style="color:red;">style屬性的應(yīng)用</h2>

<p  style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>

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

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行內(nèi)樣式</title>
</head>
<body>
     <!--使用行內(nèi)樣式引入CSS-->
     <h2 style="color:red;">Leaping Above The Water</h2>
     <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">

h4{

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)入式。

語法：

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文件到頁面

@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)行效果：

引入CSS文件的方式有哪些

結(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)行效果：

引入CSS文件的方式有哪些

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)行效果：

引入CSS文件的方式有哪些

結(jié)論：內(nèi)部樣式表和外部樣式表使用就近原則，即誰寫在下面以誰為準(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;
    }
    h3{
      color: red;
    }
  </style>
</head>
<body>
     <h3>111</h3> <!--紅色-->
     <h3 id="a" class="b">222</h3> <!--綠色-->
     <h3 class="b">333</h3><!--黃色-->
</html>

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

引入CSS文件的方式有哪些

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

網(wǎng)頁標(biāo)題：引入CSS文件的方式有哪些
標(biāo)題網(wǎng)址：http://jinyejixie.com/article8/iieeip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)公司、、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

引入CSS文件的方式有哪些

css的三種引入方式