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. 【题解】Bzoj4316小C的独立集

    决定要开始学习圆方树 & 仙人掌相关姿势.加油~~ 其实感觉仙人掌本质上还是一棵树,长得也还挺优美的.很多的想法都可以往树的方面上靠,再针对仙人掌的特性做出改进.这题首先如果是在树上的话那么实 ...

  2. MSSQL事务在C#程序端的使用

    拼接成一条SQL执行 优点:简单,容易看懂: 缺点:某些场合,涉及的业务较多,在同一SQL处理显得太冗长,复杂,不利于解耦. 使用细节 在方法之间传递参数,确保多个方法中的SQL都是使用同一个事务的( ...

  3. Ubuntu下使用find / -name aaa* 提示“find: 路径必须在表达式之前: XXXX”

    在使用find命令查找文件时,出现了如题所示的错误提示,因为之前都是这样用的,也没出过错,这次语法都是一样的居然不行了,很是纳闷. 后来了解到如下的情况: 如果当前所在目录存在要查找的目标文件时会出现 ...

  4. 通过init-connect + binlog 实现MySQL审计功能

    背景: 假设这么一个情况,你是某公司mysql-DBA,某日突然公司数据库中的所有被人为删了. 尽管有数据备份,但是因服务停止而造成的损失上千万,现在公司需要查出那个做删除操作的人. 但是拥有数据库操 ...

  5. Consumer [分组背包]

    Consumer Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/65536 K (Java/Others) Total Subm ...

  6. AWS文档与用户指南

    AWS Command Line Interface http://docs.amazonaws.cn/cli/latest/userguide/cli-chap-welcome.html VM Im ...

  7. x:Class, x:Key

    x:Class: 用来创建一个partial的class, 比如默认生成的x:Class="MyTest.MainWindow", 会自动生成一个MainWindow的partia ...

  8. 【LA3487】最小割-经典模型 两种方法

    题目链接 题意:A.B两个公司要买一些资源(他们自己买的资源不会重复),一个资源只能卖给一个公司.问最大收益. simple input 部分: 54 1 //买到1就给54元 15 2 33 3 2 ...

  9. android View实现变暗效果

    android项目中做一个默认图片变暗,有焦点时变亮的效果.相信大家都能各种办法,各种手段很容易的实现这个效果.这里记录下作者实现这个效果的过程及遇到的问题,仅供参考.见下图(注:因为是eclipse ...

  10. 渗透测试中如何科学地使用V*P*N

    环境说明 Windows7 虚拟机,作为VPN网关,负责拨VPN.VPN可以直接OPENVPN,也可以使用ShadowSocks+SSTap. Kali 虚拟机, 渗透测试工作机 配置步骤 Windo ...