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还有很多的提升空间.下文介 ...
随机推荐
- HTML头部<head>学习
元素是所有头部元素的容器. 元素包含了所有的头部标签元素.在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息. 以下标签都可以添加到 head 部分: 1.title ...
- linux之ioctl函数解析
[lingyun@localhost ioctl_1]$ ls ipconfig.c [lingyun@localhost ioctl_1]$ cat ipconfig.c /*********** ...
- AndroidUniversalImageLoader网络图片加载
1.功能概要 Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示. (1).使用多线程加载图片(2) ...
- ashx+html+ajax
HTML: $(function() { ajax("NewsList.ashx", function(resText) { document.getElementById(&qu ...
- 關於Validform 控件 值得注意的地方
Validform控件其實用起來挺方便的,直接百度就能找到官網,有直接的demo做參考.這些我就不提了,我所要說的是關於Validform控件的ajax的提交. Validform中有個參數ajaxP ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- json 是什么
怎么学习一个知识? 首先要提出几个问题,目前认为json是个什么,json是谁创造的,为什么而出现的,但是目前仅有很长时间之前别人直接告诉我的,json用来存数据的,对于使用也忘记的差不多了,所以现在 ...
- 为当前的div 动态添加一个样式
$("#target").addClass("newClass");
- window.resizeTo()和window.open()
函数:window.resizeTo(width, height) 作用:改变窗口大小到设定的宽和高 参数:width - 宽度像素,必须设定的参数 height - 高度像素,可 ...
- C#中volatile的用法
恐怕比较一下volatile和synchronized的不同是最容易解释清楚的.volatile是变量修饰符,而synchronized则作用于一段代码或方法:看如下三句get代码: int i1; ...