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

申霖

发布于 2019-12-27 17:38:28

6060

发布于 2019-12-27 17:38:28

文章被收录于专栏：小白程序猿

一个前端页面（原生）由HTML+CSS+JS+Image组成，页面效果由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>

优点：加载速度快

缺点：不易于维护，复用性差，不利于优化

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有着非常明显的优势。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-03-22，如有侵权请联系 cloudcommunity@tencent.com 删除

css