阿里云

页面引入CSS的四种方式及区别

一个前端页面(原生)由HTML+CSS+JS+Image组成,页面效果由CSS负责,好的页面会吸引用户访问、停留。那么页面是如何靠css来达到效果的呢?下面说说页面中css使用的几种方式。


CSS引入方式

一、引入方式

1、直接在div中使用css样式制作div+css网页
2、html中使用style自带式
3、使用@import引用外部CSS文件
4、使用link引用外部CSS文件(推荐此方法)

下面依次说下四种方式;


二、讲解

1、直接在div中使用css样式制作div+css网页

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <!--header strat-->
 <div style="width: 1024px;height: 150px;margin:0 auto;"></div>
 <!--header end-->
    <!--main start-->
 <div style="width: 1024px;height: 550px;margin:0 auto;"></div>
 <!--main end-->
    <!--footer start-->
 <div style="width: 1024px;height: 100px;margin:0 auto;"></div>
 <!--footer end-->
</body>
</html>


优点:加载速度快

缺点:不易于维护,复用性差,不利于优化


CSS页面布局.jpg


2、html中使用style自带式

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 .commonWidth{width: 1024px;margin:0 auto;}
        .header{height: 150px;}
        .main{height: 150px;}
        .footer{height: 150px;}
    </style>
</head>
<body>
 <!--header strat-->
 <div class="header commonWidth"></div>
 <!--header end-->
    <!--main start-->
 <div class="main commonWidth"></div>
 <!--main end-->
    <!--footer start-->
 <div class="footer commonWidth"></div>
 <!--footer end-->
</body>
</html>


优点:加载速度快

缺点:不易于维护,复用性差,不利于优化


3、使用@import引用外部CSS文件

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         @import url(style.css);
     </style>
</head>
<body>
 <!--header strat-->
 <div class="header commonWidth"></div>
 <!--header end-->
 <!--main start-->
 <div class="main commonWidth"></div>
 <!--main end-->
 <!--footer start-->
 <div class="footer commonWidth"></div>
 <!--footer end-->
</body>
</html>


优点:无

缺点:会等到页面全部被下载完再被加载、只有在IE5以上的才能识别、DOM不可控制、只能引入31次css文件


4、使用link引用外部CSS文件

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 <!--header strat-->
 <div class="header commonWidth"></div>
 <!--header end-->
    <!--main start-->
 <div class="main commonWidth"></div>
 <!--main end-->
    <!--footer start-->
 <div class="footer commonWidth"></div>
 <!--footer end-->
</body>
</html>


优点:易于维护、可复用、利于蜘蛛抓取(源代码量少,抓取速度快)、分线程加载(页面打开速度快)

缺点:暂无


三、综合对比

建议使用link引入方式,加载css样式文件,link方式是HTML方式,而import方式是css方式,有着本质上的区别。在优缺对比方面,以上四种方式而言,link有着非常明显的优势。


喜欢就点个赞吧

发表评论

需要先登录,才能发表评论哦!登录

网友评论
暂无评论