我的主页：2的n次方_
CSS 用于定义网页的样式，包括字体、颜色、布局、背景等各个方面。它与 HTML 紧密结合，HTML 负责构建网页的结构，而 CSS 则负责美化这个结构。
1. 三种引入方式
1.1. 行内样式
直接在标签内引用 style 属性
<body>
<span style="color: red;">你好</span>
</body>
1.2. 内部样式
使用<style> 标签，在标签内部定义 css 样式
<style>
p{
color: rgb(4, 0, 255);
}
</style>
<p>hello1</p>
<p style="color: aqua;">hello2</p>
<span style="color: red;">你好</span>
这里用到了选择器，标签 p 里的内容会被修改为 style 标签里的样式，如果直接在 p 标签里指定了样式后，会优先使用此时指定的样式
1.3. 外部样式
定义 <link> 标签，通过 href 属性引用外部 css 文件
把 css 样式设置代码单独存放在一个文件中
html 文件中的 head 标签中引入 link 标签：
<link rel="stylesheet" href="test1.css">
2. CSS 选择器
CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素之后才可以设置属性，CSS 的选择器有：标签选择器，class 选择器，id 选择器，复合选择器，通配符选择器
2.1. 标签选择器
上面用的 p 标签就是标签选择器
直接以标签名字开头
p {
color: rgb(4, 0, 255);
}
span {
color: rgb(255, 0, 0);
} <p>hello1</p>
<p>hello2</p>
<span >你好</span>
2.2. class 选择器
上面的话是把所有的相同的标签进行了样式设定，但是不能设置的再细一点，例如每个 p 标签都设置为不同的样式，所以就引入了 class 选择器
class 选择器以 ' . ' 开头
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}<body>
<p class="red">hello1</p>
<p class="blue">hello2</p>
<span class="green">你好</span>
</body>
2.3. id 选择器
id 选择器以 “#” 开头，后面紧跟元素的 id 名称，当多个选择器同时作用于一个元素时，id 选择器的优先级通常高于类选择器和标签选择器。
规范：每个 id 值应该是唯一的，但是也可以多个元素具有相同的 id ，不过可能发生混乱
#aaa {
color: greenyellow;
}<div>
<ul>
<li id="aaa">aaa</li>
<li>bbb</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
</ol>
</div>
2.4. 通配符选择器
通配符选择器是只写一个 * 表示全部，也就是全部内容都会被选中
* {
color: red;
}<body>
<p>你好</p>
<span>你好</span>
<div>你好</div>
</body>
2.5. 复合选择器
复合选择器是由多个单选择器组合的，根据单选择器之间的分隔符号来表示不同的复合效果
- 空格：表示后代
<div>
<ul>
<li id="aaa">aaa</li>
<li>bbb</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
</ol>
</div>
也可以直接找下一级后代
<ul>
<li id="aaa">aaa</li>
<li class="c1"><a href="#">li 里的超链接</a></li>
</ul>ul a {
color: green;
}
- 没空格：表示交集
p.red {
color: red;
}<p class="red">hello1</p>
<p class="blue">hello2</p>
- 逗号：表示并集
.red,.blue {
font-size: 20px;
}
- >：表示相邻后代，就不能像空格那样直接可以跨几个后代
ul>li {
color: red;
}3. 常用的几种样式
3.1. color
color：颜色，有下面的几种表示：
- 英文单词，如 red ，blue
- rgb 代码的颜色，如 rgb(255,0,0)
- hsl 代码的颜色，如 hsl(0, 100%, 50%)
- 十六进制的颜色，如 #ff00ff
3.2. font-size
font-size：字体大小
单位有 px, pt, em, rem, %
3.3. border
border：边框
| 样式 | 说明 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-style | 设置边框样式 | • dotted : 点状 • solid 实线 • double : 双线 • dashed: 虚线 |
| border-color | 设置边框颜⾊ | 同 color |
3.4. width / height
width / height：设置宽高
只有块级元素可以设置宽高，对应的是行内元素，常见的块级元素有：h1 - h6 ,p ,div 等，常见的块级元素有 a ,span
div {
height: 60px;
width: 100px;
border: 1px red solid;
}
span {
width: 100px;
height: 20px;
border: 1px red solid;
};<div>你好</div>
<span>你好</span>可以看出 div 生效了，span 并没有生效
通过 display : block 可以改成块级元素，display : inline 改成行内元素
div {
height: 60px;
width: 100px;
border: 1px red solid;
}
span {
display: block;
width: 100px;
height: 20px;
border: 1px red solid;
};
3.5. padding 和 margin
padding：内边距
margin：外边距
内边距和外边距都是相对于来说的，比如 A 相对于 B 的内边距是 10 ，那么可能就是 A 相对于 C 的外边距是 10
div {
height: 60px;
width: 100px;
border: 1px red solid;
margin: 20px;
}
如果说这两个框都设置了外边距，那么就按照边距最大的那个来设置，并不会是相加关系
也可以调 html 标签的内边距
html{
padding: 200px;
}