Vue实战079:常见的几种CSS样式文件引入方式详解
ztj100 2024-12-31 15:58 34 浏览 0 评论
CSS样式
CSS全称Cascading Style Sheets（层叠样式表），用于描述网页上的信息格式化和显示的方式。CSS能够对网页中元素进行精准控制并提供了丰富的样式属性，拥有对网页对象和模型样式编辑的能力。通过CSS对HTML标签元素进行样式描述可以定义其元素的显示方式，最终在浏览器中显示成为我们设置的样式效果。
CSS样式形式
根据项目的需求不同我们可以将CSS样式分为3种类型，分别是：外联css样式、内联css样式和嵌入css样式。外联css样式是引用外部的css文件，借用别人封装好的样式文件来达到我们想要的样式效果，比如Bootstrap就提供了大量现成的样式，引用Bootstrap可以帮助我们快速得到丰富的页面效果。内联css样式是将样式声明在一个专门的CSS文件中，当HTML页面需要使用时直接引用该样式即可，这样也可以提供样式的复用性，让多个页面风格的保持统一。嵌入css样式则是在HTML标签元素创建时通过style直接定义当前标签元素的样式，或者在HTML文档中的<head>中使用<style>标签标记。
外联样式引用
这个只要在Vue项目的public目录中找到index.html模板，在head标签中通过link来引入外部的样式文件。href可以连接在线的样式文件，当然也可以引用本地的样式文件。这种方式引入的样式编译在生成的html文件中，该样式在整个项目都能够公用。
内联样式引用
这个在Vue中可以全局引用也可以局部模板引用，全局引用的话需要在main.js入口文件中引入。当项目启动时就会对css文件进行解析，将对应的css代码插入生成html文件的style标签中。这里可以将一些全局的或者公共的样式文件引入，提高代码的复用性。
Vue模块中引用
除了在main.js中引入我们还可以在局部模板中引用 样式文件，在对应的模板.vue文件中通过@import ‘样式文件路径’。但是这样引入发现一个问题：该模板标签元素以上的样式不生效，改用@import url(样式文件路径)后样式生效了但是在index.html的head上会多出一个空的<style></style>样式标签。
嵌入css样式使用
这个就不存在引入了，直接在当前的模板中编写样式即可。vue模板提供了一个style标签专门用来描述HTML样式，在style中申明scoped则该样式只影响到当前页面。也可以直接在标签元素中通过style属性来描述当前元素的样式，通过属性绑定的形式，将样式对象应用到元素中，样式对象也可以定义在data中，如果需要data上的多个样式对象则可以在:style中通过数组引用。
总结：
CSS样式在前端中是必不可少的成员之一，合理的利用样式可以让你的项目更加的简单、快捷、高效。充分利用CSS样式表的复用可以更大程度的缩减了页面的体积，减少下载的时间，提升用户体验。以上内容是小编给大家分享的【Vue实战079：常见的几种CSS样式文件引入方式详解】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：
相关推荐
- sharding-jdbc实现`分库分表`与`读写分离`
-
一、前言本文将基于以下环境整合...
- 三分钟了解mysql中主键、外键、非空、唯一、默认约束是什么
-
在数据库中，数据表是数据库中最重要、最基本的操作对象，是数据存储的基本单位。数据表被定义为列的集合，数据在表中是按照行和列的格式来存储的。每一行代表一条唯一的记录，每一列代表记录中的一个域。...
- MySQL8行级锁_mysql如何加行级锁
-
MySQL8行级锁版本：8.0.34基本概念...
- mysql使用小技巧_mysql使用入门
-
1、MySQL中有许多很实用的函数，好好利用它们可以省去很多时间:group_concat()将取到的值用逗号连接，可以这么用:selectgroup_concat(distinctid)fr...
- MySQL/MariaDB中如何支持全部的Unicode?
-
永远不要在MySQL中使用utf8，并且始终使用utf8mb4。utf8mb4介绍MySQL/MariaDB中，utf8字符集并不是对Unicode的真正实现，即不是真正的UTF-8编码，因...
- 聊聊 MySQL Server 可执行注释，你懂了吗?
-
前言MySQLServer当前支持如下3种注释风格：...
- MySQL系列-源码编译安装(v5.7.34)
-
一、系统环境要求...
- MySQL的锁就锁住我啦!与腾讯大佬的技术交谈，是我小看它了
-
对酒当歌，人生几何！朝朝暮暮，唯有己脱。苦苦寻觅找工作之间，殊不知今日之事乃我心之痛，难道是我不配拥有工作嘛。自面试后他所谓的等待都过去一段时日，可惜在下京东上的小金库都要见低啦。每每想到不由心中一...
- MySQL字符问题_mysql中字符串的位置
-
中文写入乱码问题：我输入的中文编码是urf8的，建的库是urf8的，但是插入mysql总是乱码，一堆"???????????????????????"我用的是ibatis，终于找到原因了，我是这么解决...
- 深圳尚学堂:mysql基本sql语句大全(三)
-
数据开发-经典1.按姓氏笔画排序:Select*FromTableNameOrderByCustomerNameCollateChinese_PRC_Stroke_ci_as//从少...
- MySQL进行行级锁的?一会next-key锁，一会间隙锁，一会记录锁?
-
大家好，是不是很多人都对MySQL加行级锁的规则搞的迷迷糊糊，一会是next-key锁，一会是间隙锁，一会又是记录锁。坦白说，确实还挺复杂的，但是好在我找点了点规律，也知道如何如何用命令分析加...
- 一文讲清怎么利用Python Django实现Excel数据表的导入导出功能
-
摘要：Python作为一门简单易学且功能强大的编程语言，广受程序员、数据分析师和AI工程师的青睐。本文系统讲解了如何使用Python的Django框架结合openpyxl库实现Excel...
- 用DataX实现两个MySQL实例间的数据同步
-
DataXDataX使用Java实现。如果可以实现数据库实例之间准实时的...
- MySQL数据库知识_mysql数据库基础知识
-
MySQL是一种关系型数据库管理系统；那废话不多说，直接上自己以前学习整理文档：查看数据库命令:(1).查看存储过程状态:showprocedurestatus;(2).显示系统变量:show...
- 如何为MySQL中的JSON字段设置索引
-
背景MySQL在2015年中发布的5.7.8版本中首次引入了JSON数据类型。自此，它成了一种逃离严格列定义的方式，可以存储各种形状和大小的JSON文档，例如审计日志、配置信息、第三方数据包、用户自定...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)