当前位置：首页 > article >正文

css 类名

article 2025/1/5 13:45:05

CSS 类名

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

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


<style scoped>  // 样式规则只会应用于当前 Vue 组件内的元素

// 类名
.header {
    background-color: #333;  // 背景颜色  https://www.runoob.com/html/html-colors.html
    color: white;  // 文字颜色
    padding: 15px 0;  // 上下内边距为 15px，左右内边距为 0
    text-align: center;
    width: 100%;
    position: relative/fixed/absolute/static/sticky;
    bottom: 0;  // 可以是负值、百分比值或像素值
}

// 类名
.header a {  // HTML 标签如 a 简写及全称  https://www.runoob.com/html/html-tag-name.html
    color: 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>