Vue实战079:常见的几种CSS样式文件引入方式详解
ztj100 2024-12-31 15:58 13 浏览 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实战技巧可以参考以下专栏：
相关推荐
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 一个令人头秃的问题，Logback 日志级别设置竟然无效?
-
原文链接：https://mp.weixin.qq.com/s/EFvbFwetmXXA9ZGBGswUsQ原作者：小黑十一点半...
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
-
需求背景之为什么要有超时关单原因一：...
- 火了!阿里P8架构师编写堪称神级SpringBoot手册，GitHub星标99+
-
Springboot现在已成为企业面试中必备的知识点，以及企业应用的重要模块。今天小编给大家分享一份来着阿里P8架构师编写的...
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
-
Fleet是JetBrains公司推出的轻量级编辑器，对标VSCode。该款产品还在公测当中，具体下载链接如下JetBrainsFleet：由JetBrains打造的下一代IDE。想要尝试的...
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
-
网上搜到的SpringBoot的代码不多，完整的不多，能用的也不多，基本上大部分的文章只是提供了少量的代码，讲一下思路，或者实现方案。之前一般的做法都是使用HTML5来做的，大部都是传文件的，传文件夹...
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
-
大家好啊，我是测评君，欢迎来到web测评。...
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
-
先看看专利描述...
- 看完SpringBoot源码后，整个人都精神了
-
前言当读完SpringBoot源码后，被Spring的设计者们折服，Spring系列中没有几行代码是我们看不懂的，而是难在理解设计思路，阅读Spring、SpringMVC、SpringBoot需要花...
- 阿里大牛再爆神著:SpringBoot+Cloud微服务手册
-
今天给大家分享的这份“Springboot+Springcloud微服务开发实战手册”共有以下三大特点...
- WebClient是什么?SpringBoot中如何使用WebClient?
-
WebClient是什么？WebClient是SpringFramework5引入的一个非阻塞、响应式的Web客户端库。它提供了一种简单而强大的方式来进行HTTP请求，并处理来自服务器的响应。与传...
- SpringBoot系列——基于mui的H5套壳APP开发web框架
-
前言 大致原理：创建一个main主页面，只有主页面有头部、尾部，中间内容嵌入iframe内容子页面，如果在当前页面进行跳转操作，也是在iframe中进行跳转，而如果点击尾部按钮切换模块、页面，那...
- 在Spring Boot中使用 jose4j 实现 JSON Web Token (JWT)
-
JSONWebToken或JWT作为服务之间安全通信的一种方式而闻名。...
- Spring Boot使用AOP方式实现统一的Web请求日志记录?
-
AOP简介AOP(AspectOrientedProgramming)，面相切面编程，是通过代码预编译与运行时动态代理的方式来实现程序的统一功能维护的方案。AOP作为Spring框架的核心内容，通...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Java项目宝塔搭建实战MES-Springboot开源MES智能制造系统源码
- 一个令人头秃的问题，Logback 日志级别设置竟然无效?
- 实战!SpringBoot + RabbitMQ死信队列实现超时关单
- 火了!阿里P8架构师编写堪称神级SpringBoot手册，GitHub星标99+
- Java本地搭建宝塔部署实战springboot仓库管理系统源码
- 工具尝鲜(1)-Fleet构建运行一个Springboot入门Web项目
- SPRINGBOOT WEB 实现文件夹上传(保留目录结构)
- Java项目本地部署宝塔搭建实战报修小程序springboot版系统源码
- 新年IT界大笑料“工行取得基于SpringBoot的web系统后端实现专利
- 看完SpringBoot源码后，整个人都精神了
- 标签列表
-
- 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)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- 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)