CSS 类名

CSS 类名是一种用于标识和选择特定样式规则的命名约定。用于样式化页面。通过为 HTML 元素添加类名，您可以将特定的 CSS 样式应用于这些元素，实现页面样式与结构的分离和重用。

在编写 CSS 时，您可以通过类选择器（类名前加.）选择具有特定类名的元素，并为这些元素应用相应的样式规则。例如，在以下示例中，.header 和 .container 就是两个 CSS 类名：

<style scoped>  // 样式规则只会应用于当前 Vue 组件内的元素// 类名
.header {background-color: #333;  // 背景颜色  https://www.runoob.com/html/html-colors.htmlcolor: white;  // 文字颜色padding: 15px 0;  // 上下内边距为 15px，左右内边距为 0text-align: center;width: 100%;position: relative/fixed/absolute/static/sticky;bottom: 0;  // 可以是负值、百分比值或像素值
}// 类名
.header a {  // HTML 标签如 a 简写及全称  https://www.runoob.com/html/html-tag-name.htmlcolor: white;  // 文本设为白色text-decoration: none;  // 文本去除下划线
}// 类名
.container {max-width: 1200px;margin: 0 auto;  // 水平居中设置，左右外边距自动调整
}</style>

在上面的示例中，.header 类名用于设置header元素的定位样式，而 .container 类名用于设置容器元素的最大宽度和居中对齐样式。

给 HTML 元素添加类名的方法是在元素的 class 属性中指定类名，多个类名之间用空格分隔。例如：

<div class="header">this is header</div>
<div class="container">this is container</div><header class="header"><h1>这是标题</h1><nav><ul><li><a href="#">链接1</a></li><li><a href="#">链接2</a></li><li><a href="#">链接3</a></li></ul></nav>
</header>

通过将类名应用于不同的 HTML 元素，可以在网页中轻松实现样式的统一和重用，从而提高开发效率和维护性。

CSS 组件名通常是指一种命名约定，用于标识和管理可重用的、独立的组件样式。这种命名约定通常用于开发者构建和维护具有一致性和可重用性的 CSS 组件库。

在开发过程中，为了将页面拆分为多个可独立使用的组件，并在不同页面中统一应用这些组件的样式，开发者经常使用 CSS 组件名来命名这些组件。CSS 组件名的命名方式通常遵循一定的规范和约定，以确保命名明确、一致且易于识别。

<template><div><HeaderView class="HeaderView"></HeaderView><router-view></router-view><FooterView></FooterView></div></template><script>import HeaderView from "@/components/Header.vue";
import FooterView from "@/components/Footer.vue";export default {name: 'App',components: {HeaderView,FooterView,}
}
</script><style>.HeaderView{width: 100%;
}</style>