其他分享
首页 > 其他分享> > 前端3+1(Day1)

前端3+1(Day1)

作者:互联网

前端3+1(Day1)

页面导入样式时,使用link和@import有什么区别?

区别1:link是XHTML标签,除了加载CSS外,还定义RSS等其他事务;@import属于CSS范畴,只可以加载CSS

补充1

  1. XHTML和HTML一样,是一种文本标记语言,但XTML要求多,更加纯净

  2. XHTML元素必须被正确的嵌套

  3. XHTML元素必须被关闭

  4. 标签名要为大写

  5. XHTML文档必须有根元素

  6. RSS:是一种描述和同步网络内容的格式,可以认为是一个定时个性化推荐信息的服务.

区别2:link引用CSS时,在页面载入时同时加载;@import须在页面网页加载完全载入以后才会加载。假如在网速慢得情况下,可能会出现,一开始没有css样式,闪烁以后出现后面的网页

区别3:link时XHTML标签不具有兼容性问题,@import是在CSS2.1出现后提出的,不支持低版本的浏览器

区别4:link支持JavaScript控制DOM去改变样式,@import不支持。在HTML里,css有四种引入方式:

  1. 内联式:
<div style='dispaly:none;background:red' > </div>

这是一个很糟糕的写法,因为他只可以改变当前的标签样式,如果有多个想要设置相同类型的,那么会造成代码的冗余,网页难以维护

  1. 嵌入式:
<head>
    <style>
        .content{
            background:pink
        }
    <style>
</head>

嵌入式只对当前网页有效。这种适合于网页写模板,可以方便查看,但是不利于后期开发

  1. 链接样式:(link)
<head>
    <link rel = "stylesheet" type="text/css" href="style.css">
<head>

最推荐的方法,因为css单独在一个文件里,有良好的可维护性

  1. 样式导入:(@import)
<style>
    @import url(style.css);
</style>

比较链接样式与导入样式:

  1. link属于HTML,通过标签的href属性来引入外部文件,而@import属于CSS,所以导入语句应该在CSS中,导入样式放在开头

  2. @import是CSS2.1才有的,可能有版本问题

  3. link是是直接加载的,@import是等全部加载完全才会加载

标签:样式,前端,Day1,link,import,XHTML,CSS,加载
来源: https://www.cnblogs.com/summer-like-writing/p/15759317.html