CSS引入方式的区别详解
在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引入方式的区别详解的更多相关文章
- JQ的offset().top与js的offsetTop区别详解
一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- cookie ，session 和localStorage的区别详解
2019独角兽企业重金招聘Python工程师标准>>> cookie ,session 和localStorage的区别详解 博客分类: js 当你在浏览网站的时候,WEB 服务器会 ...
- HTML行内元素与块级元素有哪些及区别详解
转自 https://www.jb51.net/web/724286.html 这篇文章主要介绍了HTML行内元素与块级元素有哪些及区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具 ...
- 基于Java的打包jar、war、ear包的作用与区别详解
本篇文章,小编为大家介绍,基于Java的打包jar.war.ear包的作用与区别详解.需要的朋友参考下 以最终客户的角度来看,JAR文件就是一种封装,他们不需要知道jar文件中有多少个.cla ...
- Android中Intent传值与Bundle传值的区别详解
Android中Intent传值与Bundle传值的区别详解 举个例子我现在要从A界面跳转到B界面或者C界面 这样的话 我就需要写2个Intent如果你还要涉及的传值的话 你的Intent就要写两 ...
- HTTP POST GET 本质区别详解
HTTP POST GET 本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交 Ht ...
- phpcms加载系统类与加载应用类之区别详解
<?php 1. 加载系统类方法load_sys_class($classname, $path = ''", $initialize = 1)系统类文件所在的文件路径:/phpcms ...
- 转-HTTP POST GET SOAP本质区别详解
原文链接:HTTP POST GET SOAP本质区别详解 一 原理区别 一般在浏览器中输入网址访问资源都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认 ...
随机推荐
- OA系统部门结构树
public class DepartmentUtils { /** * @param topList 顶级部门列表 * @param removeId 删除部门的id * @return */ pu ...
- centos下vsftpd安装与配置
1.已经配置好可以上网了,所以即可通过yum install vsftpd安装啦.如果不能上网则可以通过dvd2.iso工具集rpm方式进行安装. 2.安装好后,默认本地可以通过匿名用户登录,但是其它 ...
- xml中的xmlns，xmlns:xsi，xsi:schemaLocation有什么作用，如果没有会怎么样呢
如 maven 的 pom.xml 开头是下面这样的谁能解释下,这东西有社么用,不写这东西又会怎么样的,官方拷贝来的说明文档就算了,我想要简明扼要的说明.不胜感激---------<projec ...
- div contenteditable placeholder
contenteditable型的编辑框,实现placeholder的方式有两种 第一种,Css的实现方式: <!DOCTYPE html> <html lang="en& ...
- css兼容处理
#header{ margin-top: 13px; /* 所有浏览器都支持 */ margin-top: 13px\9; /* IE6.IE7.IE8.IE9支持 (所有IE)*/ margin-t ...
- Python 练习 11
#!/usr/bin/python # -*- coding: UTF-8 -*- import math for i in range(10000): #转化为整型值 x = int(math.sq ...
- PHP程序员面试技巧之口试题分享
网络上流传很广的一部分php工程师面试题目,有些phper们认为这些很形式,天下面试题目一大把,不能考核一个人的真实水平,其实细细研究起来,无论怎样,能存在就表明其有存在的价值.下面小编整理了12条P ...
- java多线程下如何调用一个共同的内存单元（调用同一个对象）
/* * 关于线程下共享相同的内存单元(包括代码与数据) * ,并利用这些共享单元来实现数据交换,实时通信与必要的同步操作. * 对于Thread(Runnable target)构造方法创建的线程, ...
- 你不知道的JavaScript--值得你挑战的JavaScript面试题(45题)
1,以下表达式的运行结果是: ["1","2","3"].map(parseInt) A.["1","2&qu ...
- DataTable 中Distinct操作
DataTable dt = ds.Tables[]; DataView dataView = dt.DefaultView; DataTable dtDistinct = dataView.ToTa ...