css加载样式,css加载样式慢

请教专业人士，css样式的加载顺序

就不解释什么内联样式、内部样式、外部样式了，不够直观，通俗点或者直观点说好了：

第一优先级是标签上用style设置的css，例如：div style="样式"/div

第二优先级是html页面上在style/style内设置编写的css，例如：

style .divcss{样式}/style

第三优先级是在html页面上引用外部的css样式表，例如：

link href="文件路径" rel="stylesheet" media="screen" /

无论说法是叫优先级还是是加载顺序，都不重要，只要你有这么一个概念就好了，优先级越高，当碰到调用2个或2个以上同类型css的时候，只会调用优先级最高的那1个，要记住，每个标签上只能调用同类型css一次，比如你设置了宽度width:200px;那么你再在其他调用方式中设置了width:300px;或其他值，那么只会按优先级调用1个width值，其他的将会是无效值，不过切记，只是在这个标签上失效

相关问答

Q1: vue css样式需要刷新才能加载出来

最近发现一个比较奇怪的问题，就是在开发vue中，路由点击跳转到另外一个组件中，样式是不出来的，然后刷新当前页面css样式才加载出来，找了好久才发现这个bug。

进入以后样式是这样的：css样式根本没有加载，这是为什么？

刷新了页面以后才可以出来，本身样式也是这样的：

找了半天原因，一点一点测试才发现

原来渲染的组件的父盒子的class='item'居然影响了css样式的内容，很奇怪，把class='item'修改成比如：class='abc'就可以了。

原文地址和更多信息：

Q2: css样式引入有哪几种方式,优先级是怎么样的？

按优先级：前端优先读取正序。正规规范优先倒序。

style= 这样肯定是最优的，但也是最不推荐的。前端标签直接写入。

延伸阅读：读取优先，灵活使用，如大量页面，每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。

style type="text/css" 这样属于第二读取方式。直接写在对应的页面。

延伸阅读：每页面都要设置。工作繁琐，大量写入增加代码量。不利优化。

link type="text/css" href=" 引用CSS文件 第三级。这全局引入.

延伸阅读：全局CSS。可以分离代码及外部引入，简单快捷。也是现在都在用的。

Q3: 加载CSS样式的方式有哪些?如何使用?

可以在页面的head/head里添加style/style来添加CSS

也可以独立建一个CSS文件 然后通过在head/head里添加link rel="stylesheet" type="text/css" href="css.css" /来添加外部的CSS文件 推荐使用第二种方法 也就是家在外部的CSS独立文件 这样的优势是可以多个页面同时调用一个CSS 并且会节省带宽 免去多次下载CSS的时间