首頁 > 文章 > web前端 > html怎麼引用css文件

html怎麼引用css文件

青灯夜游原創: 2021-07-14 12:00:5013476瀏覽

引用css檔案的方法：1、使用「1a5e3b56ce19ab0f02bea840b3ac62d3」語句；2、在style標籤中使用“@import url("css檔案路徑");”語句。

html怎麼引用css文件

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

HTML檔案引用副檔名為.css的樣式表（外接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>

連結式與導入式的差異

2cdf5bf648cf2f33323966d7f58a7f3f

1、屬於XHTML

2、優先載入CSS檔案到頁面

@import

1、屬於CSS2.1

2、先載入HTML結構在載入CSS檔案。

外接CSS的優點：

1、HTML頁面的大小更小，結構更清楚。

2、載入速度更快。

3、相同的.css檔案可以在多個頁面上使用。

外接CSS的缺點：

1、在載入外部CSS之前，頁面可能無法正確呈現。

學習影片分享：css影片教學、html影片教學

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

html5 css css3 html href 样式表

陳述：

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

上一篇：html+css+js實現星空旋轉和文字淡入效果（附程式碼）下一篇：html+css+js實現星空旋轉和文字淡入效果（附程式碼）

看更多