1、<style> 的基本用法
<style> 标签是 HTML 语法的一部分，用于在 HTML 文件中内联定义 CSS 样式，控制网页的布局、颜色、字体等外观方面，它通常放在 HTML 文件的 <head> 部分。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
在这个例子中，<style> 标签定义了网页的样式，背景颜色是浅蓝色，标题 h1 的颜色是深蓝色，并且居中对齐。
2、Vue3 中的 <style> 标签
在 Vue.js 这种现代框架中，虽然你也会看到 <style> 标签，但它的作用还是用来定义 CSS 样式。Vue 组件的文件结构一般包含 <template>、<script> 和 <style> 三部分：
-
<template>用来定义 HTML 模板。 -
<script>用来定义 Vue 组件的逻辑。 -
<style>依然是用来定义组件的 CSS 样式。
Vue 会扩展 <style> 的功能以支持组件化的开发模式。
3、Vue3 中 <style> 标签的属性
在 Vue 3 中，<style> 标签可以使用的属性有以下几种，主要用于控制样式的作用范围和加载方式。
（1）scoped 属性
scoped 属性限制样式只在当前组件中生效，避免污染全局样式。
当前组件指什么？
“当前组件” 在 Vue 里指的是单个 Vue 组件，也就是由
<template>、<script>和<style>三个部分组成的单文件组件（SFC, Single File Component）。每个这样的文件通常就是一个 Vue 组件。在 Vue 中，组件通常是单独的、可复用的模块，每个组件都对应一个.vue文件。而scoped样式就是为了让这个.vue文件里的样式只对该组件生效。
当在 Vue 组件中使用 scoped 属性时，Vue 会通过添加特定的属性选择器（编译器完成的）来确保样式只应用于当前组件的 DOM 元素。
示例：
<style scoped>
.container {
background-color: lightcoral;
}
</style>
在这里，.container 类的样式只会应用于当前组件中的 .container 元素。
（2）lang 属性
lang 属性可以指定使用不同的预处理器来编写样式代码。
Vue 支持使用 CSS 预处理器，例如 Sass、SCSS、Less、Stylus 等。通过 lang 属性，可以指定预处理器来编写样式。
示例：
<style lang="scss">
$main-color: lightcoral;
.container {
background-color: $main-color;
}
</style>
在这个例子中，使用了 scss 预处理器，可以使用变量等高级功能。
