Vue3中CSS的新玩法-CSS模块 & 动态CSS

html-css015

Vue3中CSS的新玩法-CSS模块 & 动态CSS,第1张

Vue3对CSS支持加入了更多的特性支持,这样的话,我们在项目当中使用CSS就变得更加灵活了,来吧我们直接上干货

在style的标签上加一个module的属性,这样style里面的内容就会被编译成CSS Modules(模块),默认情况下,我们可以在模板代码里,或者JS里通过$style拿到所有样式属性并使用

我们也可以给CSS Modules自定义一个名称,在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性

与组合式 API 一同使用,注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}

可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上

这个语法同样也适用于

HTML是一种用于网页设计的语言。

- HTML是超文本标记语言(HyperText Markup Language)的缩写

- HTML不是一种编程语言,而是一种标记语言(markup language)

- 标记语言都会提供一套标记标签(markup tags)

- HTML用标记标签来设计网页

CSS 概述

- CSS 指层叠样式表 (Cascading Style Sheets)

- 样式定义如何显示 HTML 元素

- 样式通常存储在样式表中

- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

- 外部样式表可以极大提高工作效率

- 外部样式表通常存储在 CSS 文件中

- 多个样式定义可层叠为一

是超链接吗?设置下面四个就都没有下划线了

a:link {

text-decoration: none

}

a:visited {

text-decoration: none

}

a:hover {

text-decoration: none

}

a:active {

text-decoration: none

}