在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言。很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写、页面头部书写、外部引入,那么这三者有何区别?本文给大家讲解了从不同的角度分析他们的优势与劣势。

1、外部引入:

在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">,引入外部的CSS文件;

优势:

一个CSS文件可控制多个页面

易改版、便于维护

减少代码量、代码简洁规范易于分工协作

有效利用缓存机制

劣势:

相对于单页有垃圾代码

外部引入中的href属性会给服务器造成请求的压力

示例:

<head>

<title>麦子学院</title>

<link rel="stylesheet" type="text/css" href="css文件路径">

</head>

2、头部书写:

在head部分加入 标签,CSS代码就写在标签内(style是表明引入文件类型的标签;type是表明文件类型;)

优势:

速度快,没有服务器请求压力

相对于外部引入单页代码量少

劣势:

不易改版与维护

代码较乱不易前后台沟通

示例:

<head>

<title>麦子学院</title>

<style type="text/css">

*{CSS样式}

</style>

</head>

3、在标签内直接写CSS:

直接把css标签写在页面标签里;

优势:

优先级最高

劣势:

冗余代码多,代码量大

不利于维护

示例:

<p style="width:20px; height:10px;">麦子学院</p>

4、使用@import引入CSS

劣势:

在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)

在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载,这会阻碍页面的渲染,让人感到页面比较慢。

示例:

@import url('b.css');

使用@import引入CSS—部分参考前端观察文章

以上就是web前段开发中CSS引入方式的内容,说CSS简单,其实也不简单,还需要学习web前段开发的初学者经常做项目实战练习,这样才能从实战中体会到web前段开发的真正意义。

来源:http://www.docin.com/p1-1403278348.html

 

CSS引入方式的区别详解的更多相关文章

  1. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  2. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  3. cookie ,session 和localStorage的区别详解

    2019独角兽企业重金招聘Python工程师标准>>> cookie ,session 和localStorage的区别详解 博客分类: js 当你在浏览网站的时候,WEB 服务器会 ...

  4. HTML行内元素与块级元素有哪些及区别详解

    转自 https://www.jb51.net/web/724286.html   这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...

  5. 基于Java的打包jar、war、ear包的作用与区别详解

      本篇文章,小编为大家介绍,基于Java的打包jar.war.ear包的作用与区别详解.需要的朋友参考下   以最终客户的角度来看,JAR文件就是一种封装,他们不需要知道jar文件中有多少个.cla ...

  6. Android中Intent传值与Bundle传值的区别详解

    Android中Intent传值与Bundle传值的区别详解 举个例子我现在要从A界面跳转到B界面或者C界面   这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两 ...

  7. HTTP POST GET 本质区别详解

    HTTP POST GET 本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Ht ...

  8. phpcms加载系统类与加载应用类之区别详解

    <?php 1. 加载系统类方法load_sys_class($classname, $path = ''", $initialize = 1)系统类文件所在的文件路径:/phpcms ...

  9. 转-HTTP POST GET SOAP本质区别详解

    原文链接:HTTP POST GET SOAP本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认 ...

随机推荐

  1. 基于SourceTree 下的 Git Flow 模型

    基于SourceTree 下的 Git Flow 模型 1. sourceTree  是一个开源的git 图形管理工具,可下载mac版本,windows版本 2. Git Flow 是一套使用Git进 ...

  2. MySQL和OneSQL并行插入性能对比

    按照我的作风,没图说个啥 环境 下面是受叶金荣老师的启发把相关环境交代清楚 MySQL和OneSQL的关键参数配置如下 数据库 sync_binlog innodb_flush_log_at_trx_ ...

  3. 20145218 《Java程序设计》第7周学习总结

    20145218 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lambda表达式的情 ...

  4. CentOS 7.x安装配置

    简述 VMware可以创建多个虚拟机,每个虚拟机上都可以安装各种类型的操作系统.安装方法也有很多种.下面,主要以ISO镜像安装为例,介绍CentOS 7.x的安装过程及相关的参数设置. 简述 创建虚拟 ...

  5. iframe-摘自网友

    定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict ...

  6. 454. 4Sum II ——查找本质:hash最快,二分次之

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...

  7. input 中的enabled与disabled属性

    <style type="text/css"> *{ padding:; margin:; list-style-type: none; box-sizing:bord ...

  8. CCF 2016-12 送货

    问题描述 试题编号: 201512-4 试题名称: 送货 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 为了增加公司收入,F公司新开设了物流业务.由于F公司在业界的良好口碑, ...

  9. PHP5生成条形码器

    前阵子在做一个商家优惠券的功能,需要用到条形码,于是将资料重新整理下. 1.什么是条形码? 百度百科定义:条形码(barcode)是将宽度不等的多个黑条和空白,按照一定的编码规则排列,用以表达一组信息 ...

  10. 使用Apache HttpClient

    在一般情况下,如果只是需要Web站点的某个简单页面提交请求并获取服务器响应,完全可以使用前面所介绍的HttpConnection来完成.但在绝大部分情况下,Web站点的网页可能没这么简单,这些页面并不 ...