本文由 Marcher 译自 evolt.org 的文章 Ten CSS Tricks You May Not Know。如有错误和翻译不当还请指出。
1. CSS 字体简洁表达法当使用 CSS 修饰字体时，你可以这么做：
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
这其实没有必要；你可以使用这种 CSS 简洁表达属性：
font: 1em/1.5em bold italic small-caps verdana,serif
好多了吧！只需要几个
通知字符：这种 CSS 简洁表达法只能用于同时指定
font-size 和
font-family 的情况。同样，如果你不指定
font-weight，
font-style，或者
font-varient，那么这些值将会自动默认设为
normal，所以也要牢记这一点。
2. 两类(class)共用通常属性中仅指定一个类，但这并不意味着是你必须遵守的。实际上，
你可以指定任意多的类！例如：
<.p class="text side">...<./p>
同时使用这两类（用空格分隔，不是逗号）意味着
段落会同时应用指定的 text 和 side 规则。如果有规则与那两个类重叠，那么在其他 CSS 文档之下的规则将会被优先处理。
3. CSS 边缘(border)默认值当书写边缘规则的时候，你通常会指定颜色，宽度和样式（以任意顺序）。例如，
border: 3px solid #000
这个规则会生成一个黑色实心边框，3px粗。然而，这里仅需的值却是边缘样式。
如果你只是想要书写
border: solid，那么将会使用对该边缘的默认值。但默认值是什么？边缘的默认宽度值是“中”（相当于 3 至 4px），默认颜色就是边缘内字体的颜色。如果其中任意一个边缘规则就是你想要的，你大可以不必把它们写进 CSS 规则里！
4. 被 IE(Internet Explorer) 忽略的 !important通常在 CSS 中哪条规则最后出现，哪条规则就会被优先处理。然而如果你在命令后使用了
!important，那么这条 CSS 命令就会被优先处理，不管在此之后还会出现什么。这个方法可以应用于除 IE 外的所有浏览器。举个例子：
margin-top: 3.5em !important; margin-top: 2em
如此，顶部空白在除 IE 之外的所有浏览器中被设置为 3.5em，而不是本应有 2em 的顶部空白。这在某些时候很有用，特别是当使用相对空白的时候（就像这个例子一样），这会使在 IE 和其他浏览器中的显示有些许不同。
（可能你们同样知道被 IE 忽略的内容，CSS
子选择器）
5. 图像替换技巧使用有条理的 HTML 来显示文字通常是明智的，但是对于图像并非如此。这么做可以顾及到更快的下载速度和更佳的访问性。然而，如果你使用特定的字体，访问者的计算机上却没有你指定的字体，除了使用图像你实在没有其他任何选择了。
举个例子，你是一个器械销售者，你想让每页的顶部标题都是“购买器械”，而且希望这个短语被搜索引擎检索到。
为了美观你使用了罕见的字体，那么你就得用图片了。
<.h1><.img src="widget-image.gif" alt="购买器械" /><./h1>这没有问题，但是有强有力的证据证明搜索引擎并不像对待真实文本那样重要地对待 alt 文本（因为已经有太多的网站管理员使用 alt 文本填满关键字了）。所以，另一个选择是：
<.h1><.span>购买器械<./span><./h1>现在，这明显不再使用你的罕见字体了。要修复这个问题，把这些命令放置在你的 CSS 文档里：
h1
{
background: url(widget-image.gif) no-repeat;
}
h1 span
{
position: absolute;
left:-2000px;
}
带有你奇特字体的图像现在将会显示出来，并且常规文字会安全的退出视线：由于我们的 CSS 规则，它们被定位到屏幕左侧 2000px 的位置去了。
6.CSS 盒模型(box model) hack 的另一选择盒模型 hack 用来修复 IE6 之前浏览器把边缘值和填充值
包含在元素宽度，而不是
附加上的显示问题。例如，当你指定一个容器的尺寸时，你可以用下面的 CSS 规则：
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
这个 CSS 规则应用于：
<.div id="box">...<./div>这意味着盒在除 IE6 之前版本外所有浏览器内的总宽度是 150px（100px 宽+两个 5px 的边缘+两个 20px 的填充）。在这些浏览器中总宽度应该只是 100px，它把填充和边缘的宽度全都包含在总宽度之列。
盒模型 Hack 可以用来修复这个问题，但这可以
变得实在杂乱。
使用这个 CSS 是另一种选择：
#box
{
width: 150px;
}
#box div
{
border: 5px;
padding: 20px;
}
新的 HTML 将会是：
<.div id="box"><.div>...<./div><./div>7.居中排列块(block)元素比如你想要建设一个有固定宽度布局的站点，并且内容浮于屏幕中央。你可以使用下列 CSS 命令：
#content
{
width: 700px;
margin: 0 auto;
}
然后你可以将 HTML 的 body 之中任意项目用
<.div id="content"> 包围，他们将自动设置左右相等的边缘，确保它总是位于屏幕中央。简单……但并不完全，在 IE6 之前版本的浏览器里仍有问题存在，使用这些 CSS 命令并不能让这些元素居中排列。你必须更改 CSS 命令：
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
这就会使主要内容居中排列，但它也会使文本居中！要避免后一种并不期望的效果出现，还要在
#content 的
div 中插入
text-align: left。
8.使用 CSS 垂直排列垂直排列表(table)轻而易举。要使单元格内容排列在单元中部，只需用
vertical-align: middle。但这
在 CSS 布局中不起作用。比如你有一个导航菜单项目，高度指定为 2em，并在 CSS 规则中插入了以上垂直排列命令。它基本上没什么变化，文本还将被推到盒的顶部。
嗯……不是期望中的效果。解决方案是？在 CSS 里
指定与盒本身高度相同的行高。这种情况下，盒高 2em，所以我们将要在 CSS 里插入
line-height: 2em，这时候文本就飘到盒的中央了——相当漂亮！
9.CSS 在容器内的定位CSS 最棒的地方就在于你可以将一个对象定位于文档中你期望的任意一个地方。它同样可能（通常是期望）是对象在一个容器中定位。做起来也很简单。只需要把下列 CSS 规则指定给容器：
#container
{
position: relative;
}
这时，此容器内的任何元素都会被相对定位了。比如你有这么一段 HTML 结构：
<.div id="container"><.div id="navigation">...<./div><./div>要让导航准确定位于距盒容器左侧 30px，顶部 5px 的位置，你可以使用这些 CSS 命令：
#navigation
{
position: absolute;
left: 30px;
top: 5px;
}
漂亮！在这个特殊的例子里，你也当然可以用
margin: 5px 0 0 30px，但有些情况下定位的方法会更加可取。
10. 背景色溢出至屏幕底部CSS 的缺点之一就是缺乏对它垂直控制的能力，而这会导致表格(table)布局无法容纳的特殊问题。比如你有一个置于页面左侧包含站点导航的分栏。整个页面是白色背景，但你想让
这个左分栏设置为蓝色背景。你可以简单地用适当的 CSS 规则指定：
#navigation
{
background: blue;
width: 150px;
}
可还有一个问题：由于导航项目不会一直延续到屏幕底部，则背景颜色也是如此。那么
蓝色背景颜色就从页面中部被截断了，这毁了你的绝妙设计。你该怎么办？
很遗憾，唯一的解决方案就是“欺骗”，并指定给
body 一个与左分栏颜色与宽度严格相同的背景图像。你可以使用如下 CSS 命令：
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
你放置在背景中的这个图像应该是严格的 150px 宽度，并与左分栏背景具有相同的蓝色。使用这种方法的缺陷就是你不能使用 em 为单位表示左分栏的宽度，这样当用户调整字体大小导致分栏扩张时，背景颜色不会变化。
然而在书写过程中，如果你想要让页面其他部分拥有不同的背景色，使用 px 为单位表示左分栏宽度是对这种问题的唯一解决方案。
-全文结束-
