本文所用的方法是来源于万戈同学的这篇文章，你只需要把以下的 CSS 加入到要实现翻转效果的网页中即可看到效果：

1
2
3
4
5
6
7
8
9

html{
    filter:fliph
}
body{
    -webkit-transform: rotateY(180deg);
    -moz-transform: skew(0deg, 180deg) scale(-1, 1);
    -o-transform: skew(0deg, 180deg) scale(-1, 1);
    transform: rotateY(180deg);
}

园子博客翻转后的效果展示：

园子博客翻转后的效果展示

其原理是让 IE 浏览器用户用滤镜实现网页的翻转效果，非 IE 浏览器用户通过 CSS3 实现网页水平的翻转。再次感叹下 CSS 的强大魅力，我是得多学学了。

扩展阅读

• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	详解CSS盒模型	CSS入门	常用的CSS单位
无觅

• CSS入门知识
• CSS入门
• 调用样式表的方法
• 详解CSS盒模型
• css语法结构
• id与class的使用原则
• 常用的CSS单位
• CSS布局命名规则
• CSS技巧汇总
• 如何优化CSS文件
• CSS中巧用 nowrap 属性禁止文字自动换行

PS：本来这是一个页面，现在改为文章列表，由此引起的不便请各位朋友多多包涵。

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
CSS技巧汇总	SEO专题精华文章汇总	CSS Hack 汇总	WEB标准专题之精华文章汇总	table转div工具：Table2CSS Converter汉化版下载
无觅

我们可以看到在没有定义 white-space: nowrap; 属性的时候，链接文字会自动换行，而这些效果并不是我们想要的。以上的例子是在做友情链接的时候采用了 li 左浮动所出现的问题（因为每个链接的字数无法确定，所以无法定义 li 的固定宽度）。解决方法也很简单，只要在 li 属性里面加上 white-space: nowrap; 声明就可以了。

语法：

white-space : normal | pre | nowrap

参数：

normal : 默认处理方式

pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。

nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。

说明：

通过设置 white-space属性可以改变对象内空格的处理方式。

应用示例：

p { white-space: nowrap; }

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为css，由W3C定义和维护...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	详解CSS盒模型	CSS入门知识	CSS Hack 汇总
无觅

由于不同的浏览器，比如 IE6.0，IE7.0，IE8.0,Firefox 等，对 CSS 的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的 CSS 代码的的过程，就叫 CSS Hack 。

由于要照顾到不同的浏览器下保持完美的显示效果，经常用到 CSS Hack，园子把常用的一些做了一下汇总，希望能够帮助到朋友们。

区别于IE6、IE7、Firefox 的 CSS Hack

1
2
3

.box {margin-top:5px;} /*Firefox */
* html .box {margin-top:10px;} /*IE6*/
*+html .box {margin-top:15px;} /*IE7*/

通过上述 CSS Hack 可以实现在 Firefox 中上边距为5px, IE6 中上边距为10px, IE7 上边距为15px。

屏蔽IE浏览器（也就是IE下不显示）

1
2

*:lang(zh) select {font:12px  !important;} /*FF可见*/
select:empty {font:12px  !important;} /*safari可见*/

这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

IE6及IE6以下识别

1

* html  select {…}

这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。

1

html/**/ >body  select {…}

这句与上一句的作用相同。

仅IE6不识别，屏蔽IE6

1

select { display :none; /*屏蔽IE6*/}

这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

仅IE7与IE5.0可以识别

1

*+html  select {…}

当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。

仅IE7可以识别

1

*+html  select {…!important;}

当面临需要只针对IE7做样式的时候就可以采用这个HACK。

仅IE6与IE5不识别，屏蔽IE6与IE5

1

select/**/ {display :none;} /*IE6,IE5不识别*/

这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5 。

仅IE5不识别，屏蔽IE5

1

select {…} /*IE5不识别*/

这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。

盒模型解决方法

1

selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}

