怎样将多个CSS文件导入一个CSS文件中
问题:
在HTML中引入css的其中的两个方法:
导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文件,而使用导入式则是使用css规则引入外部css文件。因此它们的语法也不同。
1.如果使用链接式,需要使用如下的语句引入外部css文件:
<link href="style.css" rel="stylesheet"
type="text/css" />
2.如果使用导入式,则需要使用如下语句:
<style
type="text/css">
@import "style.css"
</style>
````此外,采用这两种方式后的现实效果也略有区别。使用链接式时,会在装载页面主体部分
之前装载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 就行了。
具体代码:
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>字体属性</title>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
<body>
<p
class="red">红色</p>
<p
class="blue">蓝色</p>
<p
class="green">绿色</p>
</body>
</html>
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文件导入一个CSS文件中的更多相关文章
- 如何将dmp文件导入到oracle数据库中
如何将dmp文件导入到oracle数据库中 1.首先,我们可以先建立自己的一个用户表空间,创建表空间的格式如下: CREATE TABLESPACE certification(表空间的名字) DAT ...
- 使用SQL语句创建数据库1——创建一个数据库文件和一个日志文件的数据库
目的:创建一个数据库文件和一个日志文件的数据库 在matser数据库下新建查询,输入的命令如下: USE master——指向当前使用的数据库.创建数据库实际上是向master数据库中增加一条数据库信 ...
- thinkphp 使每一个模板页都包括一个header文件和一个footer文件
在开发的过程中,常常遇到要使每一个模板页都包括一个header文件和一个footer文件.thinkPHP的模板布局为我们提供了一个叫全局配置方式可以解决问题. 1. 在配置文件里开启LAYOUT_O ...
- 将CSV格式或者EXCEL格式的文件导入到HIVE数据仓库中
学习内容:数据导入,要求将CSV格式或者EXCEL格式的文件导入到HIVE数据仓库中: ①hive建表:test1 create table test1 (InvoiceNo String, Stoc ...
- Navicate for mysql如何导入一个sql文件
我在做的项目是宜立方商城的项目,现在需要把见表的sql文件导入到navicate中去,步骤如下: ①新建一个数据库,如下: ②在数据库名字上右键,选择运行sql文件 ③选择如下sql文件 ④刷新之后:
- .m文件导入C++头文件带来的错误
这几天的工作挖了不少的坑.遇到了各种千奇百怪的错误,如今好好总结一下. 新建一个project,然后新建HelloCPP.h,HelloCPP.cpp文件.HelloCPP.h文件内容例如以下: #i ...
- 使用pyinstaller打包多个py文件为一个EXE文件
1. 安装pyinstaller. pip install pyinstaller !!!!64位win7上打包后始终不能用,提示找不到ldap模块,换了32位win7就好了.!!!!(代码中涉及ld ...
- 使用ILMerge将所有引用的DLL和exe文件打成一个exe文件
今天做了一个IM自动更新的软件,里面牵扯到了文件的解压和接口签名加密,使用了2个第三方的dll,想发布的时候才发现调用的类没几个,就像把它们都跟EXE文件打包在一起,以后复制去别的地方用也方便,于是上 ...
- windows 批处理把所有java源码导入一个txt文件中
首先在src下搜*.java,把搜到的文件全拷出来放在allsrc目录下, 然后在allsrc目录下建个run.bat,键入以下内容for %%i in (*.java) do type %%i&g ...
随机推荐
- 数据库表中存在Text类型的属性时,写sql语句时需要注意喽!
之前,习惯性地写查询语句时,查询条件用“=”判断.今天写程序的时候,查询时突然报了一个错误:数据类型text 和varchar 在equal to 运算符中不兼容.查看了一下数据库发现,其中有一个属性 ...
- 查找当前目录和所有子目录下的后缀名为.o的文件,删除之
查找: find . -name "*.o" -exec ls {} \; 删除: find . -name "*.o" -exec rm -f {} \;
- RESTful接口设计原则/最佳实践(学习笔记)
RESTful接口设计原则/最佳实践(学习笔记) 原文地址:http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api 1 ...
- unity 实现简单的分离
在网上随便搜一搜资料就可以找到很多关于Mvc ,MVVM,StrangeIoc等有关显示与数据分离的博客,很多大神也是讲的蛮有道理的,但是这些框架理解起来有一定的难度, 这时候肯定有人说有现成的框架为 ...
- dbstart和dbshut启动、关闭数据库报错ORACLE_HOME_LISTNER is not SET解决办法
dbstart启动数据库报错,如下: [oracle@wen ~]$ dbstartORACLE_HOME_LISTNER is not SET, unable to auto-start Oracl ...
- MVC_Controller
准备工作 安装VS2010或更高版本 安装数据库2008或更高版本 视个人系统不同配置IIS本地服务 数据库和VS下载地址 http://msdn.itellyou.cn/ 本节目标 通过本节案例对M ...
- Android性能优化典范第一季
2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...
- android知识杂记(三)
记录项目中的android零碎知识点,用以备忘. 1.android 自定义权限 app可以自定义属于自己的权限: <permission android:description="s ...
- 关于RPC与MQ异同的理解
最近看了一些资料,回顾过去项目的经验,梳理自己对两者异同的理解: 相同: 1.都利于大型系统的解耦: 2.都提供子系统之间的交互,特别是异构子系统(如java\node等不同开发语言): 不同: 1. ...
- 最少知识原则(Least Knowledge Principle)
最少知识原则(Least Knowledge Principle),或者称迪米特法则(Law of Demeter),是一种面向对象程序设计的指导原则,它描述了一种保持代码松耦合的策略.其可简单的归纳 ...