码迷,mamicode.com
首页 > Web开发 > 详细

CSS四种引入方式

时间:2018-05-15 00:29:53      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:区别   打开网页   ecc   lin   网页   bsp   none   ati   文件   

第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--第一种引入方式-->
<div style="color: red;background-color: beige">Hello Yuan</div>
</body>
</html>

第二种引入方式,在<head>部分以<style></style>方式想要修改的标签名加大括号,设置属性.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{
            color: rebeccapurple;
            font-size: 40px;
        }

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<!--第二种引入方式-->
<div>Hello Yuan</div>
<p>Hello p</p>
<a href="">点我</a>
</body>
</html>

第三种引入方式,通过自闭和标签<link hrel=" 文件名.css" rel="stylesheet">引入(css代码写到单独的文件中然后引入).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!--链接式-->
    <link href="test1.css" rel="stylesheet">
</head>
<body>
<!--第三种引入方式-->
<div>Hello Yuan</div>
<p>Hello p</p>
<a href="">点我</a>
</body>
</html>

css文件

 p{
            color: rebeccapurple;
            font-size: 40px;
        }

        a{
            text-decoration: none;
        }

技术分享图片

第四种方式通过<style>标签,用途@import导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入式-->
    <style>@import "test1.css";
</style>
</head>
<body>
<!--第三种引入方式-->
<div>Hello Yuan</div>
<p>Hello p</p>
<a href="">点我</a>
</body>
</html>

第三种和第四种方式类似,它们的区别在

1.第三种是HTML语言式引入,第四种是CSS引入

2.第三种方式没有次数限制,想引入多少次都可以,第四种有次数限制

3.第三种在用户体验上比第四种要好,因为第四种引入是@import CSS代码,在打开网页时先加载HTML代码后加载CSS,有可能第一次不会加载成功.

这四种引入方式推荐用第三种,是最好的.

 

CSS四种引入方式

标签:区别   打开网页   ecc   lin   网页   bsp   none   ati   文件   

原文地址:https://www.cnblogs.com/425500828zjy/p/9038671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!