在HTML中link与@import设置css的方式有何不�

Admin 2022-06-17 群英技术资�

这篇文章主要介绍“在HTML中link与@import设置css的方式有何不同”,有一些人在在HTML中link与@import设置css的方式有何不同的问题上存在疑惑,接下来小编就给大家来介绍一下相关的内容,希望对大家解答有帮助,有这个方面学习需要的朋友就继续往下看吧�


如何在html中添加css�

在html中设置css共有三种方式,分别是�

  • 行内�
  • 内嵌�
  • 导入�-link
  • 导入�-@import

1.行内式。即在html标签中的style属性中设置css,值得注意的是css代码的名值对儿用冒号:来连接,用分号分离不同的css样式。这种方式虽然便于观看与调试,但是它违背了结构与表现相分离的原则,我们不推荐使用。但是,按照加载速度来说,这是三种方式中最快的一种,不信你可以看下新浪、网易、QQ、搜狐等门户站,内容页大部分都把CSS直接写进网页里�

这是新浪首页

2.内嵌式。这种方法便于我们观看与调试,但是当样式较多时,这种方法就不适合了。注意:<style>标签一定要位于<head>中�

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style type="text/css">
            #myDiv{
                 color:red;
                 background-repeat:no-repeat;
                 font-size:18px;
            } 
       
        </style>
</head>
<body>                 <div id="myDiv"> This is a div.</div>
</body>
</html>  

3.导入�-link。导入有两种方法:一个使�<link>标签,另外一种是使用@import方法。先介绍link

link:即必须在head标签�,这种方法可以将外部的css样式表引入html中,是我们所强烈推荐的�

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <link rel="stylesheet" styl="text/css" href="style.css">
</head>
<body>       
         <div id="myDiv"> This is a div.</div>
</body>
</html> 

3.导入�-@import

@import:即同样在head标签�,这种方法可以将外部的css样式表引入html�,注意,在import与url之间用空格隔开�

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
        <style type="text/css">
            @import url("style.css");
        </style>
</head>
<body>       
         <div id="myDiv"> This is a div.</div>
</body>
</html>

除此之外,import还可以用在css样式表中,来引入其他的样式表。我们直接在css中写入:

@import url("style.css")

@import最优写�
@import的写法一般有下列几种�
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识�
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识�
@import url(style.css) //Windows NS4, Macintosh NS4不识�
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识�
@import url("style.css") //Windows NS4, Macintosh NS4不识�
由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐�

link与@import的区�:

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

2.link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载,所以一般我们不推荐使用@import方法�

3.link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持,从这点来说,我们同样不推荐使用@import方法�

4.link支持使用Javascript控制DOM去改变样式;而@import不支持�


关于“在HTML中link与@import设置css的方式有何不同”就介绍到这了,如果大家觉得不错可以参考了解看看,如果想要了解更多,欢迎关注群英网络,小编每天都会为大家更新不同的知识�
标签� link与@import

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部