样式导入方式

  • link
  • import

使用方式

  • link的使用
  1. <link href="index.css" rel="stylesheet">
  • import的使用
  1. <style type="text/css">
  2. @import "index.css";
  3. </style>

不同点

  • link除了引用样式文件,还可以引用图片等资源文件,而import只引用样式文件

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />

  • 兼容性不同,link不存在兼容性的问题,import在IE5以上支持,是css2.1新增的
  • 在样式表文件可以使用import导入其它的样式表文件,而link不可以
  • link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  • link支持使用Javascript控制DOM去改变样式;而@import不支持。

加分项

import的写法比较多

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别

推荐使用 @import url(index.css);

--------------------------------------------------------------------------------------------------------------------

Web前端面试指导(十一):样式导入有哪些方式?的更多相关文章

  1. Web前端面试指导(十):元素定位有哪些?

    本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以 ...

  2. Web前端面试指导(十六):为什么要初始化CSS样式?

    题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...

  3. Web前端面试指导(十九):CSS样式-如何清除元素浮动?

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  4. Web前端面试指导(十三):css样式的优先级是怎么样的?

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  5. Web前端面试指导(十五):CSS样式-display有哪些作用?

    题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...

  6. Web前端面试指导(九):盒子模型你是怎么理解的?

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

  7. Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  8. Web前端面试指导(十七):一个满屏 品 字布局 如何设计?

    题目点评 这道题目有可能是笔试题,有可能面谈的时候进行叙述,如果是笔试题要求对css样式代码非常熟练,如果是面谈叙述,就需要你的表达能力非常强,要抓住要点,把需要用到的技能点讲清楚就可以了. 需要用到 ...

  9. Web前端面试指导(十二):::before 和:before有什么区别?

    题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...

随机推荐

  1. 前端获取指定cookie

    前端获取指定cookie的值 function getCookie(cookiename){ var name = cookiename + "="; var cs = docum ...

  2. c++ 用 0x3f3f3f3f 设定最大int值的优点

    在许多算法中都要用到一个常量来表示最大值,例如:寻找一个最小数,就要先设定一个值a,如果比a小,a就等于这个数:再如,最短路径中基本的松弛操作: 0 在c++中可以用memset() 来初始化数组成最 ...

  3. CDH集群安装配置(五)- Cloudera Manager Server

    在线安装 sudo yum install cloudera-manager-daemons cloudera-manager-server 离线安装 资源下载地址 https://archive.c ...

  4. restsharp 组件调用返回 gbk 编码的api,中文乱码解决方法。(restsharp response 中文乱码 gbk)

    最近要调一个restful风格的api 用了 一个开源第三方组件,组件还是蛮好用的, 支持直接按参数定义实体类,然后发起请求之前直接 addobject 的方式就把请求参数给添加进去了, 解码的时候可 ...

  5. IONIC 打包安卓apk详细过程

    参照以下链接: https://blog.csdn.net/qq_20264891/article/details/79319408 当 cordova 项目安装的 android 平台版本 与 系统 ...

  6. web_03Java ee实现定时跳转,使用C3P0,DBUtils类重构数据库操作

    Web Web_02版本: 实现功能 1,定时跳转 2,C3P0连接池 3,DBUtils工具类     设计内容 1,setHeader方法 2, 3, *重点 1,定时跳转: 1,selver实现 ...

  7. Ubuntu14.04搭建Oracle instantClient 11.2.0.4并配置cx_Oracle5.1.2

    一.配置Oracle instantClient 11.2.0.4 1.下载Oracle客户端: 打开http://www.oracle.com/technetwork/topics/linuxx86 ...

  8. java并发编程(1)并发程序的取消于关闭

    一.任务的取消于关闭 1.中断Thread 1.每个线程都有一个boolean类型的中断状态.true则是中断状态中 interrupt:发出中断请求:isInterrupt:返回中断状态:inter ...

  9. bzoj 2167: 公交车站

    Description Z市交通不发达,所有公交路线覆盖的边竟然一个环也不包含,甚至该市的公交路线有可能会分为几个互不连通的块,这可真是不可思议.有一天,你突然听到一条消息,说你的M个同学被困在了Z市 ...

  10. php对图片加水印--将图片先缩小,再在上面加水印

    方法: /**  * 图片加水印(适用于png/jpg/gif格式)  *  * @author flynetcn  *  * @param $srcImg  原图片  * @param $water ...