美文网首页
css的引入方式有哪些,import 和 link的区别?

css的引入方式有哪些,import 和 link的区别?

作者: 咸菜大大 | 来源:发表于2018-06-14 07:33 被阅读0次

有四种方式可以在HTML中引入CSS,如下:

1. 内联引入

特点:优先级高; 冗余代码多; 代码量大;

<div style="background: red; color: #fff;"></div>

2. 内部书写(嵌入方式)

特点:单一页面速度快,减少服务器请求压力;不易于改版和维护;代码较乱;

<head>
    <style>
    .content {
        background: red;
        color: #fff;
    }
    </style>
</head>

3. 外部引入-链接方式(link)

特点:一个css文件可控制多个页面;易改版易维护;减少代码量,代码简介规范易于分工协作;有效利用缓存机制;外部引入的href属性,会给服务器请求造成压力。

<link rel="stylesheet" type="text/css" href="style.css">

4. 外部引入-导入方式(import)

<style>
    @import url(style.css);
</style>

5. import 和 link的区别

1) import属于css范畴,只能加载css; link是XHTML的标签,除了加载css外,还可以做其他的RSS的事务。
2)import需页面完全载入后再加载; link在页面载入的时候同时加载;
3)import是css2.1引入的,低版本浏览器不支持; link为XHTML标签,无兼容问题。
4)import不支持JavaScript去改变样式; link支持。

相关文章

  • 2018-09-11

    CSS引入的方式有哪些? link和@import的区别是? 有 4 种方式可以在 HTML 中引入 CSS。 1...

  • 前端面试概念题

    CSS引入的方式有哪些?link和@import的有什么区别?各种方式的优先级如何? A.内联(行内): 写在页面...

  • CSS的引入及个别混淆点

    CSS样式的引入方式及link和@import的区别 样式有3种引入方式:①外部式:在 下使用link或@impo...

  • 记11月29日作业

    问题一:CSS有几种引入方式? link 和@import 有什么区别? css一共有4种引入方式: 内联样式 内...

  • html基本知识:路径、单位、浏览器调试等

    1. 样式有几种引入方式? link 和 @import有什么区别 三种引入方式: 外部引入css文件: 内部: ...

  • VIP10-11月29日作业:CSS

    问题一:CSS有几种引入方式? link 和@import 有什么区别? CSS引入方式1.外部样表式:如下 2....

  • 任务5-html2

    样式有几种引入方式?link和@import有什么区别? 共计 4 种方式可以在 HTML 中引入 CSS。 内联...

  • HTML2

    样式有几种引入方式? link和 @import有什么区别? 样式引入方式: 两种都是外部引用CSS的方式,差别在...

  • 任务五~HTML2

    一、样式有几种引入方式? link 和 @import有什么区别? css样式引入方式有三种方式,分别是: 外部样...

  • CSS 引入的方式有哪些以及区别 (琐碎知识点整理)

    1. CSS 引入的方式有哪些? 2. link 与 @import 的区别是 ? 如果对你有所帮助,大家喜欢可以...

网友评论

      本文标题:css的引入方式有哪些,import 和 link的区别?

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