5步让你的CSS样式表成功减肥
作者:暴风彬彬 来源:彬GO 发布时间:2009-08-02 21:27:00
你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的改善的。来看看下面的简单5步吧,掌握之后你便能立即为你的CSS样式表修身了。
第一步:学会如何组合选择器
什么是选择器?
如果你还不知道什么叫做”选择器”,你可以先参考一下w3schools.com的CSS语法概述。
未优化的CSS代码
在下面的图例中,你会看到来自三个不同选择器的同样的CSS属性声明。
优化的CSS代码
你可以将上面的css代码优化组合,让所有CSS选择器使用同一组属性。每个选择器之间用逗号分割开,像下面这样。
h2, p, .block {
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}
第二步:了解CSS选择器优先级
什么是CSS优先级?
选择器优先级是用于在CSS代码中同一个选择器使用不同属性时CSS优选处理哪些属性的规则。对选择器优先级不了解的话可以参考:Juicy Studio –选择器优先级
未优化的CSS代码
理解优先级规则中不同等级重要性是很必要的,如果写了同样优先级的CSS声明将有可能导致代码冲突和代码臃肿。
优化的CSS代码
当你完全掌握CSS选择器优先级之后,你便能通过合并统一的属性声明来所见代码量,然后再单独声明元素的独有属性。你会很快找到优化CSS代码的技巧,对完成合并和匹配代码。下面是关于优化上图代码的实例:
h2 {
font-size: 1.5em;
padding: 10px 10px 10px 25px;
margin: 10px 0;
border: 1px solid #ddd;
background: #f0f0f0 no-repeat 5px 10px;
}
h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
#featured h2.twitter {
background-color: #fffdd7;
border: 1px solid #ddd991;
}
你还可以参考以下相关文章:
第三步:学会如何合并类和ID
和之前类似,你也可以通过匹配合并class名和id值来优化你的CSS代码。请记住,为同一个元素添加不同的多个class,你就可以通过组合不同的属性声明在实现你希望的效果。在适当的位置添加id属性也是可以让你对样式有更多的控制权。
HTML
<div id="featured">
<h2 class="best double">Best of</h2>
<h2 class="fav double">Popular Posts</h2>
</div>
<div id="disable">
<h2 class="comments double">Comments</h2>
<h2 class="twitter double">Twitter</h2>
</div>
CSS
...
h2.best {background-image: url(crown.gif);}
h2.fav {background-image: url(heart.gif);}
h2.comments {background-image: url(balloon.gif);}
h2.twitter {background-image: url(balloon_twitter.gif);}
h2.tools {background-image: url(wrench_screwdriver.gif);}
h2.double {
width: 263px;
float: left;
margin: 0;
}
#featured h2.double {
background-color: #ffe2e2;
}
#disable h2 {
filter:alpha(opacity=40);
opacity:.40;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
background-color: #d5d5d5;
}
猜你喜欢
- 从实时视频流中识别出人脸区域,从原理上看,其依然属于机器学习的领域之一,本质上与谷歌利用深度学习识别出猫没有什么区别。程序通过大量的人脸图片
- 1.应用领域:全角和半角的转换通常用在自然语言处理过程中,由于全角和半角的不一致会导致信息抽取不一致,在使用语料训练语言模型会导致模型的效果
- 我们常常看到一个这样的表达式 A=lambda x:x+1可能会一头雾水不知道怎么计算 最基本的理解就是def A(x):retu
- 经常写 shell 脚本知道,字符串判断可以用 =,!= 数字的判断是 -eq,-ne 等,但是 Python 确不是这样子的。所以作为慢慢
- 基本思路是使用opencv来把随机生成的字符,和随机生成的线段,放到一个随机生成的图像中去。虽然没有加复杂的形态学处理,但是目前看起来效果还
- lambda函数的定义   lambda函数是Python中常用的内置函数,又称为匿名
- 函数名:FenYe(url,pageCount,recordCount,curPage,cssstyle)  
- Pytorch 使用GPU训练使用 GPU 训练只需要在原来的代码中修改几处就可以了。我们有两种方式实现代码在 GPU 上进行训练方法一 .
- 守护进程(daemon)是指在UNIX或其他多任务操作系统中在后台执行的电脑程序,并不会接受电脑用户的直接操控。此类程序会被以进程的形式初始
- 本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作。分享给大家供大家参考,具体如下:在实际工作中我们经常会遇到这样的问题,但是当我
- 目录1. 测试环境1.1 软硬件1.2 表结构2. 测试目的2.1 压缩空间对比2.2 查询性能对比3. 测试工具3.1 mysqlslap
- 一 环境阿里云服务器: CentOS 7.4 64位(基于RedHat)本机: macOS High Sierra二 压缩包JDK 
- 许多游戏玩家一定会对游戏中的动态鼠标指针有很深的印象,其实只要一句简单的CSS(层叠样式表),你也能在网页上实现这种效果。首先,你需要一个鼠
- Wake-On-LAN简称WOL,是一种电源管理功能;如果存在网络活动,则允许设备将操作系统从待机或休眠模式中唤醒。许多主板厂商支持IBM提
- Declare @Id varchar(20) Declare @Name varchar(20) Declare Cur Cursor F
- 我们可用如下代码进行监控:函数中使用了fso对象来读取文件属性。Function File_GetLastModifi
- 1. Graphql是什么?GraphQL是Facebook 在2012年开发的,2015年开源,2016年下半年Facebook宣布可以在
- 实现思路1、场地部署:我们需要拥有一个可以用来画节点的地方!详看我这篇文章QGraphicsScene、QGraphicsView的基础使用
- 最近项目中需要实现两组图片对比,并能将两者的区别标识出来。在网上搜索一大堆找到一篇大神的文章,最终实现该功能,在这里记录下:想要实现此dem
- 首先谈谈它们的共同点吧:它们本质上都是一种对资源的独占锁定,都是由并发引起(如果数据库只有一个session,就谈不上锁定)。接着着重谈谈它