内部CSS（也称为嵌入式CSS）通常放置在HTML文档的<head>部分内的<style>标签中。这样做有几个好处：
- 集中管理样式：可以将多个元素的样式集中在一起管理，便于维护。
- 减少重复：避免在多个元素中重复相同的样式声明。
- 提高性能：将样式放在
<head>中可以避免在文档流中的分散样式声明，有助于浏览器更快地解析样式。
以下是一个典型的HTML文档结构，展示了如何在<head>部分内使用<style>标签来包含内部CSS：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例页面</title><!-- 内部CSS --><style>.button-style {background-color: #4CAF50; /* Green */border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}.input-field {margin-top: 10px; /* 可以根据需要调整这个值 */}.el-radio-group {display: flex;flex-direction: column; /* 默认为垂直排列 */gap: 10px; /* 单选按钮之间的间距 */}</style>
</head>
<body><!-- HTML内容 --><div class="button-margin"><el-button class="button-style" @click="onCreate()">创建</el-button><el-button class="button-style" @click="onViewLink()">查看活动链接</el-button><el-dialog v-model="dialogVisible" title="活动链接" width="50%"><el-table :data="linkData"><el-table-column prop="platform" label="平台" width="180"></el-table-column><el-table-column prop="link" label="链接地址"><template #default="{ row }"><div class="link-with-copy"><a :href="row.link" target="_blank">{{ row.link }}</a><el-tooltip content="点击复制链接" placement="top"><el-button type="text" @click="copyLink(row.link)"><el-icon><copy /></el-icon></el-button></el-tooltip></div></template></el-table-column></el-table><template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></template></el-dialog></div><!-- Vue 和 Element Plus 的脚本 --><script src="path/to/vue.js"></script><script src="path/to/element-plus.js"></script><!-- Vue 3 的脚本 --><script>// Vue 3 的脚本代码</script>
</body>
</html>
说明
<style>标签：在<head>标签内部使用<style>标签来包含CSS样式。- 样式规则：定义了
.button-style、.input-field和.el-radio-group等类的样式。 - HTML内容：在
<body>标签内部编写页面的HTML结构。
这种方式适合于那些只在当前页面使用的样式，或者当样式较少且不需要单独提取成外部样式表文件时使用。如果样式较为复杂或者需要在多个页面共享，则建议使用外部CSS文件。
