CSS简介
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用来描述网页文件（HTML、XML等）样式和布局的标记语言。通过使用CSS，可以控制元素的外观、排版、颜色、字体等方面的表现，使网页具有更好的可读性、可访问性和视觉效果。
CSS 的设计目的是将文档内容（如HTML元素）与其样式（如颜色、字体、布局）分离，从而实现内容和表现的分离。这样做使得网页维护更加方便，可以通过修改一处CSS样式来改变整个网站的外观，而不需要逐个修改每个页面。
CSS 包括选择器（Selectors）、属性（Properties）和值（Values）这三部分组成。选择器用于选中要应用样式的HTML元素，属性用于指定要修改的样式属性，值用于定义属性的具体取值。
总的来说，CSS 是构建网页样式和布局的重要工具，它使得网页设计变得更加灵活、易于维护，并且有助于提升用户体验。
CSS选择器
基础选择器
标签选择器
标签选择器可以把某一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style type="text/css">
/* 标签选择器: 写上标签名 */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>刘德华</p>
<p>张学友</p>
<p>黎明</p>
<p>郭富城</p>
<div id="">
梅艳芳
</div>
<div id="">
陈慧琳
</div>
<div id="">
林忆莲
</div>
<div id="">
叶倩文
</div>
</body>
</html>
类选择器
如果想差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 类选择器口诀:样式点定义 结构类class调用 一个或多个 */
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">刘德华</li>
<li>郭富城</li>
<li class="green">张学友</li>
<li>黎明</li>
<li class="red">梅艳芳</li>
<li>叶倩文</li>
<li class="green">林忆莲</li>
<li>陈慧琳</li>
</ul>
<div class="red">
香港
</div>
</body>
</html>
案列：使用类选择器花盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="red">
</div>
<div class="green">
</div>
<div class="red">
</div>
</body>
</html>
类选择器-多类名
在标签class中写多个类名；多个类名中间必须用空格分开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red {
color: red;
}
.font35 {
/* 字体大小 */
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">
刘德华
</div>
</body>
</html>
id选择器
id选择器一般用于页面唯一性的元素上，经常和js搭配使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- #id名{
属性1：属性值1
.....
} -->
<!-- id选择器的口诀，样式#定义， 结构id调用，只能调用一次，别人切勿使用。 -->
<style type="text/css">
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">
刘德华和张学友在一起吃饭。
</div>
</body>
</html>
通配符选择器
通配符选择器使用 " * "定义，它表示选取页面中所有的元素（标签）
通配符选择器不需要被调用，自动就给所有的元素使用样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- * {
属性1：属性值1；
......
} -->
<style type="text/css">
*{
color: red;
}
/* *这里把html body div span li 等等的标签都改为了红色. */
</style>
</head>
<body>
<div>
刘德华
</div>
<span>
是帅哥！
</span>
<ul>
<li>我是帅哥！</li>
</ul>
</body>
</html>
复合选择器
####
https://blog.csdn.net/Queen741740155/article/details/137024810?spm=1001.2014.3001.5501
CSS字体属性
font-family设置字体
各种字体之间必须用英文状态下的都好隔开；如果有空格隔开的多个单词组成的字体，加引号；
font-family: "Times New Roman", serif;
在这个例子中，浏览器将首先尝试使用"Times New Roman"字体。如果系统中没有该字体，它将回退到使用serif字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h4 {
font-family: '宋体';
}
p {
font-family: 'microsoft yahei', arial;
}
</style>
</head>
<body>
<h4>静夜思</h4>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>
font-size字号大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
/* 可以给body指定整个页面文字的大小 */
/* 标题标签比较特殊,需要单独制定文字大小; */
font-size: 20px;
}
h4 {
font-size: 40px;
}
</style>
</head>
<body>
<h4>静夜思</h4>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>
font-weight字体粗细
| 属性值 | 描述 |
| normal | 默认值，不加粗 |
| bold | 定义粗体，加粗 |
| 100~900 | 400=normal， 700=bold，数字后不带单位 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.weight {
font-weight: 100;
}
.bold {
font-weight: bold;
}
.normal {
font-weight: normal;
}
</style>
</head>
<body>
<h4>静夜思</h4>
<p class="weight">床前明月光，</p>
<p class="bold">疑是地上霜。</p>
<p class="normal">举头望明月，</p>
<p>低头思故乡。</p>
</body>
</html>
font-style字体样式
| 属性值 | 作用 |
| normal | 默认值，浏览器会显示标准的字体样式； |
| italic | 浏览器会显示斜体的字体样式； |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<div>回眸一笑百媚生</div>
<!-- em标签定义斜体字 -->
<em>她回头嫣然一笑，百般娇媚同时显现出来。它赞美了杨贵妃的美貌，生动描绘了她的风姿</em>
</body>
</html>
font复合属性写法
复合属性：简写的方式
font: font-style font-weight font-size/line-height font-family;
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
不需要设置的属性可以省略（取默认值），但必须保留font-size 和 font-family， 否则font属性将不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px "microsoft yahei"
}
</style>
</head>
<body>
<div>
在整首诗中，白居易描述了唐玄宗和杨贵妃之间的爱情故事，以及他们因为安史之乱而被迫分离的悲剧。这句“回眸一笑百媚生”正是对杨贵妃美丽容颜的赞美，也反映了唐玄宗对她的深深迷恋。
</div>
</body>
</html>
CSS文本属性
文本颜色color
| 表示 | 属性值 |
| 预定义的颜色值 | red, green, pink..... |
| 十六进制 | #FF0000, #FF6600..... |
| RGB代码 | rgb(255,0,0)........... |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
color: pink;
}
</style>
</head>
<body>
<div>
最后，我想对你说，我爱你，不仅仅是因为你的美丽和善良，更因为你的存在让我的生命变得更加完整和美好。请相信我对你的爱是真挚的、坚定的，我会用我的一生去守护你、珍惜你。
</div>
</body>
</html>
文本对齐text-align
用于设置元素内文本内容的水平对齐方式，不能设置垂直对齐。
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<div>
我知道，爱情不是一时的冲动，而是需要用心去经营和呵护。我愿意用我全部的热情和耐心，去陪伴你、关心你、照顾你。我会在你需要的时候，伸出我的手，给你力量和勇气。我会在你快乐的时候，陪你一起欢笑，分享你的喜悦。
未来的路还很长，但我相信，只要我们携手并进，相互扶持，我们一定能够走过每一个难关，共同创造属于我们的幸福。我期待着与你一起经历人生的风风雨雨，一起分享生活的喜怒哀乐。
最后，我想对你说，我爱你，不仅仅是因为你的美丽和善良，更因为你的存在让我的生命变得更加完整和美好。请相信我对你的爱是真挚的、坚定的，我会用我的一生去守护你、珍惜你。
</div>
</body>
</html>
文本装饰text-decoration
| 属性值 | 描述 |
| none | 默认，没有装饰线 |
| overline | 下划线 |
| underline | 上划线 |
| line-through | 删除线 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div {
color: blue;
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<div>
我知道，爱情不是一时的冲动，而是需要用心去经营和呵护。我愿意用我全部的热情和耐心，去陪伴你、关心你、照顾你。我会在你需要的时候，伸出我的手，给你力量和勇气。我会在你快乐的时候，陪你一起欢笑，分享你的喜悦。
未来的路还很长，但我相信，只要我们携手并进，相互扶持，我们一定能够走过每一个难关，共同创造属于我们的幸福。我期待着与你一起经历人生的风风雨雨，一起分享生活的喜怒哀乐。
最后，我想对你说，我爱你，不仅仅是因为你的美丽和善良，更因为你的存在让我的生命变得更加完整和美好。请相信我对你的爱是真挚的、坚定的，我会用我的一生去守护你、珍惜你。
</div>
</body>
</html>
可以利用none消除链接所带的下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>
文本缩进text-indent
用来指定文本的第一行的缩进，通常是将段落后的首行缩进。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>当我提起笔来，想要写下对你的感情时，却发现千言万语都难以表达我内心深处的情感。在这封情书中，我想向你倾诉我对你的爱意，让你知道你在我心中的位置有多么重要。</p>
<p>从我们相识的那一刻起，我就被你的美丽与善良所吸引。你的笑容如同阳光般温暖，照亮了我内心的每一个角落。每当我看到你时，心中都会涌起一股莫名的欢喜，仿佛整个世界都因为你的存在而变得美好。</p>
<p>我们共度的时光，是我生命中最珍贵的回忆。那些一起度过的日子，无论是喜怒哀乐，都让我感到无比幸福。我喜欢和你一起看电影、听音乐，喜欢和你一起分享生活的点滴。你的每一个动作、每一个眼神，都深深地印在了我的心里。</p>
<p>我知道，爱情不是一时的冲动，而是需要用心去经营和呵护。我愿意用我全部的热情和耐心，去陪伴你、关心你、照顾你。我会在你需要的时候，伸出我的手，给你力量和勇气。我会在你快乐的时候，陪你一起欢笑，分享你的喜悦。</p>
<p>未来的路还很长，但我相信，只要我们携手并进，相互扶持，我们一定能够走过每一个难关，共同创造属于我们的幸福。我期待着与你一起经历人生的风风雨雨，一起分享生活的喜怒哀乐。</p>
</body>
</html>
em是一个相对单位，就是元素1个文字的大小
行间距line-height
用于设置行间的距离（行高），可以控制文字行与行之间的距离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p {
text-indent: 2em;
line-height: 26px;
}
</style>
</head>
<body>
<p>当我提起笔来，想要写下对你的感情时，却发现千言万语都难以表达我内心深处的情感。在这封情书中，我想向你倾诉我对你的爱意，让你知道你在我心中的位置有多么重要。</p>
<p>从我们相识的那一刻起，我就被你的美丽与善良所吸引。你的笑容如同阳光般温暖，照亮了我内心的每一个角落。每当我看到你时，心中都会涌起一股莫名的欢喜，仿佛整个世界都因为你的存在而变得美好。</p>
<p>我们共度的时光，是我生命中最珍贵的回忆。那些一起度过的日子，无论是喜怒哀乐，都让我感到无比幸福。我喜欢和你一起看电影、听音乐，喜欢和你一起分享生活的点滴。你的每一个动作、每一个眼神，都深深地印在了我的心里。</p>
<p>我知道，爱情不是一时的冲动，而是需要用心去经营和呵护。我愿意用我全部的热情和耐心，去陪伴你、关心你、照顾你。我会在你需要的时候，伸出我的手，给你力量和勇气。我会在你快乐的时候，陪你一起欢笑，分享你的喜悦。</p>
<p>未来的路还很长，但我相信，只要我们携手并进，相互扶持，我们一定能够走过每一个难关，共同创造属于我们的幸福。我期待着与你一起经历人生的风风雨雨，一起分享生活的喜怒哀乐。</p>
</body>
</html>
CSS引入方式
内部样式表（行内式）
内部样式表写在HTML文档的<head>部分中的<style>标签内。这种方法适用于单个HTML文档的样式定义，但如果多个HTML文档需要使用相同的样式，那么这种方法就不够灵活了。
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一段红色的文字。</p>
</body>行内样式表（嵌入式）
行内样式直接写在HTML元素的style属性中。这种方法主要用于单个元素的样式定义，且不推荐用于大型项目，因为它会使得HTML和CSS的分离性变差，不利于样式的复用和维护。
<p style="color: red;">这是一段红色的文字。</p>
外部样式表（链接式）
外部样式表是一个单独的.css文件，通过HTML文档的<link>标签引入。这是最常用的方法，因为它可以实现样式的复用，使HTML文档和CSS样式分离，有利于样式的维护和修改。
首先，你需要创建一个.css文件，例如styles.css，并在其中定义你的样式：
/* styles.css */
p {
color: red;
}<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>这是一段红色的文字。</p>
</body>在上述代码中，rel="stylesheet"定义了当前文档与被链接文档之间的关系是样式表，type="text/css"定义了被链接文档的MIME类型是CSS，href="styles.css"则指定了被链接文档的位置。
在实际开发中，我们通常会选择使用外部样式表的方式来管理样式，因为它更加灵活和易于维护。
Emmet语法
Emmet语法，前身称为Zen coding，是一种用于快速编写HTML和CSS代码的工具。它使用缩写来提高编写速度，使得开发者能够更高效地创建网页结构。以下是Emmet语法的一些基本规则和用法：
HTML部分：
-
生成标签：直接输入标签名，然后按Tab键，即可生成对应的HTML标签。例如，输入
div后按Tab键，会生成<div></div>。 -
生成多个相同标签：在标签名后加上
*和数量，可以快速生成多个相同的标签。例如，div*3会生成三个<div></div>。 -
父子级关系：使用
>表示父子级关系。例如，ul>li会生成一个<ul>标签，其内部包含一个<li>标签。 -
兄弟关系：使用
+表示兄弟关系。例如，div+p会生成一个<div>标签和一个紧接其后的<p>标签。 -
带有类名或ID的标签：使用
.后跟类名表示类选择器，使用#后跟ID名表示ID选择器。例如，.container会生成<div class="container"></div>，#header会生成<div id="header"></div>。 -
标签内文本：使用
{}表示标签内的文本内容。例如，p{Hello}会生成<p>Hello</p>。 -
自增符号：使用
$可以生成带有顺序的类名或ID。例如，ul>li.item$@-*5会生成一个<ul>标签，其内部包含五个<li>标签，每个<li>标签的class从item1递增到item5。
CSS部分：
Emmet也支持快速生成CSS样式。例如，输入w200后按Tab键，会生成width: 200px;。
VS Code集成：
VS Code内部已经集成了Emmet语法，因此你可以直接在VS Code中使用Emmet的简写来快速编写HTML和CSS代码。
总的来说，Emmet语法通过简化代码编写过程，大大提高了开发者的工作效率。掌握这些基本规则和用法，将使你能够更快速地构建出结构清晰、样式美观的网页。
CSS的元素显示模式
块元素
块元素（block element）是HTML规范中的概念，与其对应的是内联元素（inline element）。块元素在页面中以区域块的形式出现，每个块元素通常都会独占一行或多行，可以对其设置宽度、高度、对齐等属性。它们常用于网页布局和网页结构的搭建。
块元素的基本特点是：
- 总是在新行上开始，相邻的块级元素将会在不同行显示。
- 高度、行高以及顶和底边距都可控制。
- 宽度缺省是它的容器的100%，除非设定一个宽度。
常见的块元素包括：
<p>：用于表示段落。<h1>-<h6>：用于表示标题，其中<h1>是最高级别的标题。<ul>、<ol>、<li>：用于创建无序列表和有序列表。<div>：用于分组和布局页面元素，是最典型的块元素。<hr>：用于创建水平线。<pre>：用于展示预格式化的文本，其中的空格、回车等会保留在输出结果中。
由于块级元素会占据一整行，因此它们通常用于分隔和布局页面的不同区域，通过设置宽度和高度等盒模型属性，可以实现复杂的布局效果。
<!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 {
background-color: pink;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div>独占一行</div>瑟瑟发抖吧
</body>
</html>
行内元素
行内元素（inline element）是HTML元素中的一种，与块元素（block element）相对。行内元素不会开始新的一行，它们会和其他元素都在一行上。行内元素的高度、行高及外边距和内边距部分可改变；宽度就是它的文字或图片的宽度，不可改变。
行内元素的特点包括：
- 和其他元素都在一行上。
- 高、宽直接设置无效。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或者其他行内元素（img、input、select、a标签等）。
常见的行内元素有：
<span>：用于对文本中的一部分进行单独样式设置。<a>：用于创建超链接。<img>：用于插入图像。<br>：用于插入换行符。<input>：用于创建输入字段，如文本框、密码框、单选框等。<label>：用于定义表单控件的描述。<select>和<option>：用于创建下拉列表。
行内元素通常用于在文本中嵌入其他内容，如链接、图片或强调某些文本。由于它们不会打断文本流，所以非常适合用于在文本中插入小图标、标记或链接等。
需要注意的是，HTML5规范中引入了一些新的元素，它们的显示方式可能既不是纯粹的块级也不是纯粹的行内，而是介于这两者之间，比如<section>、<article>等。这些元素被称为“块级内联元素”或“行内块元素”，它们具有一些块级和行内元素的特性，使得页面布局更加灵活。
行内块元素
行内块元素（inline-block element）是HTML元素中的一种，它结合了行内元素和块元素的特点。行内块元素既不会像块元素那样独占一行，也不会像行内元素那样无法设置宽度和高度。它们可以在一行内显示，同时可以设置宽度、高度、内边距和外边距等属性。
在行内元素中有几个特殊的标签---img、input、 td，它们同时具有块元素和行内元素的特点
行内块元素的主要特点包括：
- 可以在同一行内显示多个行内块元素，直到一行空间不足才会换行。
- 可以设置宽度和高度，这是与纯行内元素的主要区别。
- 可以设置内边距和外边距，进一步控制元素在页面上的布局和显示。
常见的行内块元素主要是通过CSS的display属性设置为inline-block的元素。任何元素都可以被设置为行内块元素，这主要取决于其CSS样式设置。
行内块元素在网页布局中非常有用，特别是在需要同时保持元素的行内特性和块级特性的情况下。例如，你可能想要在一行内显示多个可设置宽高的元素，这时就可以使用行内块元素来实现。
请注意，行内块元素的布局和显示受到多种CSS属性的影响，包括display、width、height、padding、margin等。因此，在使用行内块元素时，需要仔细考虑这些属性的设置，以确保元素能够正确地显示和布局。
显示模式的转换
行内元素转换为块元素：display:block
块元素转换为行内元素：display:inline;
转换为行内块元素：display:inline-block
<!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>
a {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a转换为 块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: red;
/* 把div 块元素转换为行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: blue;
/* 行内元素span 转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">行内元素</a>
<a href="#">行内元素</a>
<div>块级元素</div>
<div>块级元素</div>
<span>行内元素</span>
<span>行内元素</span>
</body>
</html>
操作案例
<!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>
a {
display: block;
width: 230px;
height: 30px;
color: rgb(255, 255, 255);
background-color: rgb(83, 87, 89);
text-decoration: none;
font-size: 14px;
text-indent: 2em;
}
a:hover {
background-color: rgb(241, 105, 0);
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>单行文字垂直居中的原理
CSS的背景
背景颜色
background-color：设置元素的背景颜色。你可以使用颜色名称、十六进制颜色代码、RGB、RGBA、HSL 或 HSLA 值来定义颜色。
body {
background-color: #f0f0f0;
}背景图片
background-image：设置元素的背景图像。你可以使用 URL 来指定图像的路径。
body {
background-image: url('background.jpg');
}背景平铺
background-repeat：定义背景图像是否以及如何重复。可选的值有 repeat（默认值，水平和垂直都重复）、repeat-x（仅水平重复）、repeat-y（仅垂直重复）和 no-repeat（不重复）。
默认 不平铺 水平平铺 垂直平铺
div {
height: 300px;
width: 300px;
background-image: url(logo.png);
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
background-repeat: repeat-y;
}
背景图片位置
参数是方位名词
background-position：设置背景图像的起始位置。你可以使用两个值来分别设置水平和垂直位置，或者使用关键字（如 top、bottom、left、right、center）来定位。
div {
height: 300px;
width: 300px;
background-image: url(logo.png);
background-color: pink;
background-repeat: no-repeat;
方位名词 跟顺序没有关系
background-position: center right;
}
</style>
如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐；
参数是精确单位
div {
height: 300px;
width: 300px;
background-image: url(logo.png);
background-color: pink;
background-repeat: no-repeat;
background-position: 50px 20px;
}
</style>
如果只指定一个数值，那么该数值一定是X轴，另一个默认垂直居中；
参数是混合单位
div {
height: 300px;
width: 300px;
background-image: url(logo.png);
background-color: pink;
background-repeat: no-repeat;
/* background-position: 50px 20px; */
background-position: 20px center;
</style>
背景图像固定
background-attachment：设置背景图像是固定（不会随着页面的其余部分滚动）还是随着页面的其余部分滚动。可选的值有 scroll（默认值，背景图像随着页面其余部分滚动）和 fixed（背景图像固定，不随页面滚动）。
body {
background-attachment: fixed;
}背景复合写法
background：这是一个简写属性，用于在一个声明中设置所有背景属性。按照 background-color, background-image, background-repeat, background-attachment, background-position 的顺序设置。注意，background-size 不在这个简写列表中，需要单独设置。
background : 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
<style>
body {
/* background-image: url(王者.png);
background-repeat: no-repeat;
background-position: center 40px;
background-attachment: fixed; */
background: black url(王者.png) no-repeat fixed center 40px;
}
</style>背景颜色半透明
background: rgba(0, 0, 0, 0.3)
<!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 {
widows: 300px;
height: 300px;
/* 第四个参数的取值0~1 */
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS的三大特性
层叠性。
相同的选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
样式冲突，遵循的原则是就近原则，那个样式离结构近，就执行哪个样式。
样式不冲突不会层叠。
继承性
某些CSS属性（如字体样式和颜色）会从父元素继承到子元素。这意味着，如果没有为子元素明确指定这些属性的值，它们将使用父元素的样式。
优先级
CSS选择器权重是CSS中一个重要的概念，它决定了当多个样式规则应用于同一个元素时，哪个规则会最终生效。权重基于设定的匹配规则，浏览器通过设定好的优先级来判断哪些属性值对DOM元素最为相关，从而在该DOM上应用这些值。
CSS选择器权重的计算规则如下：
- 内联样式规则的权值最高，为1000。
- ID选择器的权值为0100。
- 类选择器、伪类选择器和属性选择器的权值为0010。
- 元素选择器和伪元素选择器的权值为0001。
- 通配符选择器、子元素选择器和相邻元素选择器的权值为0000。
- 继承的样式没有权值。
当比较权重时，从左往右依次比较，前一等级相等才能往后比。此外，!important规则的优先级最高，无论其出现在哪种类型的选择器中，都会覆盖其他没有使用!important的相同或较低优先级的规则。
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
