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 中:

  1. 內聯樣式:直接在 HTML 元素的 style 屬性中定義樣式。
    <p style="color: red;">這是一個紅色文本。</p>

  2. 內部樣式表:在 HTML 文檔的 <head> 部分使用 <style> 標籤定義樣式。
    <head>
    <style>
    p {
    color: blue;
    }
    </style>
    </head>

  3. 外部樣式表:將樣式定義在單獨的 CSS 文件中,並在 HTML 文檔的 <head> 部分使用 <link> 標籤引入該文件。
    <head>
    <link rel="stylesheet" href="styles.css">
    </head>

選擇器與優先級

基本選擇器

  1. 元素選擇器:選擇 HTML 元素。
    p {
    color: green;
    }

  2. 類選擇器:選擇帶有特定 class 屬性的元素。使用 . 作為前綴。
    .example {
    background-color: yellow;
    }

  3. ID 選擇器:選擇帶有特定 id 屬性的元素。使用 # 作為前綴。
    #unique {
    font-weight: bold;
    }

複合選擇器

  1. 後代選擇器:選擇某元素內的所有指定後代元素。
    div p {
    color: blue;
    }

  2. 子選擇器:選擇某元素的直接子元素。
    ul > li {
    list-style-type: none;
    }

  3. 相鄰兄弟選擇器:選擇緊跟在另一元素之後的元素。
    h1 + p {
    margin-top: 0;
    }

  4. 群組選擇器:對多個選擇器應用相同的樣式。
    h1, h2, h3 {
    color: navy;
    }

層疊與優先級

CSS 的層疊性指的是樣式的應用順序和優先級。當多個樣式同時應用於一個元素時,CSS 使用以下規則來決定哪個樣式優先:

  1. 優先級(Specificity)
    • 元素選擇器(最低優先級):div、p、h1
    • 類選擇器:.class
    • 屬性選擇器和偽類選擇器:[type="text"]、:hover
    • ID 選擇器(最高優先級):#id
  2. 來源順序:當優先級相同時,後定義的樣式會覆蓋先前的樣式。
    p {
    color: blue;
    }

    p {
    color: red;
    }

    在這個例子中,段落的顏色會是紅色,因為後面的樣式覆蓋了前面的樣式。
留言
avatar-img
留言分享你的想法!
avatar-img
Michael楊
17會員
111內容數
日後將分享關於我的經驗(日常、工作、技術),並期待未來能創造屬於我的宇宙。
Michael楊的其他內容
2024/08/08
在本章節中,我們介紹了 CSS 偽元素的基本概念和常見用法,通過一些示例,我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外,我們還探討了一些高級用法,如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
Thumbnail
2024/08/08
在本章節中,我們介紹了 CSS 偽元素的基本概念和常見用法,通過一些示例,我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外,我們還探討了一些高級用法,如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
Thumbnail
2024/08/08
在這一章中,我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑,而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果,並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
Thumbnail
2024/08/08
在這一章中,我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑,而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果,並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
Thumbnail
2024/08/07
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
2024/08/07
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
在這個章節中,我們介紹了HTML的基本概念,包括其作為結構化標記語言的特性、應用領域,以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎,幫助讀者了解HTML在現代網頁開發中的重要性。
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
在本章中,我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統,使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目,以及如何使用各種Grid屬性來定義和管理佈局。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
不專業分享個人學習 SCSS 的筆記,知識來源為YTB講解,各路大神文章。
Thumbnail
不專業分享個人學習 SCSS 的筆記,知識來源為YTB講解,各路大神文章。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News