引入css的方式及link和@import的区别

昨天去面试web前端,发现自己很多不足!基础知识不扎实,面试题很多问题我回忆了下,记下的一些问题在这里做个记录。很多问题因为只是站立在开发完成功能的目的,没有深究其原理。

四种引入方式:

1、内联方式

      直接在html标签中style属性添加css

      eg.   <div  style="line-height:10px;"></div>

      这种方式只能改变当前样式,如果每个div需要相同的样式,不得不重复添加相同的样式,使代码冗余长。个人觉得这样写页面太乱。

2、嵌入方式

     直接在头部标签中直接书写style属性

    eg.

    <head>

        body,html{ margin:0;padding;0}

   </head>

     这种方式多个页面加载同一个css时需要写多次,代码冗余。

3、链接方式

     头部link引入css文件

     eg.

     <head>

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

    </head>

4、导入方式

      使用css规则引入外部css文件

      eg.

     <style>

           @import  url(style.css)

     <style>

两者相同点:都是外部引入css

两者区别:

1、link可以引入css文件,还可以定义rss等其他事物;@import输入css范畴,只能加载css

2、link在页面加载时同时加载css,@import在页面加载完再加载

3、link是xhtml,无兼容性问题;@import是css2.1提出的,低版本浏览器不支持

4、link支持jsDOM操作去改变样式,@import不支持

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值