Vue实战079:常见的几种CSS样式文件引入方式详解

CSS样式

CSS全称Cascading Style Sheets(层叠样式表),用于描述网页上的信息格式化和显示的方式。CSS能够对网页中元素进行精准控制并提供了丰富的样式属性,拥有对网页对象和模型样式编辑的能力。通过CSS对HTML标签元素进行样式描述可以定义其元素的显示方式,最终在浏览器中显示成为我们设置的样式效果。

Vue实战079:常见的几种CSS样式文件引入方式详解

CSS样式形式

根据项目的需求不同我们可以将CSS样式分为3种类型,分别是:外联css样式、内联css样式和嵌入css样式。外联css样式是引用外部的css文件,借用别人封装好的样式文件来达到我们想要的样式效果,比如Bootstrap就提供了大量现成的样式,引用Bootstrap可以帮助我们快速得到丰富的页面效果内联css样式是将样式声明在一个专门的CSS文件中,当HTML页面需要使用时直接引用该样式即可,这样也可以提供样式的复用性,让多个页面风格的保持统一。嵌入css样式则是在HTML标签元素创建时通过style直接定义当前标签元素的样式,或者在HTML文档中的中使用样式标签。

Vue实战079:常见的几种CSS样式文件引入方式详解

嵌入css样式使用

这个就不存在引入了,直接在当前的模板中编写样式即可。vue模板提供了一个style标签专门用来描述HTML样式,在style中申明scoped则该样式只影响到当前页面。也可以直接在标签元素中通过style属性来描述当前元素的样式,通过属性绑定的形式,将样式对象应用到元素中,样式对象也可以定义在data中,如果需要data上的多个样式对象则可以在:style中通过数组引用。

Vue实战079:常见的几种CSS样式文件引入方式详解

总结:

CSS样式在前端中是必不可少的成员之一,合理的利用样式可以让你的项目更加的简单、快捷、高效。充分利用CSS样式表的复用可以更大程度的缩减了页面的体积,减少下载的时间,提升用户体验。以上内容是小编给大家分享的【Vue实战079:常见的几种CSS样式文件引入方式详解】,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏:

展开阅读全文

页面更新:2024-04-24

标签:样式   方式   文件   内联   外联   全局   详解   实战   属性   元素   定义   对象   模板   常见   效果   页面   标签   项目   数码

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top