HTML 被用来创建网页的骨架，即定义网页的结构和内容，例如文本、图片、链接等元素的组织方式。而CSS则是用来装饰这些结构，即通过定义颜色、字体、布局等视觉样式来美化HTML元素。
1. 基本语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title>
</head>
<body><div>你好世界！</div><span>Hello World！</span>
</body>
</html>现在我有如下html代码，现在我想把div标签的内容改为显示绿色文字，可以有如下几种写法：
1. 行内样式：
在标签内使用style属性，属性值是css属性键值对
<div style="color: green;">你好世界！</div>2. 内部样式：
定义style标签，在标签内部定义css样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title><style>div{color: green;}</style>
</head>
<body><div>你好世界！</div><span>Hello World！</span>
</body>
</html>div{}表示选中div标签
3. 外部样式：
定义link标签通过href属性引入外部css文件
创建一个css文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title><link rel="stylesheet" href="style.css">
</head>
<body><div class = "a" id = "c">你好世界！</div><div class = "a" id = "d">div</div><div><span class = "b" id = "d">Hello World！</span><br/><span class = "b" id = "c">span</span></div>
</body>
</html>
2. CSS 选择器
选择器的主要作用就是选中页面中指定的标签元素，选中了元素才可以设置元素的样式
2.1 标签选择器
上面的内部样式中的div{}就是一个标签选择器，选择了div标签。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title><style>div{color: green;}span{color:red;}</style>
</head>
<body><div>你好世界！</div><div>div</div><span>Hello World！</span><br/><span>span</span>
</body>
</html>
2.2 类选择器
可以给标签加上类属性，即clas，然后就可以使用类选择器选中该标签：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title><style>.a{color: red;}</style>
</head>
<body><div class = "a">你好世界！</div><div class = 'b'>div</div><span class = 'a'>Hello World！</span><br/><span class = 'b'>span</span>
</body>
</html>
注意：类选择器要在类名前加一个（.）表示这是类选择器，和标签选择器区分开。
2.3 id选择器
和类选择器类似，我们给标签添加id属性就可以使用id选择器进行选择了，id选择器需要在前面加上#表示是id选择器：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title><style>#d{color: red;}</style>
</head>
<body><div class = "a" id = "c">你好世界！</div><div class = 'b' id = "d">div</div><span class = 'a' id = "d">Hello World！</span><br/><span class = 'b' id = "c">span</span>
</body>
</html>
2.4 复合选择器
相当于前面三个选择器的嵌套组合：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test3</title><style>div.a#c{color: red;}div span.b#d {color: green;}</style>
</head>
<body><div class = "a" id = "c">你好世界！</div><div class = "a" id = "d">div</div><div><span class = "b" id = "d">Hello World！</span><br/><span class = "b" id = "c">span</span></div>
</body>
</html>注意标签与标签之间没有符号时使用空格隔开，如果有则不能加空格
3. 常用CSS样式
3.1 color
color用于设置字体颜色，前面我们已经用过，颜色有三种表示方式：
英语单词：如red，blue
rgb代码：
<style>div{color: rgb(100, 200, 245);}</style>rgb中的数字表示三原色的比重，范围是0到255
十六进制：
<style>div{color: #ff45ff;}</style>相当于把rgb中的三个数字转为16进制
3.2 font-size
font-size用于设置字体大小
<style>div{font-size: 32px;}</style>3.3 border
border：边框，border有多个样式可以设置：
border-width：设置边框粗细
border-style：设置边框样式（dotted点状，solid实线，double双线，dashed虚线）
border-color：设置边框颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{border-width: 2px;border-style: solid;border-color: red;}</style>
</head>
<body><div>color</div>
</body>
</html>
也可以简写为：
<style>div{border: 2px solid red;}</style>3.4 width/height
width：设置宽度
height：设置高度
只有块级元素可以设置宽高，代表该块级元素在页面上占据的区域大小，例如我们上面设置边框样式时显示的边框就是div默认的宽高。
常见的块级元素有：h1-h6，p，div等
常见行内元素：a，span
块级元素独占一行，行内元素不会独占一行。
以上面代码为例，我们给div设置宽高：
<style>div{border: 2px solid red;width: 100px;height: 100px;}</style>
3.5 padding / margin
- padding：内边距，元素内容和元素块边界的距离
- margin：外边距，元素块之间的距离
- padding-top：顶端边距
- padding-bottom：底端边距
- padding-left：左端边距
- padding-right：右端边距
- margin同理
<style>div{border: 2px solid red;width: 100px;height: 100px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}</style>
也可以简写为：
<style>div{border: 2px solid red;width: 100px;height: 100px;padding: 20px;}</style>margin用法相同。
![[C++]类和对象，explicit,static,友元，构造函数——喵喵要吃C嘎嘎4](https://img-blog.csdnimg.cn/direct/488a74bb97bf4690b065600fd08fc5a4.png)
