首頁 > 文章 > web前端 > 如何引入css文件

如何引入css文件

coldplay.xixi原創: 2021-04-29 17:22:4813841瀏覽

引入css檔案的方法：1、使用style屬性引入CSS樣式；2、在style標籤中書寫CSS程式碼；3、CSS程式碼保存在副檔名為【.css】的樣式表中。

如何引入css文件

本教學操作環境：windows7系統、css3版，DELL G3電腦。

引入css檔案的方法：

一、行內樣式

使用style屬性引入CSS樣式。

範例：

<h1 style="color:red;">style属性的应用</h1>
<p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>

實際上在寫頁面時不提倡使用，在測試的時候可以使用。

例如：

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">Leaping Above The Water</h1>
     <p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>

二、內部樣式表

在style標籤中書寫CSS程式碼。 style標籤寫在head標籤中。

範例：

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

例如：

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

#三、外部樣式表

CSS程式碼儲存在副檔名為.css的樣式表中

HTML檔案引用副檔名為.css的樣式表，有兩種方式：連結式、匯入式。

語法：

1、連結式

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

2、導入式

<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" /> 
  <!--导入式-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ol>
         <li>1111</li>
         <li>2222</li>
     </ol>
</html>

相關教程推薦：CSS影片教學

以上是如何引入css文件的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css怎樣設定按鈕不能點擊下一篇：css怎樣設定按鈕不能點擊

看更多