专栏首页小白程序猿页面引入CSS的四种方式及区别

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

一个前端页面(原生)由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有着非常明显的优势。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML规范 - 整体结构

    申霖
  • JQ实现简单的轮播图

    申霖
  • JQ实现倒计时功能

    使用JQ实现发送短信或阅读倒计时效果,结合bootstrap框架。直接上效果图:

    申霖
  • 用CSS画小猪佩奇

    腾讯NEXT学位
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • 老雷PHP全栈开发教程之常用html标签

    老雷PHP全栈开发
  • HTML规范 - 整体结构

    申霖
  • 老雷PHP全栈开发教程之Vue基础教程

    Vue是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,Vue通过数据驱动构建ui界面。

    老雷PHP全栈开发
  • box-sizing

            在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

    十月梦想
  • HTML&CSS书写规范

    第一部分:HTML书写规范: 1.1 HTML整体结构: 1.1.1:HTML基础设施: 文档以"<!DOCTYPE...>"首行顶格开始,推荐使用"<!DOC...

    用户1149564

扫码关注云+社区

领取腾讯云代金券