盒模型的清除方法不是通过!important来处理的。这点要明确。

只有Opera识别

1

@media all and (min-width: 0px){ select {……} }

针对Opera浏览器做单独的设定。

IE的if条件Hack

 Only IE 
所有的IE可识别
 Only IE 5.0 
只有IE5.0可以识别
 Only IE 5.0+ 
IE5.0包换IE5.5都可以识别
 Only IE 6- 
仅IE6可识别
 Only IE 6/+ 
IE6以及IE6以下的IE5.x都可识别
 Only IE 7/- 
仅IE7可识别

清除浮动

1

select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

截字省略号

1

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }

这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

扩展阅读：

说说CSS Hack 和向后兼容

您也可以查看更多的关于CSS技巧汇总。

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
CSS技巧汇总	table转div工具：Table2CSS Converter汉化版下载	详解CSS盒模型	CSS专题之精华文章汇总	用 CSS 实现网页的翻转效果
无觅

id的使用原则

先来说说id，id具有唯一性，其使用原则也是依据这一特性建立的。id是不能重复的，所以在xhtml的结构中，大结构一定是用id。比如标志、导航、主体内容、版权。这些根据制定的规范命名为#logo , #nav , #content , #copyright 等等，本着其唯一性的原则园子建议定义id尽量在外围使用。

class的使用原则
class在CSS的定义中具有普遍性。说白一点就是class具有可重复无限制的使用多次，园子建议大家尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的class都成为id的子级或是孙级。在我们写CSS的时候可以写成这样 #father .child  {…}，另外需要注意的是尽量不要让class包含id，比如.father #child  {…}如果写成这样很显然就非常不可取。当然这也只是相对于良好书写习惯的一些建议，仅供大家参考。

综上所述，归总起来一句话：id是唯一的并且是父级的，class是可以重复的并且是子级的。保持一个良好的代码书写习惯对于以后的代码维护会有很大的帮助，如果您有更好的建议，欢迎给我留言探讨。

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
网站布局设计原则	h1~h6的使用原则	驾照科目二考试通过单边桥的技巧	OverDisk：便捷的饼状图磁盘管理工具	PR 终于更新了！
无觅

上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）：

<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

通过添加一些颜色及字体信息，该例可以有以下显示效果：

这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：

尽管上图显得有点复杂，不过它展示了每个HTML元素是如何被盒子所围绕的。我们可以通过CSS来调整这些盒子。通过这些图例相信你对CSS盒模型会有个大致的理解，在后续的文章中园子将会介绍更多关于CSS方面的知识。

扩展阅读

• WEB标准专题之精华文章汇总 (5)
  为什么我用普通话就能和南京的同学进行交流？ 为什么所有银行卡的大小都是一样的？ 为什么新...
• dhtml详解 (0)
  经常听说dhtml，那么你了解dhtml吗？ 首先我们看一看微软中国站点中的一个重要界...
• Web标准在中国 (0)
  在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流WEB标准以及他们...
• 符合标准的表单设计 (2)
  下午客户让我给他们帮忙设计一个客户反馈表，我找到了以前做的源码想直接发过去，打开源码后无意间...
• 如何设置404页面 (8)
  HTTP 404 错误意味着链接指向的网页不存在，即原始网页的URL失效，这种情况经常会发生...
• 网站布局设计原则 (0)
  园子认为，网页的布局和网站提供的内容同样重要。一个注重用户体验的布局，能更好的体现你的网页内...
• WEB标准的一些常见问题 (0)
  我们一定要记住学习的初衷是什么，如果你仅仅为了通过W3C校验而设计的网页时没有价值的。符合w...
• 如何向web标准过渡 (0)
  web标准的目标是实现网页结构、表现、行为的分离，很多个人站长都开始慢慢的将自己的网站向WE...
• 如何结构化HTML (1)
  刚刚开始学习使用CSS控制页面时，你可能会遇到下面的难题： 可能是你还没有理解C...
