摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html

在HTML中引入css的其中的两个方法:
1.如果使用链接式,需要使用如下的语句引入外部css文件:

2.如果使用导入式,则需要使用如下语句:

@import "style.css"

使用链接式时,会在装载页面主体部分 之前装载css文件,这样现实出来的页面从一开始就是带有样式效果的,
而使用导入式时,会在整个页面装载完成之后再装载css文件,
对于有的浏览器来说,在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果。
从浏览者的感受来说,这是使用导入式的一个缺陷。
对于一个较大的网站,为了便于维护,可能会希望把所有的css样式分别放在几个 css文件中,这样如果使用链接式引入,就需要几个语句分别导入css文件。
如果要调整css文件的分类,就需要同时调整html文件。这对于维护工作来 说,是一个缺陷。
如果使用导入式,则可以只引进一个总的css文件,在这个文件中再导入其他独立的css文件;而链接式则不具备这个特征。

````因此这里给大家的建议是,
如果仅引入一个css文件,则使用链接方式;如果需要引入多个css文件,则首先用链接式引入一个“目录”css文件,这个“目录”css文件中再使用导入式引入其他css文件。
但是如果希望通过JavaScript来动态决定引入哪个css文件,则必须使用链接方式才能实现。

如何将多个CSS文件导入到一个CSS文件中?

答案:

你可以写了三个css样式表
css_red.css , css_blue.css , css_green.css
这样你就可以写一个主样式 style.css 把三个样式表都装进去:
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

调用的时候只调用 style.css 就行了。

具体代码:

字体属性

红色

蓝色

绿色

style.css

@charset "utf-8";

@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

css_red.css

@charset "utf-8";

.red {
color:red;
}

css_blue.css

@charset "utf-8";

.blue{
color:blue;
}

css_green.css

@charset "utf-8";

.green{
color:green;
}

引入css的两种方式的更多相关文章

  1. vue引入css的两种方式

    方案1.在main.js中引入方式    import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入    @import &qu ...

  2. 引入springboot的两种方式以及springboot容器的引入

    一.在项目中引入springboot有两种方式: 1.引入spring-boot-starter-parent 要覆盖parent自带的jar的版本号有两种方式: (1)在pom中重新引入这个jar, ...

  3. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  4. 服务容错保护断路器Hystrix之一:入门示例介绍(springcloud引入Hystrix的两种方式)

    限流知识<高可用服务设计之二:Rate limiting 限流与降级> 在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元间通过服务注册与订阅的方式互相依赖.由于每个单元都在不同的 ...

  5. WordPress引入css/js两种方法

    WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...

  6. 引入CSS的三种方式

    虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉 从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1.内联式 内联式css样式表就 ...

  7. 引入css的几种方式

      使用CSS样式的几种方式 CreateTime--2017年10月11日16:45:26 Author:Marydon a.外部样式 a1.链接式(推荐使用) <link href=&quo ...

  8. CSS&JS两种方式实现手风琴式折叠菜单

    <div class="accordion"> <div id="one" class="section"> < ...

  9. 引入css的四种方式

    1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...

随机推荐

  1. React Native 从入门到原理一

    React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却 ...

  2. PXE(preboot execution environment):【网络】预启动执行环节:引导 live光盘 ubuntu livecd 18.04+:成功

    比较艰难的成功了. 艰难在于:吱吱吱吱(知知知知知):就是歌init启动参数而已! 最最艰难在于:这个nfs服务器软件有很大的关系.很多时候不是你不行,而是条件不具备 or 条件看似具备但其实有问题 ...

  3. mysql 字符串 拼接 截取 替换

    一. 字符串拼接 concat('asdf',str); 说明: 拼接asdf 和 str 二. 字符串截取 从左开始截取字符串 left(str, length) 说明:) as abstract ...

  4. 【netcore基础】ubuntu 16.04 搭建.net core 2.1 linux 运行环境 nginx反向代理 supervisor配置自启动

    今天来整理下 netcore 在 linux(ubuntu) 上的运行环境搭建 对应版本 ubuntu 16.04 .net core 2.1 nginx version: nginx/1.10.3 ...

  5. linux系统关闭指定服务的方式

    1.根据名称称查找并关闭:pgrep -f 名称 | xargs kill -9 2.根据端口称查找并关闭:lsof -i:端口 | grep LISTEN|awk '{print $2}'|xarg ...

  6. Linux服务器性能分析与调优

    一 linux服务器性能查看 1.1 cpu性能查看 1.查看物理cpu个数: cat /proc/cpuinfo |grep "physical id"|sort|uniq|wc ...

  7. 【CF666C】Codeword 结论题+暴力

    [CF666C]Codeword 题意:一开始有一个字符串s,有m个事件,每个事件形如: 1.用一个新的字符串t来替换s2.给出n,问有多少个长度为n的小写字母组成的字符串满足包含s作为其一个子序列? ...

  8. Solve Error: nafxcw.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new[](unsigned int)" (??_U@YAPAXI@Z) already defined in libcpmt.lib(newaop.obj)

    Error: nafxcw.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new[](unsigned int)&quo ...

  9. 数据交互axios的用法

    参考: https://www.cnblogs.com/zhouyangla/p/6753673.html

  10. hibernate06--参数的绑定

    创建Dept实体类 以及 对应的 Dept.hbm.xml文件 /** * @author 小豆腐 * *部门的实体类 */ public class Dept { private Integer d ...