HTML 标签 —— ＜style＞

syw_bmc

已于 2024-09-21 22:22:44 修改

阅读量1k

点赞数 4

分类专栏： Vue3 文章标签： html 前端

于 2024-09-20 15:16:38 首次发布

本文链接：https://blog.csdn.net/weixin_51456835/article/details/142384685

版权

Vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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 预处理器，可以使用变量等高级功能。

syw_bmc

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录