css3的三種使用方法分別是什么

發(fā)布時(shí)間：2022-01-24 11:36:06 來源：億速云閱讀：142 作者：柒染欄目：web開發(fā)

這篇文章給大家介紹css3的三種使用方法分別是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

css3的三種使用方法：1、內(nèi)聯(lián)樣式，語(yǔ)法為“<元素 style="css樣式代碼;">”；2、內(nèi)部樣式，語(yǔ)法為“<style>元素{css樣式代碼;}</style>”；3、外部樣式，語(yǔ)法為“<link href="css樣式路徑">”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3的三種使用方法是什么

一、內(nèi)聯(lián)樣式

　　內(nèi)聯(lián)樣式通過style屬性來設(shè)置，屬性值可以任意的CSS樣式。

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>內(nèi)聯(lián)樣式</title>
  </head>
  <body>
     <p style="background: red"> I  love  China!</p>
  </body>
 </html>

　　顯示效果：

css3的三種使用方法分別是什么

二、內(nèi)部樣式

　　內(nèi)部樣式定義在文檔的head部分，通過style標(biāo)簽來設(shè)置。需要使用元素選擇器（p）來關(guān)聯(lián)樣式和要設(shè)置樣式的標(biāo)簽（p標(biāo)簽）。

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="UTF-8">
      <title>內(nèi)聯(lián)樣式</title>
     <style type="text/css">
         p{ 
              background: green;
          }
    </style>
 </head>
 <body>
    <p> I  love  China!</p>
 </body>
 </html>

　　效果：

css3的三種使用方法分別是什么

三、外部樣式

　　在文檔外的*.css定義css樣式，然后在文檔的head部分通過link元素引入?！　?/p>

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>內(nèi)聯(lián)樣式</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <p> I  love  China!</p>
</body>
 </html>

　　style.css文件內(nèi)容：

p{ 
             background: yellow;
        }

　　顯示效果：

css3的三種使用方法分別是什么

　　a.在一個(gè)外部樣式表中導(dǎo)入其他樣式表的樣式

　　combine.css文件中導(dǎo)入上面的style.css

@import "style.css";
 body{
     background: red;
}

　　HTML文件中引入combine.css文件

  <!DOCTYPE html>
  <html>
 <head>
      <meta charset="UTF-8">
      <title>document</title>
      <link rel="stylesheet" href="combine.css">
  </head>
  <body>
      <p> I  <span>love</span>  China!</p>
 </body>
 </html>

　　效果：

css3的三種使用方法分別是什么

關(guān)于css3的三種使用方法分別是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

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

css3的三種使用方法分別是什么

css3的三種使用方法是什么

一、內(nèi)聯(lián)樣式

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

三、外部樣式

猜你喜歡

最新資訊

相關(guān)推薦

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

一、內(nèi)聯(lián)樣式

二、內(nèi)部樣式

三、外部樣式