怎么把多个css文件合并成一个文件

html-css010

怎么把多个css文件合并成一个文件,第1张

在一个css文件利用@import

url('其他的css文件')

想引入几个css文件就用几个@import

url

注意路径的的书写

首页需要两个css文件index.css和common.css

就在index.css的首行写入(两个css文件在同一个目录下)

@import

url('common.css')

这样只需要在首页链接一个index.css文件就可以了。

问题概括太大,举几个例子借鉴:

border:#000 solid 1px

这个是边框的整合写法,四个边框  颜色、实线、宽1个像素,它分开写法:

border-left-color:#000 border-left-style:solid border-left-width:1px

其他边就不列出来了,有时候我们需要单独定义个别属性就需要分开写。

css里像边框这样的属性太多,列举出来不可能,只要掌握规律,整合写也是很简单的。

一般属性只要它有多重定义基本都可以

元素:属性一的值 +属性二的值 +  属性三的值

属性的值与值之间 一个空格就可以了。

还有一种就是

margin:1px 2px 3px 4px

这里先解刨margin的整合写法

margin:1px 2px 3px 4px分开写出的顺序

margin-top:1px margin-right:2px margin-bottom:3px margin-left:4px

这里遵循的顺序是: 上右下左

如果只有三个值:

margin:1px 2px 3px

也是遵循:上右下左,取前三个,那么这里的三个值定义的就是 上 右 下。

如果只有两个值:

margin:1px 2px

这里就是定义的:上下和左右,上下1px 左右2px

padding元素和 margin一样,基本整合成4个相连数值的元素属性都遵循这个规律。

至于其他属性就不一一列举了,只要了解了元素的属性,遵循css的规则就可以定义出你想要的属性。

只要你CSS不冲突。原则上是可以的。但以你的文件是调用了框架不建议整合。

而且合在一起文件并不会变小,反而变大影响浏览速度。

文件分开前端会以先后循序读取,不拥堵。