首頁 > web前端 > css教學 > 主體

如何引入css文件

coldplay.xixi
發布: 2023-01-05 16:13:05
原創
13831 人瀏覽過

引入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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!