2024-03-14|閱讀時間 ‧ 約 23 分鐘

2024 網頁x人因xDjango 實務課程 10 CSS 連結方式

前言

終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。

但在這之前，我們肯定得先學習，如何將我們的 CSS 檔案，連接到 HTML 當中。

連結分類

首先，我們在連結 CSS 的方法中，有分為三種：

內聯連結

在 .html 當中，任一標籤的裡面，用屬性 style 來撰寫 CSS 語法。

<p style = "color:red; font-size:20px">
	早安
</p>

內嵌連結

在 .html 當中，裡面的 <head> 標籤內，用 <style> 去撰寫 CSS 語法，像是：

<style>
    .highlight {
        color: red;
        font-size: 20px;
    }
</style>

最後，在 <p> 裡面，新增屬性 class = "highlight" ，套用剛剛在 <style> 中寫好的指定樣式：

<p class="highlight">
    早安
</p>

完整的檔案會長這樣：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .highlight {
            color: red;
            font-size: 20px;
        }
    </style>
    <title>自我介紹網頁</title>
</head>
<body>
    <p class="highlight">
        早安
    </p>
</body>
</html>

刷新網頁後，會看到紅字，長這樣：

外部連結

在 <head> 裡面，撰寫 <meta> 來連結外部的 .css 檔案。

首先，先在 static 資料夾下方，新增一個 css 資料夾，用來放以後所有的 .css 檔案。

接著，在這個 css 資料夾下面，新增一個 style.css 檔案，用於撰寫所有我們想規劃的 css 檔案。

最後，在 css 裡面寫下這些程式碼：

.highlight {
    color: red;
    font-size: 20px;
}

到目前為止，我們就撰寫好了 style.css 。

接下來在 .html 當中，連結我們剛寫好的 style.css 檔案，我們需要在 <head> 裡面，新增這兩串標籤，從 static 中引進 css 資料夾內的 style.css 檔案：

{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

最後，在 <p> 裡面，新增屬性 class = "highlight" ，套用剛剛在 .css 中寫好的指定樣式：

<p class="highlight">
    早安
</p>

刷新網頁，就能看見紅字的早安了：

結論

感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！

今天我們學到了三種，可以連結 .css 到 .html 當中的方法。

接下來，我們將介紹 css 當中，標籤的代號用法，讓我們可以透過這些代號，去設計每個不同標籤的樣式。

分享至

成為作者繼續創作的動力吧！

2024 讓你 8分鐘懂機器學習

追蹤

從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

2024 網頁x人因xDjango 實務課程 09 Static 資料夾建立

咖啡因學習教室的其他內容

你可能也想看

發表回應

成為會員後即可發表留言