【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简写代码(优化)的更多相关文章

  1. 10个CSS简写及优化技巧

    CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: ...

  2. android 世界各国英文简写代码 资源文件

    今日又用到这段代码,忽然感觉到如果是第一次用的人肯定也会很麻烦.故在此上传一份.后人再用就不必重复做此工作.跟体育老师学过语文,见谅. 提供下载地址 http://download.csdn.net/ ...

  3. VS中自定义C#快速简写代码

     首先在VS中找到工具——代码片段管理器——语言选择(CSharp)——Visual C#——赋值路径——根据路径找到对应的代码片段用VS打开 修改: Title——标题 ShortCut——缩写 D ...

  4. 简写代码:当变量为false时['',false,null,undefined,0,NaN]时,返回默认值

    当变量为'',false,null,undefined,0,NaN时,返回默认值 var a='' a || 'hello world'   "hello world" var a ...

  5. JavaScript 代码 优化笔记

    1. 判断某个元素是否在数组中. setCheckNodes : function (zNodes, checkIds){ var that = this; that.setAllNodesUnche ...

  6. java 性能优化:35 个小细节,让你提升 java 代码的运行效率

    前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...

  7. (转)每位设计师都应该拥有的50个CSS代码片段

    原文地址:http://www.cnblogs.com/fengyuqing/archive/2013/06/15/css_50.html 面对每年如此多的 新趋势 ,保持行业的领先是个很困难问题. ...

  8. 很实用的50个CSS代码片段

    原文:50 Useful CSS Snippets Every Designer Should Have          面对每年如此多的 新趋势 ,保持行业的率先是个非常困难问题. 站点设计者和前 ...

  9. 闲谈Tomcat性能优化

    Tomcat在各位JavaWeb从业者常常就是默认的开发环境,但是Tomcat的默认配置作为生产环境,尤其是内存和线程的配置,默认都很低,容易成为性能瓶颈. 幸好Tomcat还有很多的提升空间.下文介 ...

随机推荐

  1. HTML头部<head>学习

    元素是所有头部元素的容器. 元素包含了所有的头部标签元素.在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息. 以下标签都可以添加到 head 部分: 1.title ...

  2. linux之ioctl函数解析

    [lingyun@localhost ioctl_1]$ ls ipconfig.c [lingyun@localhost ioctl_1]$ cat ipconfig.c  /*********** ...

  3. AndroidUniversalImageLoader网络图片加载

    1.功能概要 Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是提供一个可重复使用的仪器为异步图像加载,缓存和显示. (1).使用多线程加载图片(2) ...

  4. ashx+html+ajax

    HTML: $(function() { ajax("NewsList.ashx", function(resText) { document.getElementById(&qu ...

  5. 關於Validform 控件 值得注意的地方

    Validform控件其實用起來挺方便的,直接百度就能找到官網,有直接的demo做參考.這些我就不提了,我所要說的是關於Validform控件的ajax的提交. Validform中有個參數ajaxP ...

  6. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  7. json 是什么

    怎么学习一个知识? 首先要提出几个问题,目前认为json是个什么,json是谁创造的,为什么而出现的,但是目前仅有很长时间之前别人直接告诉我的,json用来存数据的,对于使用也忘记的差不多了,所以现在 ...

  8. 为当前的div 动态添加一个样式

    $("#target").addClass("newClass");

  9. window.resizeTo()和window.open()

    函数:window.resizeTo(width, height) 作用:改变窗口大小到设定的宽和高 参数:width - 宽度像素,必须设定的参数           height - 高度像素,可 ...

  10. C#中volatile的用法

    恐怕比较一下volatile和synchronized的不同是最容易解释清楚的.volatile是变量修饰符,而synchronized则作用于一段代码或方法:看如下三句get代码: int i1;  ...