首页 > 教程 > 关键词  > 区别最新资讯  > 正文

CSS技巧:import与link的具体区别

2009-04-16 17:29 · 稿源:网页教学网

我们知道在网页中引用外部CSS有两种方式,即:@import与link,我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗?

link

link就是把外部CSS与网页连接起来,具体形式

@import

import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件,具体形式

为什么使用@import

大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式.

使用以下代码可以使IE6及以下的浏览器无法解析该CSS(IE6以下的属于年久失修在这里略去方法)

@import url(../style.css) screen;另一个主要的原因就是当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

为什么使用link

使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

如不明白,请进入这个页面,然后在Firefox中点击”查看-页面风格”.

@import的小毛病

如果你网页head标签里面十分简单,只有@import属性的话,当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格.要避免这样的问题,你需要确保head里至少有一个script或是link标签.

04-11更新: @import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

详情请参考https://www.stevesouders.com/blog/2009/04/09/dont-use-import/

到底要用那种方式

就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.

  • 相关推荐
  • 大家在看
  • 腾讯云服务器12.12限时秒杀-1核2G首年50元

    腾讯云服务器12.12多种机型限时抢购,1核2G服务器4.17元/月,2核4G服务器6.17元/月,专业技术7*24小时在线服务,腾讯云为企业和个人提供快捷,安全,稳定的云服务!

    广告
  • PropTech Link X 富途:股权激励设计到落地避坑全攻略

    私享会上孙啸天提到,根据富途联合韦莱韬悦、脉脉发布的《 2021 年股权激励研究报告》中显示, 近六成被调研者所供职的公司拥有股权激励计划,意味着越来越多的企业开始认可股权激励在公司经营发展中所扮演的重要角色...该条例要求企业只要计划实施股权激励,就应该在 决定实施股权激励的次月 15 日前 ,向主管税务机关报送《股权激励情况报告表》...富途企业服务为企业提供一站式ESOP股权/期权激励管理,包括ESOP股权激励方案设计、合规咨询、信托设立及行权落地等全流程服务......

  • TP-Link发布多款智能家居产品 支持苹果HomeKit

    TP-Link在2022年CES上宣布了其Tapo品牌智能家居产品新阵容,包括支持HomeKit的智能灯、插头和一个智能开关。TP-Link自2019年以来一直以Tapo品牌在欧洲销售智能家居产品,但现在该公司首次将其引入美国。此前,Tapo的产品都不支持HomeKit,但现在新宣布的Tapo产品中有五款将支持苹果的智能家居连接。Tapo支持HomeKit的产品预计将在2022年全年发布,从第一季度的迷你插头开始。电源带、调光开关和灯带预计将在第二季度发布,而彩色灯

  • SpaceX Starlink卫星星座致近1/5的黄昏图像受影响

    “在2019年,0.5%的黄昏图像受到影响,而现在几乎有20%受到影响,”前加州理工学院研究员、现波兰华沙大学的Przemek Mróz在一份声明中说道...当ZTF的镜头捕捉到沿其轨道移动的Starlink时,这些桌子大小的卫星在夜空的图像中显示为直线条纹...研究小组发现,随着Starlink在低地球轨道上的足迹从2019年开始增长,等到2021年中期,图像上看到的条纹数量在10天内增长到200多条......

  • LinkedIn正在推出一个类似Clubhouse的音频活动平台

    微软的LinkedIn日前宣布,它将在本月底前推出一个基于音频的虚拟活动平台,随后将在春季推出视频产品。该公司产品经理Jake Poses介绍称:“我们想让举办虚拟圆桌会议、炉边谈话等变得更容易。有些人可能希望活动更正式或不那么正式。有些人可能想跟他们的听众交流,向听众开放。我们正在给专业人士提供互动性和支持。”尽管怀疑微软将在未来推出售票活动,但这项服务最初则是会以免费的形式推出。该平台正在LinkedIn内部建立,其没

  • 谷歌宣布将推出 Topics 广告系统用以替代 FLoC

    Google 发布博客文章宣布推出新的 Topics API 用于广告追踪,以此替代此前饱受争议的 FLoC 技术...用户将能够看到和删除浏览帮他们归纳器的兴趣类别,或者完全关闭该系统...Topics API 通过用户的浏览历史周期性生成一定数量的、最能代表用户个性化偏好的兴趣话题,这些话题完全基于浏览器本地生成,不包含性别、种族等敏感信息并且会定期更新轮换,相关网站在用户访问时,可获取到其中3个话题来提供相应的广告服务...

  • 浪潮新消费丨Linkflow CMO 熊文艳 :公私域融合赋能增长

    即使在疫情的影响之下,新消费品牌依然迎来了最好的时代。越来越多的人喝着江小白、简爱酸奶,用着Usmile刷牙,穿着内外,吃着王小卤和拉面说,逛着名创优品,新品牌崛起的势头已经不可阻挡,给消费品市场带来了无限大的鼓动。但,新品牌品牌下一步该怎么走?长期价值又该如何真正构建?这些问题当下亟待厘清。12 月24、 25 日,Linkflow应邀出席浪潮新消费举办的《第二届中国新品牌浪潮大会》。本次大会围绕行业的核心命题和重要?

  • 谷歌开发全新广告追踪系统Topics 根据用户兴趣“打标签”

    谷歌当地时间星期二表示,被称作Topics的新广告系统将于明年底取代cookies,根据用户兴趣帮助广告客户追踪Chrome浏览器用户...谷歌称,通过提供用户访问网站相对不太具体的信息,新工具的设计目标,是在保护用户隐私的前提下,使广告客户能“触达”潜在客户群...谷歌去年曾计划转向一种被称作FloC的全新广告追踪系统...

  • Alienware展示Concept Polaris显卡坞:eGPU产品线有望复活

    2021 年中的时候,戴尔停掉了 Alienware Graphics Amplifier 外置显卡产品线。不过随着 Concept Polaris 概念的亮相,预示着该公司将很快重返该领域。TheVerge 指出,作为一款采用水冷方案的外置显卡设备,Concept Polaris 有望于 2022 上半年到来。虽然戴尔尚未披露它的售价,但从规格和设计上来看,它显然会让消费者付出不小的代价。可水平或竖直方向放置通过高速有线连接,eGPU 有助于提升笔记本电脑的图形处理能力。CES 2022 ?

  • 曾惊动了Netflix的盗版软件Popcorn Time宣布关闭

    曾经流行的应用Popcorn Time宣布关闭了,它曾让观看盗版电影和电视剧几乎像使用Netflix一样容易。这款应用于2014年首次亮相并在一年内成为访问非法视频内容的最流行服务之一。2015年,Netflix在一份财务报告中警告投资者Popcorn Time的崛起,CEO Reed Hastings宣称:“盗版仍是我们最大的竞争对手之一。”Popcorn Time的创建者在其推出后不久就放弃了这项服务,索尼集团公司被黑后公布的电子邮件显示,执法部门在这其中可能发挥了?

  • 马斯克的Neuralink公司正在招聘一名临床试验主任

    据The Verge报道,埃隆·马斯克的脑机接口公司Neuralink最新发布的招聘信息显示,该公司正在寻求招聘一名“临床试验主任”,这个职位可以帮助该公司实现其既定目标,即在真实的人身上测试其大脑植入物...马斯克在去年12月表示,该公司的目标是在2022年将该设备植入第一批人类受试者体内...但由于该设备是高风险的,以前没有在人身上使用过,该公司将需要FDA的批准来启动更大规模的试验......

这篇文章对你有价值吗?

  • 热门标签

热文

  • 3 天
  • 7天