CSS2简写代码(优化)
【1】如果CSS属性值为0,那么你不必为其添加单位(如:px/em);
下面是你可能的写法:
padding: 10px 5px 0px 0px;
但是你可能这样写:
padding: 10px 5px 0 0;
【2】背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数;
下面是你可能的写法:
background-image: url(“logo.png”);
background-position: top center;
background-repeat: no-repeat;
但是你可以这样写:
background: url(logo.png) no-repeat top center;
【3】颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数,他的简写方式是如果颜色值由成对儿出现的三对而数字组成,你可以省略掉没对中的一个数字。
#000000 可以写成 #000, #336699 可以写成 #369
这种简写技巧只适用于成对出现的颜色值,其它颜色值不适用这种技巧,比如:
#010101, #223345, #FFF000
【4】magin值通常你会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;
让我们把值为0的单位去掉,并把4条声明合并成一条声明:
margin:0 10px 0 10px;
具体的你可以看下图:
这种方法同样适用于padding和border-width属性。
【5】border边框的简写方式相比其它生命来说会比较复杂,很多CSSer一开始都容易记混它的简写顺序,你可以想象是声明[一个1像素宽的实线黑色]边框;
下面是你可能的写法:
border-width:1px;
border-style:solid;
border-color:#000;
但是你可以这样写:
border:1px solid #000;
【6】文字属性也有很多可能会用到的属性值,像背景一样,你可能会声明这种复杂的文字样式:
那么你可以参考下图:
注:如果没有定义某个属性值的话,将继承副级元素的定义或使用默认值。
【7】移除选择器:选择器是你在为一些元素应用CSS样式时的基本方法,比如h1, h2, h2, div, strong, pre, ul, ol等等... 如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。
下面是你可能的写法:
div#wrap
但是你可以这样写:
#wrap
在这个例子中所谓的那个选择器就是div(大家以后可以尝试扔掉多余的选择器了)。
【8】(通配符):要明智的使用而避免它在整个CSS样式表中乱开玩笑,你可以使用它来为你的设计部分或全部进行一系列CSS声明。
下面是你可能的写法:
* {
margin:;
}
这个声明会将所有元素的margin值设置为0,同样的,为了严谨起见,你可以尝试这样设置(定义部分):
#menu * {
margin:;
}
这样的声明是指将#menu下的所有元素的margin设为0。
【9】列表
下面是你可能的写法:
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);
但是你可以这样写:
list-style:square inside url(filename.gif);
CSS2简写代码(优化)的更多相关文章
- 10个CSS简写及优化技巧
CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: ...
- android 世界各国英文简写代码 资源文件
今日又用到这段代码,忽然感觉到如果是第一次用的人肯定也会很麻烦.故在此上传一份.后人再用就不必重复做此工作.跟体育老师学过语文,见谅. 提供下载地址 http://download.csdn.net/ ...
- VS中自定义C#快速简写代码
首先在VS中找到工具——代码片段管理器——语言选择(CSharp)——Visual C#——赋值路径——根据路径找到对应的代码片段用VS打开 修改: Title——标题 ShortCut——缩写 D ...
- 简写代码:当变量为false时['',false,null,undefined,0,NaN]时,返回默认值
当变量为'',false,null,undefined,0,NaN时,返回默认值 var a='' a || 'hello world' "hello world" var a ...
- JavaScript 代码 优化笔记
1. 判断某个元素是否在数组中. setCheckNodes : function (zNodes, checkIds){ var that = this; that.setAllNodesUnche ...
- java 性能优化:35 个小细节,让你提升 java 代码的运行效率
前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...
- (转)每位设计师都应该拥有的50个CSS代码片段
原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...
- 很实用的50个CSS代码片段
原文:50 Useful CSS Snippets Every Designer Should Have 面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...
- 闲谈Tomcat性能优化
Tomcat在各位JavaWeb从业者常常就是默认的开发环境,但是Tomcat的默认配置作为生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. 幸好Tomcat还有很多的提升空间.下文介 ...
随机推荐
- tomcat部署web项目的方式 转
JavaWeb开发Tomcat中三种部署项目的方法,开始Java web开发必不可少的步骤,经过查找,觉得有篇文章介绍的不错 1.在conf目录中新建Catalina\localhost目录,在该目录 ...
- VM下的linux系统上不了网?? 使用putty远程登录不上linux的解决方法?
背景:昨晚想尝试一下用putty远程登录我的linux系统,悲剧的是,我竟然连接不上,显示 connection refused ,连接被拒绝.于是我就想看看能不能在linux下看看能不能访问百度 ...
- UNIX环境高级编程---标准I/O库
前言:我想大家学习C语言接触过的第一个函数应该是printf,但是我们真正理解它了吗?最近看Linux以及网络编程这块,我觉得I/O这块很难理解.以前从来没认识到Unix I/O和C标准库I/O函数压 ...
- Chapter 4 - How to Fire some Bullets
Now, we want to let the hero fire some bullets to kill the enemies, add the codes below to set the l ...
- Notification与多线程
来源:南峰子(@南峰子_老驴 ) 链接:http://t.cn/R5swQcR 前几天与同事讨论到Notification在多线程下的转发问题,所以就此整理一下. 先来看看官方的文档,是这样写的: I ...
- 功能模块图、业务流程图、处理流程图、ER图,数据库表图(概念模型和物理模型)画法
如果你能使用计算机规范画出以下几种图,那么恭喜你,你在我这里被封为学霸了,我膜拜ing-- 我作为前端开发与产品经理打交道已有5-6年时间,产品经理画的业务流程图我看过很多.于是百度搜+凭以往经验脑补 ...
- javascript中的函数返回值(return)
有些情况,我们希望获取到函数的执行结果,也就是我们需要在函数以外的地方处理执行结果,而不是在函数内部处理.这时我们就需要为函数设一个返回值,也就是return,即函数执行完毕以后返回的结果. 若在函数 ...
- mysql命令使用
1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...
- width:100% 和 max-width:100%; 有区别吗【转藏】
这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...
- bootstap 滚动监听
---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ------------ ...