1、CSS的两种引入方式

  • 通过@import指令引入

　　@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个<style>标签中；

　　要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；

<html>

<head>

<style type="text/css">

    @import url(css/styles.css);

</style>

<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->

</head>

<body>

......

</body>

</html
  • 通过<link>标签引入（最常用方式）
<link type="text/css" href="style.css" rel="stylesheet" />

<!--同理，type属性是针对HTML4.01的-->

2、两种方式的区别

  • <link>标签属于html标签，而@import是css提供的一种方式，<link>标签不仅可以引入css，还可以做其他事，而@import只能引入css；
  • 加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；
  • 兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而<link>标签无此问题；
  • 当使用javascript控制DOM去改变样式时，只能使用<link>标签，因为@import不是DOM可以控制的。

　　

　　//笔试或面试中有可能遇到！！！

引入外部CSS的两种方式及区别的更多相关文章

  1. Redis持久化的两种方式和区别

    该文转载自:http://www.cnblogs.com/swyi/p/6093763.html Redis持久化的两种方式和区别 Redis是一种高级key-value数据库.它跟memcached ...

  2. Javascript绑定事件的两种方式的区别

    命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...

  3. 引入css的两种方式

    摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: ...

  4. JQuery中阻止事件冒泡的两种方式及其区别

    JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...

  5. vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

  6. JavaWeb配置外部应用的两种方式

    原来我们的项目放到webapps下,现在放到外面,也希望tomcat可以找到它!把应用放到tomcat之外,这就是外部应用了.应用已经不在tomcat中了,这时我们需要在tomcat中配置外部应用的位 ...

  7. UIImage创建图片的两种方式的区别

    在工作中经常会遇到添加图片,用哪种方式添加更好呢?请看详解 方法一: UIImage *image = [UIImage imageNamed:@"haha"]; 这种方法创建的图 ...

  8. c++构造函数成员初始化中赋值和初始化列表两种方式的区别

    先总结下: 由于类成员初始化总在构造函数执行之前 1)从必要性: a. 成员是类或结构,且构造函数带参数:成员初始化时无法调用缺省(无参)构造函数 b. 成员是常量或引用:成员无法赋值,只能被初始化 ...

  9. js对象中属性调用.和[] 两种方式的区别

    JS 调用属性一般有两种方法——点和中括号的方法. 标准格式是对象.属性(不带双引号),注意一点的是:js对象的属性,key标准是不用加引号的,加也可以,特别的情况必须加,如果key数字啊,表达式啊等 ...

随机推荐

  1. Centos6.7 安装zabbix+apache+mysql教程(第一篇)

    Centos6.7 安装zabbix+apache+mysql教程 blog地址: http://www.cnblogs.com/caoguo ### 基本包安装 ### [root@ca0gu0 ~ ...

  2. mysql_数据查询_单表查询

    1.单表查询: 1.1选中表中若干列: SELECT子句的<目标列表达式>可以是表中属性列,也可以是表达式,还可以是字符常量. SELECT Sname,'year of birth:', ...

  3. 线索二叉树【C语言】

    #include<stdio.h> #include<stdlib.h> typedef char ElemType; typedef enum{Link,Thread} Po ...

  4. Python之类方法，lambda，闭包简谈

    类方法,lambda,闭包 类方法 lambda 闭包 类方法 classmethod staticmethod instancemethod 类方法 类方法,通过装饰器@classmethod来标明 ...

  5. 大专生自学Python到找到工作的心得

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

  6. Huawei-R&S-网络工程师实验笔记20190525-设备登录、VRP基本配置、文件系统

    >Huawei-R&S-网络工程师实验笔记20190525-设备登录.VRP基本配置.文件系统(环回接口.telnet远程.AAA登录.命令行.时钟.banner.文件目录) >& ...

  7. Navicat premium连接Oracle报ORA-12514错误

    1:ORA-12514 原因:Service Name/SID中的值填的有问题,默认的是ORCL,这个值如果在安装Oracle的时候填的不是ORCL,那就会出现这个错误 解决方法:找到Oracle安装 ...

  8. 2017 Multi-University Training Contest - Team 4 Classic Quotation

    Classic Quotation Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Othe ...

  9. [TyvjP1515] 子串统计 [luoguP2408] 不同子串个数（后缀数组）

    Tyvj传送门 luogu传送门 经典题 统计一个字符串中不同子串的个数 一个字符串中的所有子串就是所有后缀的前缀 先求出后缀数组,求出后缀数组中相邻两后缀的 lcp 那么按照后缀数组中的顺序遍历求解 ...

  10. 用Grails写单元测试

    新的领域,多练练,这样写出的程序,确实坚固些. 也要理解集成测试与数据库相关,单元测试与类方法有关. 如果测试文件没有建立,按如下操作: Unit tests are generated automa ...