• DIV布局和table布局的区别 (1)
  基于web标准的网站设计核心在于如何使用众多web标准中的各项技术来达网站的结构、表现、行为...

您可能也喜欢：
CSS技巧汇总	table转div工具：Table2CSS Converter汉化版下载	CSS布局命名规则	CSS 定义的50个精美按钮下载	css语法结构
无觅

• CSS是Cascading Style Sheets(层叠样式表)的简称。
• CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
• 在标准网页设计中CSS负责网页内容(xhtml)的表现。
• CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀。
• 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课。
• CSS是由W3C的CSS工作组产生和维护的。

了解了这么多您一定想知道CSS的优势在哪里，园子把重要的几点列举了出来：

• 表现和内容相分离
  将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。
• 提高页面浏览速度
  对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。
• 易于维护和改版
  你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

一些在网页中常用的CSS属性：

• 文字或元素的颜色 color
• 背景颜色 background-color
• 背景图像 background-image
• 字体 font-family
• 文字大小 font-size
• 列表样式 list
• 鼠标样式 cursor
• 边框样式 border
• 内补白 padding
• 外边距 margin
• 等等…

入门知识暂时就说到这里吧，在以后的文章里园子将与大家一起学习如何在网页中应用CSS，以共同见证CSS的强大魔力。

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	详解CSS盒模型	CSS布局命名规则	常用的CSS单位
无觅

其实优化CSS文件非常简单，只要我们在网站完成之后把CSS文件做下规整，注意下一些比较常用的缩写方法，你也可以让你的CSS文件做到真正的优化。

当属性值为0时
书写原则是如果CSS属性值为0，那么你不必为其添加单位(如:px/em)，你可能会这样写:
padding: 10px 5px 0px 0px;

试试这样吧:
padding: 10px 5px 0 0;

移除选择器
选择器是你在为一些元素应用CSS样式时的基本方法，比如h1, h2, h2, div, strong, pre, ul, ol等等…如果你使用了class(.类名)或ID(#id名),那么就不用再在声明CSS时包含选择器了。

div#logowrap

尝试扔掉多余的选择器吧:
#logowrap

在这个例子中所谓的那个选择器就是div

学会使用万能通配符*
要明智的使用*而避免它在整个CSS样式表中乱开玩笑，*是个通配符，你可以使用它来为你的设计部分或全部进行一系列CSS声明。例如:

* {
margin: 0;
}

这个声明会将所有元素的margin值设置为0，同样的，为了严谨起见，你可以尝试这样设置:
#menu * {
margin: 0;
}

这样的声明是指将#menu下的所有元素的margin设为0。

背景的缩写方法
背景(background)属性可能会包含设置背景色、背景图、背景图的位置和背景图重复方式的参数，你可能会写成:
background-image: url(”logo.png”);
background-position: top center;
background-repeat: no-repeat;

其实可以缩写成:
background: url(logo.png) no-repeat top center;

颜色
颜色(color)属性在CSS通常指定为一个十六进制的值,一个#加6位数字，他的简写方式是如果颜色值由成对儿出现的三对而数字组成，你可以省略掉没对中的一个数字。

#000000 可以写成 #000, #336699 可以写成 #369

这种简写技巧只适用于成对出现的颜色值（即奇数位色值和偶数位色值相同时），其它颜色值不适用这种技巧，比如:
#010101, #223345, #FFF000

Margin(外边距/空白边)的缩写
声明CSS magin值得时候通常会写成这样:
margin-top:0px;
margin-right:10px;
margin-bottom:0px;
margin-left:10px;

让我们试试把值为0的单位去掉，并把4条声明合并成一条声明:
margin:0 10px 0 10px;

当你声名padding、margin、border(还有一些其他属性)时，记得要把按照顺时针的方向来声明属性值，也就是按照上-右-下-左的方向。关于这些属性还有另一个更加简单的写法，看看属性中上和下、左和右是否值是相等的，如果是那么就可以进一步优化了，你可以省略掉后两个值，剩下的两个值前者指上下，后者指左右:
margin:0 10px;

