恰当精简css代码让网站运转功率更高
现在不难看出来的网站运行规律 网站越小越好运行越快,那么,我们就举几个简单的例子:把平时接触到的例子分享给大家。
先看如下一段代码:
#header {
margin-top:10px;
margin-right:15px;
margin-bottom:10px;
margin-left:15px;
backgroung-color:#333333;
background-images:url(/Images/header.jpg);
}
这样的一段CSS代码,在条理上很清晰,结构也很明了,可读性很强,可是这样的一段代码却没有做精简,也就是说它是最原始的CSS代码,下面看精简后的代码:
#header {
margin:10px 15px;
backgroung:#333 url(/Images/header.jpg);
}
------------------
在CSS中有复合属性这一说法,也就是说可以将很多属性参数整合在一起的,比如说上面的“margin-top; margin-right; margin-bottom; margin-left;”可以整合成一个“margin”属性,然后为其配上参数。
通过这一点,我们就可以在原始CSS代码的基本上将代码进一步的精简。而且这样写的结构也合理,可读性也同样强。可是对于要精简到彻底来说,这还不够。为了让这段CSS代码的结构明了,我们用上了空格换行等占用空间的东西,如果将这些占用空间的去掉呢?
#header{margin:10px 15px;background:#333 url(/Images/header.jpg);}
只这一句就替代了上面的一段代码,这样代码就已经精简到了最大化,当然,并不推荐所有人都这样写,这样写的CSS代码在可读性上要远远差于段落式的写法,除非你对自己写的代码有完全掌握的信心。
在同一个站点的CSS文件中,不可避免的会出现不同的ID或Class却有一部分相同的属性,如果将这些ID或Class逐个分开来写的话,在CSS文件里无疑会生成重复代码,而我们要尽量的精简CSS文件的大小,那么“消灭”这部分重复的代码就变得势在必行。
看下面一段CSS代码:
#header{margin:10px 15px;background:#333 url(/Images/header.jpg);}
#content{margin:10px 15px;padding:10px;background:#999;}
#copyright{margin:10px 15px;border:1px solid #f00;}
在上面的三个ID中都有一个相同的属性“margin:10px 15px;”,如果就这样分开来写的话,这三个ID之间将保持各自独立的关系,但却生成了重复的代码,而我们可以将其写成如下格式:
#header,#content,#copyright{margin:10px 15px;}
#header{background:#333 url(/Images/header.jpg);}
#content{padding:10px;background:#999;}
#copyright{border:1px solid #f00;}
将上面的ID换成Class也是一样的。这样写我们就成功的将重复代码“消灭”掉了。但是如果这里具有相同的属性的ID或Class过多的话,难免会造成代码可读性降到很低很低,所以除此之外当具有相同属性的都是Class时还有另外的一种写法:
.main{margin:10px 15px;}
.header{background:#333 url(/Images/header.jpg);}
.content{padding:10px;background:#999;}
.copyright{border:1px solid #f00;}
当然这种写法时,调用时的写法也与平常不一样。
<div class="header main"></div>
<div class="content main"></div>
<div class="copyright main"></div>
这样的写法同样可以达到效果,并且也不会再怕具有相同属性的Class多而造成代码可读性差的问题,但值得注意的一点就是,这种写法对于ID是无效的,不管其中是存在一个ID或者全部都是ID,都将造成这段代码的无效。
以上就是酷云主机关于如何精简css代码的介绍,更多详情请访问www.cnkuyun.com
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
万台服务器分钟级部署,探秘阿里双十一弹性扩容背后的技术故事
一、写在前面 又是一年双十一,这次的购物狂欢再次刷新记录,而背后的阿里云技术也再次交上了一份不错的‘期末考卷’。 往往在大促等高峰时段都需要对流量提前预估,但实际上预先计算好的资源和应用容量,依然可能不足以支撑流量高峰,需要紧急扩容;而容器技术则非常适合这种场景,在需要时快速地、自动弹性伸缩。那么在业务需求极速上升的情况下,大量服务器资源启动时如何抗住并发部署的压力呢? 今年双十一期间,阿里云容器镜像仓库存放30万类镜像,其中包含共计1000万镜像版本,而镜像下载量高达8亿次。 (容器镜像服务产品页,移步了解更多:https://www.aliyun.com/product/acr) 2017年天猫双十一再次刷新了记录, 交易峰值32.5万笔/秒,支付峰值25.6万次/秒,数据库处理峰值4200万次/秒。 二、指数级别增长、百亿次拉取次数,容
- 下一篇
本地搭建ios测试包上传下载安装环境(类似蒲公英)
概述 昨天ios开发这小子说公司网很慢每次测试包上传到蒲公英上都要好久,但是公司这网很垃圾是个事实,为了提高他们的效率,我就本地搭建了一个可以上传安装ios测试包的环境。 操作 项目的地址是 https://github.com/iineva/ipa-server 这个不是我的项目,但是我希望大家可以给这个作者一个star。 操作很简单首先clone下项目 git clone https://github.com/iineva/ipa-server 之后直接使用docker-compose启动就好了 cd ipa-server docker-compose up -d 但是要值得注意的是你这样做可以上传但是不能安装,因为苹果要求这项服务是要有https访问的,所以我的建议是在前端放一个nginx做根据域名的反向代理,当然你也可以使用这个项目里推荐的caddy # ***** Replace ALL <YOUR_DOMAIN> to you really domain ***** version: "2" services: web: build: . container_n...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS关闭SELinux安全模块
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合Redis,开启缓存,提高访问速度
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Hadoop3单机部署,实现最简伪集群