一、CSS概念

? ? ?CSS（Cascading Style Sheets，層疊樣式表）是一種用于描述?HTML?或?XML（如 SVG、XHTML）文檔?樣式?的樣式表語言。它控制網頁的?外觀和布局，包括字體、顏色、間距、背景、動畫等視覺效果。

二、CSS 的作用

1. 樣式與結構分離

   • HTML 負責網頁的?內容結構（如標題、段落、圖片）。

   • CSS 負責?視覺表現（如字體大小、顏色、布局）。

   • 兩者分離使代碼更易維護和修改。

2. 控制網頁外觀

   • 精確調整元素的?顏色、字體、間距、邊框、背景?等。

   • 實現?響應式設計（適配手機、平板、電腦等不同設備）。

3. 布局與動畫

   • 通過?Flexbox、Grid?等實現復雜布局。

   • 使用?過渡（Transition）和動畫（Animation）?增強交互體驗。

三、CSS 的基本工作原理

1. 選擇器（Selector）
   指定要樣式化的 HTML 元素（如?p、.class、#id）。

2. 屬性與值（Property & Value）
   定義具體的樣式規則（如?color: red;）。

3. 層疊（Cascading）

   • 當多個樣式規則沖突時，按?優先級?決定最終效果。

   • 優先級規則：!important?> 內聯樣式 > ID > 類 > 元素選擇器。

?四、CSS 基本語法

選擇器 {屬性: 值;  /* 聲明塊 */
}

h1 {color: red;     /* 文字顏色 */font-size: 24px; /* 字號 */
}

?五、CSS 的三種引入方式

方式	示例	適用場景
內聯樣式	<p style="color: red;">	快速測試，但不推薦大規模使用
內部樣式表	<style> p { color: red; } </style>	小型項目或單頁
外部樣式表	<link href="style.css" rel="stylesheet">	主流方式，便于維護

六、CSS 基礎選擇器

選擇器類型	示例	作用
元素選擇器	p	選擇所有?<p>?標簽
類選擇器	.active	選擇?class="active"?的元素
ID 選擇器	#main	選擇?id="main"?的元素
通配選擇器	*	選擇所有元素
屬性選擇器	[type="text"]	選擇指定屬性的元素
分組選擇器	h1, h2	同時選擇多個元素

補充說明

• 優先級：ID 選擇器 > 類選擇器 > 元素選擇器 > 通配選擇器。

• 組合使用：基礎選擇器可組合成更復雜的選擇器（如后代選擇器?.box p）。

實際應用：

1.?元素選擇器（標簽選擇器）

?場景：統一設置所有段落文本的樣式。

  <p>這是一個普通段落。</p><p>這是另一個段落。</p>

/* 選中所有 <p> 元素 */p {font-size: 36px;line-height: 1.5;color: #bd2222;border: 3px solid #ccc;}

2.?類選擇器（Class Selector）

場景：標記需要高亮的按鈕和警告文本。

    <button class="btn-primary">提交</button><div class="alert">警告信息！</div>

 /* 選中所有 class="btn-primary" 的元素 */.btn-primary {background: blue;color: white;}/* 選中所有 class="alert" 的元素 */.alert {color: rgb(178, 192, 95);font-weight: bold;background: rgb(48, 35, 35);border: 1px solid rgb(178, 192, 95);width:100px;height:20px;}

?

3.?ID 選擇器

場景：設置頁面頂部導航欄的樣式（ID 唯一）。

 <nav id="main-nav"><a href="#">首頁</a><a href="#">登錄</a><a href="#">注冊</a></nav>

 /* 選中 id="main-nav" 的元素 */#main-nav {background: black;padding: 10px;}/* 選中導航欄內的 <a> 標簽 */#main-nav a {color: white;text-decoration: none;padding: 5px 10px;}

4.?通配選擇器（Universal Selector）

場景：重置默認邊距和盒模型。

/* 全局重置 */
* {margin: 0;padding: 0;box-sizing: border-box;
}

? 所有元素的外邊距和內邊距被清零，盒模型更易控制。

?

5.?屬性選擇器（Attribute Selector）

場景：為所有外部鏈接添加圖標。

  <a href="https://www.baidu.com" target="_blank">外部鏈接</a><a href="./my.html" name="inner">內部鏈接</a>

  /* 選中帶有 target="_blank" 的 <a> 標簽 */a[target="_blank"]::after {content: "↗";margin-left: 5px;}a[name="inner"]::after {content: "↗";margin-left: 5px;}

6.?分組選擇器（Grouping Selector）

場景：統一標題字體。

    <h1>標題1</h1><h2>標題2</h2><h3>標題3</h3>

/* 同時選中 h1, h2, h3 */h1,h2,h3 {font-family: "Microsoft YaHei", sans-serif;margin-bottom: 10px;color: blueviolet;}

綜合案例：一個簡單的卡片組件

  <div class="card" id="featured-card"><h2 class="card-title">特別推薦</h2><p class="card-content">請單擊查看詳情</p><button type="button" class="btn">了解更多</button></div>

     /* 元素選擇器 */p {margin: 5px 0;}/* 類選擇器 */.card {width: 150px;height: 180px;/* 為卡片添加邊框 */border: 5px solid #ddd;padding: 5px;}.card-title {font-size: 25px;text-align: center;}.card-content {font-size: 20px;text-align: center;color: cadetblue;} .btn {background: orange;color: white;margin-left: 60px;margin-top: 30px;}/* ID 選擇器 */#featured-card {border-color: gold;/* 高亮特色卡片 */}

?