CSS樣式四種引入方式

時間 2020-05-20

標籤 css 樣式四種引入方式欄目 CSS 简体版

原文原文鏈接

第一種將樣式代碼寫在頁面<style>......</style>標籤之中，用<style>......</style>標籤將body設置一個灰色的背景：css

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background:gray;
   }
  </style>
 </head>
 <body>
  <div id="test1">css樣式引入</div>
 </body>
</html>

效果截圖：html

第二種使用HTML標籤的style屬性：ide

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   body{
    background:gray;
   }
  </style>
 </head>
 <body>
  <div id="test1"  style="color:red">css樣式引入</div>
 </body>
</html>

效果截圖：url

第三種使用link標籤來引入外部CSS樣式：htm

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="E:\HTML\css.css" />
  <style>
   body{
    background:gray;
   }
  </style>
 </head>
 <body>
  <div id="test1"  style="color:red">css樣式引入</div>
 </body>
</html>

link標籤引入的CSS文件代碼：blog

#test1{
 width:200px;
 height:200px;
 background:blue;
}

效果截圖：utf-8

第四種使用@import引入CSS樣式，使用@import引入CSS文件有兩種方式，一種能夠放在頁面中的<style>..</style> 中：get

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="E:\HTML\css.css" />
  <style>
   @import url('test.css');
   body{
    background:gray;
   }
  </style>
 </head>
 <body>
  <div id="test1"  style="color:red">css樣式引入</div>
 </body>
</html>

效果截圖：it

另一種使用@import引入CSS樣式的方式，能夠放在其餘的CSS中使用：io

 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="E:\HTML\css.css" />
  <style>
   body{
    background:gray;
   }
  </style>
 </head>
 <body>
  <div id="test1"  style="color:red">css樣式引入</div>
 </body>
</html>

link引入的CSS文件代碼：

@import url('test.css');
#test1{
 width:200px;
 height:200px;
 background:blue;
}

在link中引入的@import的CSS文件代碼：

#test1{

 border:10px solid orange;

}

效果截圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。