CSS入門-Day2：語法
閱讀時間約 2 分鐘
CSS基礎
CSS語法
CSS（Cascading Style Sheets）的基本語法由選擇器、屬性和值組成。以下是基本語法的結構：
選擇器 {
屬性: 值;
}
- 選擇器：指定要應用樣式的 HTML 元素。
- 屬性：定義了要修改的樣式屬性。
- 值：設置屬性的具體值。
例如：
body {
background-color: #f0f0f0;
color: #333;
}
h1 {
font-size: 2em;
color: blue;
}
引入CSS
有三種方法可以將 CSS 引入到 HTML 中：
- 內聯樣式：直接在 HTML 元素的
style屬性中定義樣式。<p style="color: red;">這是一個紅色文本。</p>
- 內部樣式表：在 HTML 文檔的
<head>部分使用<style>標籤定義樣式。<head>
<style>
p {
color: blue;
}
</style>
</head> - 外部樣式表：將樣式定義在單獨的 CSS 文件中，並在 HTML 文檔的
<head>部分使用<link>標籤引入該文件。<head>
<link rel="stylesheet" href="styles.css">
</head>
選擇器與優先級
基本選擇器
- 元素選擇器：選擇 HTML 元素。
p {
color: green;
} - 類選擇器：選擇帶有特定 class 屬性的元素。使用
.作為前綴。.example {
background-color: yellow;
} - ID 選擇器：選擇帶有特定 id 屬性的元素。使用
#作為前綴。#unique {
font-weight: bold;
}
複合選擇器
- 後代選擇器：選擇某元素內的所有指定後代元素。
div p {
color: blue;
} - 子選擇器：選擇某元素的直接子元素。
ul > li {
list-style-type: none;
} - 相鄰兄弟選擇器：選擇緊跟在另一元素之後的元素。
h1 + p {
margin-top: 0;
} - 群組選擇器：對多個選擇器應用相同的樣式。
h1, h2, h3 {
color: navy;
}
層疊與優先級
CSS 的層疊性指的是樣式的應用順序和優先級。當多個樣式同時應用於一個元素時，CSS 使用以下規則來決定哪個樣式優先：
- 優先級（Specificity）：
- 元素選擇器（最低優先級）：div、p、h1
- 類選擇器：.class
- 屬性選擇器和偽類選擇器：[type="text"]、:hover
- ID 選擇器（最高優先級）：#id
- 來源順序：當優先級相同時，後定義的樣式會覆蓋先前的樣式。
p {
在這個例子中，段落的顏色會是紅色，因為後面的樣式覆蓋了前面的樣式。
color: blue;
}
p {
color: red;
}
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。