link与@import

HTML导入外部样式表有link标签和@import两种方式,它们有很多方面的不同

link:

  • link标签必须放在head中,不能放在其他元素内部;

  • link链接的样式表中不能有其他标记语言,只能有样式规则,样式表内部不能嵌套样式表;

  • link标签属于html标签,没有兼容问题;

  • link可以定义候选样式表,将rel属性设置为alertnate style,由用户自行选择样式,使用title属性生成一个候选样式列表(候选样式表名),如果没有指定title属性,那么它将作为永久样式表,例:

<link rel="alertnate stylesheet" type="text/css" href="XXX.css" title="hello" />
  • link标签有一个meta属性,用于指定媒体类型,常见的值有:all、screen、print、projection,例;
<link rel="stylesheet" type="text/css" href="XXX.css" media="all" />
  • 如果浏览器加载多个link样式表,那么将会合并规则;

  • link引用CSS时,在加载CSS时可以同时加载页面;

  • link支持JavaScript控制DOM改变样式

@import:

  • @import必须放在style容器中:
<style type="text/css">
    @import url(XXX.css);
</style>
  • 如果有一个外部样式表,它可以引用另一个外部样式表,只是要放在样式表最开始的地方(其他CSS之前):
<style type="text/css">
    @import url(XXX.css);
    p { font-size:12px;}
</style>
  • @import用于导入外部样式,不属于html专有;

  • @import不能生成候选样式表;

  • @import也可以指定样式应用的媒体类型;

<style type="text/css">
    @import url(XXX.css) all;
</style>
  • 每个@import指令导入的样式都会加载并使用;

  • @import引用CSS时,要在页面加载完毕时才能加载CSS,所以可能会导致页面闪烁;

  • @import不支持JavaScript控制DOM改变样式

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值