Vue实战079:常见的几种CSS样式文件引入方式详解
ztj100 2024-12-31 15:58 20 浏览 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实战技巧可以参考以下专栏：
相关推荐
- 爬取电影视频数据（电影资源爬虫）
-
本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理。作者：yangrq1018原文链接：https://segmentfault.com/a/11900...
- Python效率倍增的10个实用代码片段
-
引言Python是一门功能强大且灵活的编程语言，广泛应用于数据分析、Web开发、人工智能等多个领域。它的简洁语法和高可读性让开发者能够快速上手，但在实际工作中，我们常常会遇到一些重复性或繁琐的任务。这...
- Python数据处理:深入理解序列化与反序列化
-
在现代编程实践中，数据的序列化与反序列化是数据持久化、网络通信等领域不可或缺的技术。本文将深入探讨Python中数据序列化与反序列化的概念、实现方式以及数据验证的重要性，并提供丰富的代码示例。...
- 亿纬锂能:拟向PKL买地，在马来西亚建立锂电池制造厂
-
亿纬锂能5月12日公告，亿纬马来西亚与PEMAJUKELANGLAMASDN.BHD.（PKL）签订《MEMORANDUMOFUNDERSTANDING》（谅解备忘录），亿纬马来西亚拟向PKL购买标的...
- 一个超强的机器学习库（spark机器学习库）
-
简介PyCaret...
- 30天学会Python编程:9. Python文件与IO操作
-
9.1文件操作基础9.1.1文件操作流程9.1.2文件打开模式表9-1Python文件打开模式...
- Python的Pickle序列化与反序列化（python反序列化json）
-
动动小手，点击关注...
- python进阶突破内置模块——数据序列化与格式
-
数据序列化是将数据结构或对象转换为可存储/传输格式的过程，反序列化则是逆向操作。Python提供了多种工具来处理不同场景下的序列化需求。一、核心内置模块...
- 微信聊天记录可视化工具详细介绍（微信聊天记录分析报告小程序）
-
功能概要能做什么...
- Python常用文件操作库使用详解（python中文件操作的相关函数有哪些）
-
Python生态系统提供了丰富的文件操作库，可以处理各种复杂的文件操作需求。本教程将介绍Python中最常用的文件操作库及其实际应用。一、标准库核心模块1.1os模块-操作系统接口主要功能...
- Vue3+Django4全新技术实战全栈项目(已完结)
-
获课》aixuetang.xyz/5739/Django与推荐算法的集成及模型部署实践...
- 性能调优方面，经常要优化跑的最慢的代码，教你一种快速的方法
-
在我们遇到性能问题的时候，很多时候需要去查看性能的瓶颈在哪里，本篇文章就是提供了多种常用的方案来监控函数的运行时间。1.time首先说明，time模块很多是系统相关的，在不同的OS中可能会有一些精度差...
- Python解决读取excel数据慢的问题
-
前言：在做自动化测试的时候，我思考了一个问题，就是如果我们的测试用例随着项目的推进越来越多时，我们做自动化回归的时间也就越来越长，其中影响自动化测试速度的一个原因就是测试用例的读取问题。用例越多，所消...
- 【Python机器学习系列】基于Flask来构建API调用机器学习模型服务
-
这是我的第364篇...
- 不会用mmdet工具?速看MMDetection工具的终极指南
-
来源：计算机视觉工坊添加微信：dddvisiona，备注：目标检测，拉你入群。文末附行业细分群...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 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)