如何引入css文件-css教學-PHP中文網

首頁

web前端

css教學

如何引入css文件

coldplay.xixi

Apr 29, 2021 pm 05:22 PM

css檔案

引入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>

登入後複製