摘自: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. [sh]top添加到crontab不生效问题解决

    今天遇到个小问题 top结果赋值给变量,放到文件做处理, 但是不生效问题. https://www.phpbulo.com/archives/509.html cat top.sh NAME=&quo ...

  2. 【iCore4 双核心板_ARM】例程三十三:SD_IAP_ARM实验——更新升级STM32

    实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. 3.按下按键上电或写程序将进行升 ...

  3. 使用winsw部署spring boot jar 项目

    参考:用winsw让任何Windows程序都能运行为服务 简介在linux下部署springboot项目是一件很简单的事,直接后台运行就行了,最多写个shell脚本开机自启就行了.我们最近做的项目需要 ...

  4. “Java是编译执行的语言”这句话对吗?

    现在让你谈谈对Java平台的理解,你是否会感觉内容过于庞大?这个问题是比较宽泛的,Java发展到现在已经不仅仅是语言这么简单了,Java平台涉及的,包括但不仅限于下面提到的这些内容: Java语言本身 ...

  5. linux 安装svn客户端

    安装命令:yum install -y subversion 客户端使用命令: svn help  帮助命令 svn checkout --help  子帮助命令

  6. springboot-aop面向切面编程

    需求: 项目中需要记录用户操作信息,例如用户登陆系统后做了那些操作,需要有具体的日志记录. 解决办法: 1.编写操作记录日志业务类,在使用的方法中调用(一般记录方式). 2.使用面向切面方式记录日志, ...

  7. Centos7 启动脚本

    Centos7 启动脚本 启动脚本.如果进程已存在,输出错误信息后退出: #! /bin/bash PIDS=`ps -ef | grep '/usr/bin/node ./index.js' | g ...

  8. shell中uniq与sort -u 两种去重的对别

    sort -u 和 uniq都能起到删除重复信息的功能,那么他们的区别究竟在哪呢?$ cat test              jasonjasonjasonfffffjason 下面分别执行三个命 ...

  9. 简单工厂模式(Java与Kotlin版)

    Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...

  10. 【转载】C++中替代sprintf的std::ostringstream输出流详解

    一.简单介绍 ostringstream是C++的一个字符集操作模板类,定义在sstream.h头文件中.ostringstream类通常用于执行C风格的串流的输出操作,格式化字符串,避免申请大量的缓 ...