2024 網頁x人因xDjango 實務課程 10 CSS 連結方式
閱讀時間約 1 分鐘
前言
終於要到這個振奮人心的章節了，我們終於要來學習，如何讓自己的網頁更加美觀。
但在這之前，我們肯定得先學習，如何將我們的 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 當中，標籤的代號用法，讓我們可以透過這些代號，去設計每個不同標籤的樣式。
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
網站設計怎麼做？你會嗎？直接教你把握關鍵重點！從基礎網站設計方法開始，4 步學規劃網站佈局、網站設計必備要素、做好互動與動畫效果，直接用工具來打造精美又吸引人的網站設計，留住客戶其實很簡單！快跟我們一起掌握網站設計技巧，提升顧客轉化率！
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
本章介紹了 CSS 中的顏色和背景屬性，包括文本顏色的設置方法、背景顏色和背景圖片的應用、背景重複和位置的配置，以及線性漸變和徑向漸變的使用。這些知識將幫助你更靈活地設計和美化網頁。
先學習 HTML, CSS, JavaScript 基礎觀念，
再透過實作專案，慢慢熟悉不同的語法使用方式。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
CSS 的繼承性是開發網頁樣式時的一個重要概念，它使得樣式設計更加靈活和高效，有助於提高程式碼的可讀性、一致性和可重用性，並加快開發速度，從而提供更好的開發體驗。
網站設計怎麼做？你會嗎？直接教你把握關鍵重點！從基礎網站設計方法開始，4 步學規劃網站佈局、網站設計必備要素、做好互動與動畫效果，直接用工具來打造精美又吸引人的網站設計，留住客戶其實很簡單！快跟我們一起掌握網站設計技巧，提升顧客轉化率！
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
在當今數位化時代，網頁設計已成為商業和個人表達的重要途徑。無論是企業建立品牌形象，還是個人展示創意作品，一個具有吸引力且功能全面的網站都是不可或缺的。網頁設計不僅涉及美學布局，更包含了使用者體驗（UX）、使用者介面（UI）和技術實現等多方面的考量。隨著技術的進步和網頁設計理念的不斷演進，網頁設計已經
您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。