它是指左右的值为10px，上下的值为0；Padding(内边距)padding的简写技巧等同于margin:

padding-top:0px;
padding-right:10px;
padding-bottom:0px;
padding-left:10px;

可以写成:
padding: 0 10px;

Border(边框)边框的缩写
border缩写的方式相比其它声明来说会比较复杂，很多CSSer一开始都容易记混它的简写顺序，如果你想声明一个1像素宽的实线黑色边框，可能会写成:
border-width:1px;
border-style:solid;
border-color:#000;

其实可以写成:
border:1px solid #000;

注意:这里的颜色值已经使用了上面讲过的颜色简写方法了哦。我们还可以为四个边设置不同的宽度:
border-top-width:1px;
border-right-width:2px;
border-bottom-width:3px;
border-left-width:4px;

可以简写成:
border-width:1px 2px 3px 4px;

最后，我们还可以只设置右和下边框的样式:
border-right:1px solid #000;
border-bottom:1px solid #000;

虽然并没减少多少代码,但园子建议写成这样:
border:1px solid #000;
border-width:0 1px 1px 0;

先设置四个边的默认风格，然后声明具体的哪个边要显示。

文字属性的缩写
文字属性也有很多可能会用到的属性值，像背景一样，你可能会声明这种复杂的文字样式:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:150%;
font-family:宋体, Arial, sans-serif;

其实可以优化成一行:
font:italic small-caps bold 1em/150% 宋体, Arial, sans-serif;

列表的缩写
list-style-type:square;
list-style-position:inside;
list-style-image:url(filename.gif);

可以写成:
list-style:square inside url(filename.gif);

再给大家举个综合的例子，请看下面的CSS代码：
.sample1 {
margin-top: 15px;
margin-right: 20px;
margin-bottom: 12px;
margin-left: 24px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: thin;
border-top-style: solid;
border-top-color: #000000;
}

将它用一些缩写性质来替代就能够把代码减少为下面这样，两者的实际效果是完全一样的：
.sample1 {
margin: 15px 20px 12px 24px;
padding: 5px 10px 4px 8px;
border-top: thin solid #000;
}

下面是CSS缩写性质的列表以及它们所表示的常规性质。

• Background（背景）：背景附件、背景颜色、背景图像、背景位置、背景重复
• Border（边框）：边框颜色、边框风格、边框宽度
• border-bottom（底部边框）：底部边框颜色、底部边框样式、底部边框宽度
• border-left（左侧边框）：左侧边框颜色、左侧边框样式、左侧边框宽度
• border-right（右侧边框）：右侧边框颜色、右侧边框样式、右侧边框宽度
• border-top（顶部边框）：顶部边框颜色、顶部边框样式、顶部边框宽度
• cue（声音提示）：前提示、后提示
• font（字体）：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸
• list-style（列表样式）：列表样式图像、列表样式位置、列表样式类型
• margin（空白）：顶部空白、右侧空白、底部空白、左侧空白
• outline（大纲）：大纲颜色、大纲样式、大纲宽度
• padding（间隙）：顶部间隙、右侧间隙、底部间隙、左侧间隙
• pause（暂停）：后暂停、前暂停

总结了这么多，园子相信只要你留意正确的缩写方法，你也可以在最短的时间内把你的CSS优化好。赶快尝试一下吧。

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
CSS技巧汇总	table转div工具：Table2CSS Converter汉化版下载	详解CSS盒模型	用 CSS 实现网页的翻转效果	CSS布局命名规则
无觅

