html怎麼引入css-前端問答-PHP中文網

html怎麼引入css

WBOY

發布： 2023-05-29 19:55:06

原創

1507 人瀏覽過

HTML怎麼引進CSS

作為前端開發的基礎，HTML與CSS的關係相輔相成。 HTML負責頁面結構與內容的搭建，而CSS則負責在這個基礎上為頁面增添色彩，美化頁面。那麼，在HTML文件中如何引入CSS樣式呢？本文將為大家介紹CSS的引進方式以及注意事項。

在HTML頭引用外部CSS

這是最常見也是最推薦的引用CSS的方法。以常見的頁面結構為例，在HTML頭部標籤內加上一個link標籤：

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      页面内容
  </body>
</html>

登入後複製

其中，link標籤有三個屬性：

rel：表示樣式表與目前文件的關係為外部樣式表，取值為「stylesheet」；
type：表示樣式表檔案的MIME類型，取值為「text/css」；
href：表示樣式表檔案的引用路徑。

這裡要注意的是，href屬性的路徑應該以目前HTML路徑為基準，而不是以CSS檔案所在的相對路徑為基準。假設CSS檔案在目前HTML同一層級目錄下，那麼引用樣式應該這樣寫：

<link rel="stylesheet" type="text/css" href="./style.css">

登入後複製

其中「.」表示目前目錄，檔案名稱後綴「.css」不能省略。

在HTML頭部嵌入內部CSS

在HTML文件中，我們可以透過style標籤來嵌入內部CSS。這種方式不可避免地增加了HTML檔案的體積，但對於一些簡單、小型的網站，可以節省外部檔案的請求和下載時間，加速頁面回應速度。以下是範例程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
    <style type="text/css">
      /* CSS样式内容 */
      body {background-color: #F1F1F1;}
      h1 {color: orange;}
    </style>
  </head>
  <body>
      页面内容
  </body>
</html>

登入後複製

其中，style標籤中的內容與外部CSS檔案格式一樣，只是將樣式程式碼直接寫在style標籤內部而已。要注意的是，為了避免樣式污染（CSS樣式互相影響），內部CSS應該使用有意義的CSS選擇器來限定樣式範圍。

在HTML元素中嵌入內嵌樣式

內嵌樣式是指將CSS樣式程式碼直接嵌入到HTML元素的style屬性中。這種方式極為靈活，但是不利於程式碼重複使用與維護。以下是範例程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    <h1 style="color:orange;">页面标题</h1>
    <p style="font-size:18px;">页面内容</p>
  </body>
</html>

登入後複製

需要注意的是，在使用內聯樣式時，應該確保樣式程式碼不會影響頁面的可存取性（Accessibility）和可用性（Usability）。對於一些類似視覺效果的樣式，應該使用外部樣式或內部樣式。

參考資料：