CSS:
HTML負責定義頁面結構；JS負責處理頁面邏輯和點擊事件；CSS負責用于描述 HTML 元素的顯示方式，通過 CSS 可以控制顏色、字體、布局等。
核心語法：
選擇器：
類選擇器主要用于選中需要添加樣式的 HTML 元素。主要分為：類選擇器（.class-name { ... }）、標簽選擇器（p { ... }）和ID選擇器（#id-name { ... }）。
類選擇器：1.類選擇器是最常用的，不易造成污染；2.不同元素選擇器可以共享同一個類選擇器；3.同一個元素上分配多個類選擇器，使用空格隔開。
層級關系：.parent { .child { color: blue; }}寫法；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./test.css">
</head>
<body><!-- 元素選擇器、類選擇器和ID選擇器 --><h4>元素選擇器</h4><p class="classSelector">類選擇器</p><!-- id選擇器只能出現一次，可能會導致DOM解析失敗 --><p id="idSelector">ID選擇器</p><!-- 1.類選擇器是最常用的，不易造成污染；2.不同元素選擇器可以共享同一個類選擇器 --><p class="purple">紫色類選擇器</p><p class="orange">橙色類選擇器1</p><p class="orange">橙色類選擇器2</p><!-- 層級關系: .parnet.child --><div class="parent"><div class = "child">父層級中的子層級</div></div><div class = "child">同類名其他層級</div><!-- 同一個元素上分配多個類選擇器：使用空格隔開 --><div class ="violet text-lg">復雜的樣式</div>
</body>
</html>h4 {color: red;
}.classSelector {color: green;
}#idSelector {color: blue;
}.orange {color: orange;
}.purple {color: purple;
}.parent {.child {color: blue;}
}.violet {color: grey;
}.text-lg {font-size: 50px;
}
屬性和值：
顏色、背景和邊框：
顏色：一般使用RGB和HEX表示顏色；RGB:紅綠藍、0-255；HEX：RGB的16進制轉換；
透明度：1.RGBA中的alpha,取值0-1；2.opacity含義為所有元素及子元素的透明度，無法精確獨立調整透明度。
<body><!-- 顏色:1.一般使用RGB和HEX表示顏色；RGB:紅綠藍、0-255；HEX：RGB的16進制轉換;2. 顏色可以賦值給所有以顏色為值的語句中 --><div class="rgb">用RGB標識顏色</div><div class="hex">用HEX標識顏色</div><!-- 透明度:1.RGBA中的alpha,取值0-1；2.opacity含義為所有元素及子元素的透明度，無法精確獨立調整透明度 --><div class="background-color text-opacity">背景顏色</div><div class="border-color opacity">邊框顏色</div></body>.rgb {color: rgb(235, 70, 224)
}.hex {color: #eb46e0
}.background-color {background-color: #a
)
