美文网首页
css样式加载

css样式加载

作者: yangchaojun | 来源:发表于2017-09-13 20:46 被阅读0次

CSS 引入方式

有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件。

  1. 内联方式
  2. 嵌入方式
  3. 链接方式
  4. 导入方式
<style>
    @import url(style.css);
</style>

link和@import的区别

  • link 属于 HTML,通过 <link>
    标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;

  • @import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;

  • 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import引用的文件则会等页面全部下载完毕再被加载;

    小结: 我们应尽量使用 <link> 标签导入外部 CSS 文件,避免或者少用使用其他三种方式。

几种文件路径区别

绝对路径就是文件的真正存在的路径,是指从硬盘的根目录(盘符)开始,进行一级级目录指向文件。

相对路径就是以当前文件为基准进行一级级目录指向被引用的资源文件。

相关文章

  • web前端入门到实战:css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import...

  • 关于CSS

    CSS 加载方式 css引用方式分为以下三种: 外部样式 内部样式 内联样式 外部样式 外部式css样式就是把cs...

  • CSS基础理解

    CSS基础理解 一、CSS 加载方式有几种 CSS可以通过使用外部样式表、内部样式表、内联样式来使用。 外部样式表...

  • CSS基础与选择器

    一、CSS加载方式 外部样式表(推荐) 通过 在html中引入CSS: 通过@import引入样式,放入CSS中,...

  • CSS基础与选择器

    CSS加载方式有几种? 外部样式表(推荐) 通过 引入外部css 通过@import引入样式,放入CSS中(后面一...

  • 选择器的优先级

    影响优先级的因素:加载顺序:html和css都是从上到下加载,当样式起冲突以后,后面的css样式会覆盖前面的。注意...

  • css样式加载

    CSS 引入方式 有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加...

  • 2018-06-28

    the presentation of that content 呈现的内容 css样式的优先级是在加载css文...

  • plugin知的少

    extract-text-webpack-plugin:抽离css样式,防止将样式打包在js中引起页面样式加载错乱...

  • Ant Design 样式使用css module

    #### antd的less配置不开启css module,但是代码里面想用css module加载样式,方便局部...

网友评论

      本文标题:css样式加载

      本文链接:https://www.haomeiwen.com/subject/kfblsxtx.html