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
查看全部
你可能也想看
「設計不僅僅是外觀和感覺。設計是其運作的方式。」 — Steve Jobs
身為一個獨立文案，許多人會以為我們的生活只需要面對電腦，從無到有，用精巧的文字填滿空白的螢幕，呈現心目中獨具風格的作品。
——有的時候可以如此，但其實這是我們夢寐以求的偶發日常。
更多的時候，白天的工作時間總被各種繁雜
台股、美股近期明顯回檔，市場敘事發生改變，壞消息一樁接一樁出現，下一步該怎麼走呢？本文將探討近期的宏觀經濟事件，並分享個人的操作思考。
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。
「設計不僅僅是外觀和感覺。設計是其運作的方式。」 — Steve Jobs
身為一個獨立文案，許多人會以為我們的生活只需要面對電腦，從無到有，用精巧的文字填滿空白的螢幕，呈現心目中獨具風格的作品。
——有的時候可以如此，但其實這是我們夢寐以求的偶發日常。
更多的時候，白天的工作時間總被各種繁雜
台股、美股近期明顯回檔，市場敘事發生改變，壞消息一樁接一樁出現，下一步該怎麼走呢？本文將探討近期的宏觀經濟事件，並分享個人的操作思考。
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
在 CSS 的開發過程中，重複使用如顏色、字體大小等值是常見的需求。為了提高程式碼維護性和靈活性，就需要用到 CSS 變量了，CSS 變量可以讓你在樣式表中儲存可重用的值。本文將介紹 CSS 變量的概念、使用方法，以及它對撰寫 CSS 的影響。
本文將介紹 CSS 中的兩個重要概念：偽類與偽元素。通過理解和運用這些概念，你可以更好的控制網頁的樣式和佈局。
背景(background)是 CSS 中最常用的功能之一，本文將介紹如何使用 CSS 來設定網頁背景，讓你的網站更加美觀。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
本篇為隨筆紀錄，將看完的影片疏理為短小筆記 。
特別有感的是，現在回頭看，發現影片中每個提及的知識點或是誤區自己都踩過好幾輪了，這是在學習及練習中很常會反覆發生、需要注意的地方，提醒自己在接下來的練習中，能將老師提及的思維及作法吸取並應用。
本篇將不同 Sass 學習資源彙整在此，作爲學習筆記，大多來自 w3schools 和六角學院，相關連結也一並記錄下來，以便可以隨時查看、更新。