• 引入CSS的方式,link与@import的区别


    一.引入CSS的方式

      在HTML中引入CSS的方式主要有四种:行内式,内嵌式,链接式,导入式

      1.行内式

    <div style="background:yellow;"></div>

      适合一些简单修改,这种写法没有体现出结构与样式分离,建议少量使用不推荐大量使用

      2.内嵌式

    <html>
        <head>
            <style>
                 ..// 此处添加css代码
            </style>            
        </head>
    </html>
    

      每个单一网页可以考虑使用内嵌式

      3.链接式

    <link rel="stylesheet" href="css的路径" type="text/css" >
    

      将css放在一个后缀为.css的文档中,然后在页面的header标签中用link标签引入

      rel:定义当前文档与被链接文档之间的关系,在这里需要指定为stylesheet,表示被链接的文档式一个样式表文件

      href:定义所连接外部样式表文件的URL,可以式相对路径也可以是绝对路径

      4.导入式

    <style>   
        @import "test.css";   
    </style>
    

      在HTML的header标签的style标签中引入,也可以在css文件中用@import方式引入

    二.link和@import引入方式的区别

      1.link是XML标签,除了加载css外,还可以定义RSS等其他事务,@import属于CSS范畴,只能加载CSS

      2.link引入css时,和页面载入同时加载,@import需要网页完全载入之后加载(因此@import引入会导致网页如果比较大会先显示没样式的网页,闪烁一下后再出现样式)

      3.link是XML标签,无兼容性问题,@import是CSS2.1提供的,低版本的浏览器不支持

      4.link支持使用javascript控制DOM去改变样式,而@import不支持

  • 相关阅读:
    几何光学提纲
    波动学基础提纲
    振动学基础提纲
    气体动理论提纲
    热力学基础提纲
    文献调研
    C#快速入门指南
    PAT 1011 World Cup Betting (20分) 比较大小难度级别
    PAT 1010 Radix (25分) radix取值无限制,二分法提高效率
    PAT 1009 Product of Polynomials (25分) 指数做数组下标,系数做值
  • 原文地址:https://www.cnblogs.com/woshidouzia/p/15480191.html
Copyright © 2020-2023  润新知