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
)
