前端入门之CSS
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