如何使用 CSS

通常會有三種方式

Last updated 2 years ago

如何使用 CSS

通常會有三種方式

第一種方式：inline

在我們建立了 HTML 檔之後，我們想要裝飾 HTML，最直接的想法就是在想要裝飾的標籤上增加樣式。例如下面這個範例將會讓「請注意！」變成紅色字：

<p>這裡是重點，<span style="color: red;">請注意！</span></p>

只要在想裝飾的地方，加上style=""，就可以在該標籤附上樣式（屬性: 值;），就是這麼簡單。

第二種方式：<style></style> (Internal style sheet)

第一種方式很明確的在想要增加樣式的地方做修改，但隨著修改的地方變多，整個 HTML 會變得破碎，影響開發人員後續的維護性以及權重太高（在篇幅會更詳細地解說），為了好管理，我們會將所有樣式集中在 <head></head> 裡，如下範例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <style>
      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>這裡是重點，<span>請注意！</span></p>
  </body>
</html>

如此一來，我們只要專心在 <style> 裡面寫 CSS 就好了，也不會污染 HTML 標籤的可讀性與易維護性。

第三種方式：<link> (External style sheet)

第二種方式比起第一種方式更容易管理，但還是會在 HTML 裡佔了一些篇幅，為了更專心於 HTML ，我們會再把 <style> 裡的內容，移出去外面獨立成一個檔案，而此檔案的副檔名會命名為 .css，接著 HTML 再執行連接，依然能達成同樣效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>這裡是重點，<span>請注意！</span></p>
  </body>
</html>

/* style.css */
span {
 color: red;
}

此種方式將樣式獨立成一個檔案，達到了易管理、單純化，但必須小心 href 的路徑是否正確，如果路徑不正確將會導致連結不到樣式，在此範例中就不會產生文字顏色的變化。

小結

三種方式都有實用的地方，在未來越來越熟 CSS 的過程中您就會理解。

作業

請實際操作三種方式練習 CSS 的使用。

PreviousCSS NextCSS 註解