需要说明下的是，按钮中的渐变效果只在IE等浏览器下可以显示效果，Firefox浏览器下显示的按钮背景是灰色的。CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.btn {
 BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid
}
.btn1_mouseout {
 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn1_mouseover {
 BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid
}
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}
.btn3_mouseout {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mouseover {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn3_mousedown
{
 BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
}
.btn3_mouseup {
 BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
}
.btn_2k3 {
 BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid
}
–>

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• CSS布局命名规则 (1)
  近半年来园子一直试着遵循WEB标准设计和制作网页，今天花些时间整理一下在布局过程中会频繁用到...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	CSS入门	详解CSS盒模型	CSS入门知识
无觅

网站一般布局命名

• 页头:header
• 登录条:loginBar
• 标志:logo
• 侧栏:sideBar
• 广告:banner
• 导航:nav
• 子导航:subNav
• 菜单:menu
• 子菜单:subMenu
• 搜索:search
• 滚动:scroll
• 页面主体:main
• 内容:content
• 指南:guild
• 服务:service
• 热点:hot
• 新闻:news
• 下载:download
• 注册:regsiter
• 状态:status
• 标签页:tab
• 文章列表:list
• 提示信息:msg
• 小技巧:tips
• 栏目标题:title
• 加入:joinus
• 按钮:btn
• 投票:vote
• 合作伙伴:partner
• 友情链接:friendLink
• 页脚:footer
• 版权:copyRight

常用ID命名

• 外　套:wrap
• 主导航:mainNav
• 子导航:subnav
• 页　脚:footer
• 整个页面:　content
• 页　眉:header
• 页　脚:footer
• 子菜单:submenu
• 边导航图标:sidebarIcon
• 注释:　note
• 面包屑:breadCrumb(即页面所处位置导航提示)
• 容器:　container
• 内容:　content
• 搜索:　search
• 登陆:　login
• 功能区:shop(如购物车，收银台)
• 当前的　current
• 商　标:label
• 标　题:title
• 主导航:mainNav(globalNav)
• 顶导航:topnav
• 边导航:sidebar
• 左导航:leftsideBar
• 右导航:rightsideBar
• 旗　志:logo
• 标　语:banner
• 菜单内容1: menu1Content
• 菜单容量:　menuContainer

css样式表的命名

• 基本的或公用的：base.css
• 主要的:master.css
• 布局，版面:layout.css
• 打印样式:print.css
• 主题:themes.css
• 专栏:columns.css
• 针对文字:font.css

扩展阅读

• 用 CSS 实现网页的翻转效果 (38)
  有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平...
• CSS专题之精华文章汇总 (7)
  Cascading Style Sheets（层叠样式表），简写为CSS，由W3C定义和维护...
• CSS中巧用 nowrap 属性禁止文字自动换行 (3)
  设计页面的时候，我们往往需要把内容在一行里面显示，也就是禁止让文字自动换行，首先来看下下面的...
• CSS Hack 汇总 (2)
  什么是 CSS Hack ？ 由于不同的浏览器，比如 IE6.0，IE7.0，IE8....
• id与class的使用原则 (3)
  在前面的文章里园子主要与大家分享了CSS的入门知识以及CSS技巧汇总。在用CSS来控制网页布...
• CSS入门知识 (1)
  我们首先要了解下面几点关于CSS方面的必备常识： CSS是Cascading S...
• 如何优化CSS文件 (4)
  尽管现在的网络质量日新月异的发展着，但做为网页设计者还是非常在意网站的交互速度。我们都知道，...
• 用CSS做的几个漂亮按钮 (0)
  你是否发现有些网站制作的按钮非常漂亮，而且还不是使用PS做的图片，这是怎么做到的呢？今天园子...
• 常用的CSS单位 (0)
  国内大多数站点都采用px作为字体的单位，当然也包括园子的网站。而国外的一些主流英文站点，几乎...
• css语法结构 (0)
  css的语法结构由三部分组成：选择符（Selector）、属性（property）、和值（v...

您可能也喜欢：
table转div工具：Table2CSS Converter汉化版下载	CSS技巧汇总	CSS入门	详解CSS盒模型	Windows 7 无法重命名本地磁盘的解决方法
无觅