在 HTML 中套用 CSS 的三種方法

CSS (Cascading Style Sheets) 是用來美化網頁、進行版面設計的語言。

今天要來介紹，如何在 HTML 中套用 CSS 的三種方法！

可以直接在 HTML 的標籤裡，設定 style 屬性，例如將 p 標籤的文字改成紅色的做法如下：

<p style="color: red;">Hello World</p>

範例：

Hello World

在 head 標籤的裡面，增加 style 標籤，來做設定。

一樣將 p 標籤的文字改成紅色的做法如下：

<html>
<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Hello World</p>
</body>
</html>

範例：

Hello World

將 CSS 寫成一個獨立的檔案，然後在 HTML 的 head 標籤裡面，再載入 CSS 檔案。

P.S. 這是最常被使用的方法

而載入的方式有兩種，分別是：

<head>
    <link href="CSS 檔案的路徑" rel="stylesheet" media="all">
</head>

和

<head>
    <style>
        @import url(CSS 檔案的路徑);
    </style>
</head>

範例：

style.css 檔案內容

@charset "utf-8";

p {
    color: red;
}

index.html 檔案內容

<html>
<head>
    <link href="style.css" rel="stylesheet" media="all">
</head>
<body>
    <p>Hello World</p>
</body>
</html>

P.S. 如果 index.html 和 style.css 放在同一個資料夾，那 href 屬性只要填 style.css 就好，但通常一個網站可能會有好幾個 CSS 檔案，而這些 CSS 檔案會再另外放到同一個資料夾，這時候就要注意 href 屬性的檔案路徑喔~~

這次的教學就到這邊，如有任何不清楚的地方，歡迎留言詢問！

範例實作影片