CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式
内联方式(行间样式)
<div style="width:100px;height: 100px; background-color: red"></div>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个<div>拥有相同的样式，你不得不重复地为每个<div>添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
嵌入方式
<head>
<style>
.embedded {
width: 50px;
height: 50px;
background-color: black
}
</style>
</head>
<div class="embedded"></div>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
链接方式
<head>
<link rel="stylesheet" href="reference.css">
</head>
<div class="link"></div>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
导入方式
<head>
<style>
@import url(import.css);
</style>
</head>
<div class="import"></div>
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
注意：
@import必须是在<style>标签内，或者一个CSS文件中，并且是要在样式定义之前使用。@import是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；- IE使用
@import无法引入超过35条的样式表。 - 3种方式都有效(当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。
- @import url("import.css");
- @import url(import.css);
- @import "import.css";
CSS 从入门到放弃系列：CSS的引入方式的更多相关文章
- CSS 从入门到放弃系列：CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- [大数据从入门到放弃系列教程]在IDEA的Java项目里,配置并加入Scala,写出并运行scala的hello world
[大数据从入门到放弃系列教程]在IDEA的Java项目里,配置并加入Scala,写出并运行scala的hello world 原文链接:http://www.cnblogs.com/blog5277/ ...
- [大数据从入门到放弃系列教程]第一个spark分析程序
[大数据从入门到放弃系列教程]第一个spark分析程序 原文链接:http://www.cnblogs.com/blog5277/p/8580007.html 原文作者:博客园--曲高终和寡 **** ...
- php从入门到放弃系列-01.php环境的搭建
php从入门到放弃系列-01.php环境的搭建 一.为什么要学习php 1.php语言适用于中小型网站的快速开发: 2.并且有非常成熟的开源框架,例如yii,thinkphp等: 3.几乎全部的CMS ...
- php从入门到放弃系列-04.php页面间值传递和保持
php从入门到放弃系列-04.php页面间值传递和保持 一.目录结构 二.两次页面间传递值 在两次页面之间传递少量数据,可以使用get提交,也可以使用post提交,二者的区别恕不赘述. 1.get提交 ...
- php从入门到放弃系列-03.php函数和面向对象
php从入门到放弃系列-03.php函数和面向对象 一.函数 php真正的威力源自它的函数,内置了1000个函数,可以参考PHP 参考手册. 自定义函数: function functionName( ...
- php从入门到放弃系列-02.php基础语法
php从入门到放弃系列-02.php基础语法 一.学习语法,从hello world开始 PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器&qu ...
- K8S从入门到放弃系列-(16)Kubernetes集群Prometheus-operator监控部署
Prometheus Operator不同于Prometheus,Prometheus Operator是 CoreOS 开源的一套用于管理在 Kubernetes 集群上的 Prometheus 控 ...
- K8S 从入门到放弃系列文章目录（Kubernetes 1.14）
1)软件环境 软件 版本 系统 Centos7.5 Kubernetes 1.14.1 Docker 18.09 Calico 3.6 Etcd 3.3.12 2)部署过程简单概要 三台master节 ...
随机推荐
- [HAOI2010]计数
题面在这里 description 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数. 比如说给定{1,2},那么可以生成数字12,21,102,120,201,210 ...
- BZOJ4569 [SCOI2016]萌萌哒 【并查集 + 倍增】
题目链接 BZOJ4569 题解 倍增的思想很棒 题目实际上就是每次让我们合并两个区间对应位置的数,最后的答案\(ans = 9 \times 10^{tot - 1}\),\(tot\)是联通块数, ...
- BZOJ1095 [ZJOI2007]Hide 捉迷藏 【动态点分治 + 堆】
题目链接 BZOJ1095 题解 传说中的动态点分治,一直不敢碰 今日一会,感觉其实并不艰涩难懂 考虑没有修改,如果不用树形dp的话,就得点分治 对于每个重心,我们会考虑其分治的子树内所有点到它的距离 ...
- 【NOIP模拟赛】chess 建图+spfa统计方案数
似乎弗洛伊德和迪杰斯特拉都干不了统计方案数,spfa的话就是不断入队就好. #include <cstdio> #include <cstring> #include < ...
- 解析Mybaits的insert方法返回数字-2147482646的原因
前言:前几天在做项目demo的时候,发现有一个很奇怪的现象,就是MyBatis发现更新和插入返回值一直为"-2147482646".无论怎么改,这个值一直不变...是在摸不着头脑, ...
- Spring学习-- SpEL表达式
Spring 表达式语言(简称SpEL):是一个支持运行时查询和操作对象图的强大的表达式语言. 语法类似于 EL:SpEL 使用 #{...} 作为定界符 , 所有在大括号中的字符都将被认为是 SpE ...
- Java面向对象编程三大特性 --- 多态
多态特性: 子类Child继承父类Father,我们可以编写一个指向子类的父类类型引用,该引用既可以处理父类Father对象,也可以处理子类Child对象,当相同的消息发送给子类或者父类对象时,该对象 ...
- Xamarin+vs2010部署错误：error MSB6004: 指定的任务可执行文件位置\sdk\\tools\zipalign.exe”无效
好不容易配好了Xamarin和vs2010,也搞好了GenyMotion的虚拟机配置,开始调试的时候又报出了这样的错误: error MSB6004: 指定的任务可执行文件位置"C:\Use ...
- commons
<!-- https://mvnrepository.com/artifact/commons-lang/commons-lang --> <dependency> <g ...
- Java并发（7）- 你真的了解ReentrantReadWriteLock吗？
引言 在前几篇文章中了解了ReentrantLock.Semaphore与CountDownLatch后,J.U.C包中基于AQS实现的并发工具类还剩一个比较重要的:读写锁ReentrantReadW ...