1.❤️❤️前言~🥳🎉🎉🎉
Hello, Hello~ 亲爱的朋友们👋👋，这里是E绵绵呀✍️✍️。
如果你喜欢这篇文章，请别吝啬你的点赞❤️❤️和收藏📖📖。如果你对我的内容感兴趣，记得关注我👀👀以便不错过每一篇精彩。
当然，如果在阅读中发现任何问题或疑问，我非常欢迎你在评论区留言指正🗨️🗨️。让我们共同努力，一起进步！
加油，一起CHIN UP！💪💪
🔗个人主页：E绵绵的博客
📚所属专栏：1. JAVA知识点专栏
深入探索JAVA的核心概念与技术细节
2.JAVA题目练习
实战演练，巩固JAVA编程技能
3.c语言知识点专栏
揭示c语言的底层逻辑与高级特性
4.c语言题目练习
挑战自我，提升c语言编程能力
5.Mysql数据库专栏
了解Mysql知识点，提升数据库管理能力
6.html5知识点专栏
学习前端知识，更好的运用它
7. css3知识点专栏
在学习html5的基础上更加熟练运用前端
📘 持续更新中，敬请期待❤️❤️
2. CSS语法
<head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> </head>
- 选择器：要修饰的对象（东西）
- 属性名：修饰对象的哪一个属性（样式）
- 属性值：样式的取值
在前端开发中，单引号（
'）和 双引号（"）在大多数情况下是没有功能上的区别的，它们都可以用来表示字符串， 无论是在 HTML 属性、CSS 样式或 JavaScript 中，使用单引号和双引号的效果基本相同css和html不分大小写，JavaScript 区分大小写。
3.选择器
选择器分为 基础选择器 和 复合选择器 两个大类，我们这里先讲解一下基础选择器
基础选择器是由单个选择器组成的，基础选择器包括 标签选择器、类选择器、id选择器和通配符选择器
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签
优点
能快速为页面中同类型的标签统一设置样式
缺点
不能设计差异化样式，只能选择全部的当前标签
<!DOCTYPE html>
<html>
<head>
<style>
/* 使用标签选择器对 p 标签应用样式 */
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
类选择器
CSS 中的类选择器用于选取具有特定类名的 HTML 元素。类选择器在 CSS 中使用一个点号（
.）后跟类名来定义。
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义一个类选择器，选取 class 为 .highlight 的元素 */
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class="highlight">这个段落有一个高亮的背景。</p>
<p>这个段落没有高亮。</p>
<p class="highlight">这个段落也有高亮。</p>
</body>
</html>
一个标签元素可以同时拥有多个类，但必须使用空格分隔：
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
.important {
font-size: 30px;
}
</style>
</head>
<body>
<p class="highlight important">这是一个既高亮又重要的段落。</p>
</body>
</html>
id 选择器
CSS 中的 ID 选择器用于选取具有特定
id属性的元素，ID 选择器在 CSS 中使用井号（#）后跟 ID 名称来定义。每个id在页面中是唯一的，因此 ID 选择器通常只能应用于单个元素。
在 HTML 中，每个
id属性值只能在页面中使用一次，但页面中可以有多个不同的id值。换句话说，每个元素的id必须是独一无二的，但你可以为页面中的不同元素赋予各自不同的id。
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color: lightblue;
}
#main {
font-size: 18px;
}
#footer {
text-align: center;
}
</style>
</head>
<body>
<div id="header">这是头部。</div>
<div id="main">这是主要内容。</div>
<div id="footer">这是底部。</div>
</body>
</html>
在这个例子中，
header、main和footer是不同的id，它们各自对应一个唯一的元素。你可以在页面中定义任意数量的不同id，但每个id只能用于一个元素。
通配符选择器
通配符选择器（
*）是 CSS 中的一种选择器，能够选取页面中的所有元素。它常用于应用一些全局的样式，比如重置页面的默认样式或设置所有元素的通用属性。
<!DOCTYPE html>
<html>
<head>
<style>
/* 通配符选择器将应用于页面中的所有元素 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>这是一个段落。</p>
</body>
</html>
在这个例子中，
*选择器会将所有元素标签中的margin和padding设置为0，box-sizing设置为border-box，从而影响页面中的所有元素。这通常用于重置浏览器的默认样式或进行全局样式调整。虽然通配符选择器很强大，但它可能会影响性能，尤其是在大型页面上，因为它会选取所有元素。使用时应谨慎，确保只在确实需要的地方使用。所以通常我们对它进行使用的很少
4.CSS 字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
font-family
font-family用于设置字体系列。可以为文本指定一种或多种字体，如果浏览器不支持首选字体，会使用后备字体。如果都不支持，则使用通用字体sans-serif。
1.各种字体之间必须使用英文状态下的逗号隔开
2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号“ ”.
3.尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
4.最常见的几个字体 body{ font-family:"Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; } 注意可以使用把英文转换为中文如微软雅黑，但必须对中文加引号“”。
font-size
CSS 使用 font-size 属性定义字体大小。
h1 { font-size: 24px; } p { font-size: 14px; }px(像素)大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小我们可以给 body指定整个页面文字的大小，当然这对标题的字体大小是没影响的，它优先级高于body的字体大小优先级，必须指定对 h标签 进行修改才会有所改变。（同样这在文本字体的粗细中同样适用）
font-weight
CSS 使用 font-weight属性设置文本字体的粗细,
常用值：
normal: 默认字体粗细bold: 粗体- 数值 (100 - 900)：例如
font-weight: 700;是粗体，400通常是正常字体。h1 { font-weight: bold; } p { font-weight: 300; }实际开发时，我们更喜欢用数字表示粗缩。
font-style
font-style用于设置字体的样式，如斜体或正常字体。常用值：
normal: 正常字体italic: 斜体p { font-style: italic; }注意:平时我们很少给文字加斜体，反而要将斜体标签改为不倾斜字体。
字体复合属性
字体属性可以把以上文字样式综合来写,这样可以更节约代码:
body { font: font-style font-weiqht font-size/line-height font-family; }使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)，但必须保留font-size和 font-family属性，否则font 属性将不起作用
body {
font: italic 500 16px/1.5 "Arial", sans-serif; /* 使用字体复合属性 */
}5.CSS 文本属性
CSS 文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
color
color用于设置文本的颜色。
其表示有如下三种形式：
当然我们不用管用哪种形式，在vscode中我们能自己选颜色，比较便捷，如下图，所以无需太在意。
常见的颜色设置代码：
h1 {
color: red; /* 使用颜色关键字 */
}
text-align
text-align 属性用于设置元素内文本内容的水平对齐方式。
常用值：
left: 左对齐right: 右对齐center: 居中对齐justify: 两端对齐h3 { text-align: center; /* 设置三级标题文本居中 */ }
text-decoration
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、制除线、上划线等
div { text-decoration: underline: }
注意删除线和上划线几乎不用，而下划线和默认很常用。
此外链接都是自带下划线，如果我们想要去掉下划线，就要将链接的decoration修饰为none。
a{ text-decoration: none; }
text-indent
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
div { text-indent:10px; }通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值(负值情况是有但不能用)。
p { text-indent:2em; }em 是一个相对单位，就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小，则会按照默认的1个文字大小
以下就是发生缩进的现象：
line-height
line-height属性用于设置行间的距离(行高)。可以控制文字 行与行之间的距离。
p{
line-height:26px;
}当我们设置行间距为26px时，字体大小为16px，行间距代表如下：
那么怎么精准测量好行间距呢？
这是一段文字，我们只要算好上面一行文字的底部到下面一行文字的底部的距离，那就是行间距。
一般情况下，我们都是设置行间距为1.5em，这样比较舒服。
6.css引入方式
在 CSS 中，有三种主要的方式可以将样式引入到 HTML 文档中：行内样式表、内部样式表和外部样式表。下面详细介绍每种引入方式：
内部样式表
内部样式表使用
<style>标签将 CSS 样式嵌入到 HTML 文档的<head>部分。这种方式适合单个页面的样式控制，样式集中在一个地方。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表示例</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-size: 24px;
}
p {
color: darkgreen;
font-size: 18px;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
优点：
- 所有样式集中在 HTML 文档中，容易控制和修改单个页面的样式。
- 可以定义整个页面的样式，不需要每个元素都写内联样式。
缺点：
- 样式只对当前页面有效，不易复用。
- 当页面内容变多时，内联样式表可能使 HTML 文件体积过大。
行内样式表
内联样式直接在 HTML 标签的
style属性中定义，用于为特定的 HTML 元素设置样式。这种方式优先级最高，但通常不建议大量使用，因为它会导致样式分散，维护困难。
<p style="color: red; font-size: 20px;">这是一个红色的大号段落。</p>
优点：
- 适合快速修改单个元素的样式。
- 直接在元素内定义样式，优先级高。
缺点：
- 不利于维护，样式和内容耦合。
- 不适合大规模的样式控制。
外部样式表
外部样式表将 CSS 写在一个独立的
.css文件中，通过<link>标签将其引入 HTML 文档。这种方式是最常用的，适合多页面网站的样式管理。
<link rel="stylesheet" href="css文件路径">注意该文件路径应是相对路径。
下面是个例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表示例</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入外部样式表 -->
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
外部 CSS 文件（
styles.css）：body { background-color: lightblue; } h1 { color: navy; font-size: 24px; } p { color: darkgreen; font-size: 18px; }我们发现外部css文件中不用style标签。
优点：
- 样式与 HTML 内容分离，便于维护和复用。
- 适合多页面网站，多个页面可以共享同一个样式文件。
- 能减少 HTML 文件的体积，页面加载时会缓存 CSS 文件，提高性能。
缺点：
- 需要发出额外的 HTTP 请求获取外部 CSS 文件（可以通过浏览器缓存减小影响）。
- 对于单页应用，可能不如内部样式方便。
三种引入方式比较
