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时,包住路径的引号必须保留。
    1. @import url("import.css");
    2. @import url(import.css);
    3. @import "import.css";

下载源码

CSS 从入门到放弃系列:CSS的引入方式的更多相关文章

  1. CSS 从入门到放弃系列:CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  2. [大数据从入门到放弃系列教程]在IDEA的Java项目里,配置并加入Scala,写出并运行scala的hello world

    [大数据从入门到放弃系列教程]在IDEA的Java项目里,配置并加入Scala,写出并运行scala的hello world 原文链接:http://www.cnblogs.com/blog5277/ ...

  3. [大数据从入门到放弃系列教程]第一个spark分析程序

    [大数据从入门到放弃系列教程]第一个spark分析程序 原文链接:http://www.cnblogs.com/blog5277/p/8580007.html 原文作者:博客园--曲高终和寡 **** ...

  4. php从入门到放弃系列-01.php环境的搭建

    php从入门到放弃系列-01.php环境的搭建 一.为什么要学习php 1.php语言适用于中小型网站的快速开发: 2.并且有非常成熟的开源框架,例如yii,thinkphp等: 3.几乎全部的CMS ...

  5. php从入门到放弃系列-04.php页面间值传递和保持

    php从入门到放弃系列-04.php页面间值传递和保持 一.目录结构 二.两次页面间传递值 在两次页面之间传递少量数据,可以使用get提交,也可以使用post提交,二者的区别恕不赘述. 1.get提交 ...

  6. php从入门到放弃系列-03.php函数和面向对象

    php从入门到放弃系列-03.php函数和面向对象 一.函数 php真正的威力源自它的函数,内置了1000个函数,可以参考PHP 参考手册. 自定义函数: function functionName( ...

  7. php从入门到放弃系列-02.php基础语法

    php从入门到放弃系列-02.php基础语法 一.学习语法,从hello world开始 PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器&qu ...

  8. K8S从入门到放弃系列-(16)Kubernetes集群Prometheus-operator监控部署

    Prometheus Operator不同于Prometheus,Prometheus Operator是 CoreOS 开源的一套用于管理在 Kubernetes 集群上的 Prometheus 控 ...

  9. K8S 从入门到放弃系列文章目录(Kubernetes 1.14)

    1)软件环境 软件 版本 系统 Centos7.5 Kubernetes 1.14.1 Docker 18.09 Calico 3.6 Etcd 3.3.12 2)部署过程简单概要 三台master节 ...

随机推荐

  1. [洛谷P3413]SAC#1 - 萌数

    题目大意:求$[l,r](0\leqslant l<r< 10^{1001})$中存在长度至少为$2$的回文串的数字数 题解:数位$DP$,发现如果有回文串,若长度为偶数,一定有两个相同的 ...

  2. [洛谷P4329][COCI2006-2007#1] Bond

    题目大意:有$n$个人有$n$个任务,每个人执行每个任务有不同的成功率,每个人只能执行一个任务,求所有任务都执行的总的成功率. 题解:可以跑最大费用最大流,把成功率取个$log$,最后$exp$回去就 ...

  3. BZOJ3242 [Noi2013]快餐店 【环套树 + 单调队列dp】

    题目链接 BZOJ3242 题解 题意很清楚,找一点使得最远点最近 如果是一棵树,就是直径中点 现在套上了一个环,我们把环单独拿出来 先求出环上每个点外向树直径更新答案,并同时求出环上每个点外向的最远 ...

  4. Conjugate 解题报告

    Conjugate 问题描述 在不存在的 \(\text{noip day3}\) 中,小 \(\text{w}\) 见到了一堆堆的谜题. 比如这题为什么会叫共轭? 他并不知道答案. 有 \(n\) ...

  5. 安徽师大附中%你赛day2T3 巧克力 解题报告

    巧克力 题目描述 小\(T\)有\(N\)块巧克力, 每块巧克力上都有一句话(由小写英文字母组成,不含标点) .现在每块巧克力都断成了若干截,更糟糕的是,有一些碎片丢失了 ,但是剩下的碎片之间的顺序是 ...

  6. BZOJ 2500 幸福的道路(race) 树上直径+平衡树

    structHeal { priority_queue<int> real; priority_queue<int> stack; void push(int x){ real ...

  7. git上传本地项目

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  8. java属性为什么没多态,而是方法多态

    定义 java多肽的特性:方法具有多态性,属性却没有. 准备 基类: 子类: 测试类: 结果: 分析如下 父类 a=new 子类,实际对象时子类.由于向上转型,我们可以用父类在编译期间代替子类,使得编 ...

  9. Mysql TEXT类型长度

    BLOBTEXT一个BLOB或TEXT列,最大长度为65535(2^16-1)个字符. MEDIUMBLOBMEDIUMTEXT一个BLOB或TEXT列,最大长度为16777215(2^24-1)个字 ...

  10. CentOS 7 单用户模式修改root密码

    1)在启动grub菜单,选择编辑选项启动 2)按键盘e键,来进入编辑界面 3)找到Linux 16的那一行,将ro改为rw init=/sysroot/bin/sh 4)现在按下Control+x,使 ...