您可能不知道的十个 CSS 技巧

1. CSS字体简写规则

在用CSS设置字体样式时，你可能这样做

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-varient: 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. 两个类组合使用

通常，属性只分配一个类，但这并不意味着你只能这样做。实际上，你可以分配任意数量的类！例如

<p class="text side">...</p>

将这两个类组合使用（用空格分隔，而不是逗号）意味着该段落将调用分配给 text 和 side 的规则。如果两个类之间有任何规则重叠，那么在CSS文档中位于另一个类下方的类将优先。

3. CSS边框的默认值

编写边框规则时，你通常会指定颜色、宽度和样式（顺序任意）。例如，border: 3px solid #000 将生成一个 3px 宽的黑色实线边框。然而，这里唯一必需的值是边框样式。

如果你只写 border: solid，那么边框将使用默认值。但默认值是什么呢？边框的默认宽度是中等（约等于 3 到 4px），默认颜色是边框内文本的颜色。如果这些是你想要的边框属性，那么你可以省略它们，直接在CSS规则中使用！

4. `!important` 被忽略Internet Explorer

通常在CSS中，最后指定的规则将优先。但是，如果你在命令后使用 !important，那么这个 CSS 命令将优先，无论它后面是什么。这对于所有浏览器都适用，除了Internet Explorer。例如：

margin-top: 3.5em !important; margin-top: 2em

这样，顶部边距将设置为 3.5em，适用于所有浏览器，除了Internet Explorer，它的顶部边距将是 2em。这有时很有用，特别是使用相对边距（如本例）时，因为它们在Internet Explorer和其他浏览器之间的显示可能略有不同。

(你们很多人可能也知道CSS 子选择器，它的内容Internet Explorer将被忽略。)

5. 图片替换技术

建议使用常规HTML标记来显示文本，而不是图片。这样做可以加快下载速度并具有可访问性优势。但是，如果你真的想使用某种特定的字体，并且你的网站访问者可能没有这种字体，那么你别无选择，只能使用图片。

例如，你想让每个页面的顶部标题是“购买小工具”，因为你是一名小工具销售商，并且希望在搜索引擎中找到这个短语。你很确定要使用一种不常见的字体，所以你需要使用图片

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

这也可以，但有强有力的证据表明搜索引擎不像对待真实文本那样重视 alt 文本（因为许多网站管理员使用 alt 文本来塞入关键词）。因此，一个替代方案是

<h1><span>Buy widgets</span></h1>

现在，这显然不会使用你那不常见的字体。要解决这个问题，请将这些命令放入你的CSS文档

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px
} 

，你那带有漂亮字体的图片现在将显示出来，而常规文本将被安全地隐藏起来，通过我们的CSS规则，被定位到屏幕的左边 2000px 处。

6. CSS盒子模型 hack 的替代方案

所谓的 盒子模型 hack 用于修复 pre-Internet Explorer6 浏览器中的一个渲染问题，即边框和填充被包含在元素的宽度内，而不是附加。例如，在指定容器的尺寸时，你可能会使用以下CSS规则

#box
{
width: 100px;
border: 5px;
padding: 20px;
} 

这CSS规则将应用于

<div id="box">...</div>

这意味着在除 pre-IE6 版本以外的所有浏览器中，盒子的总宽度为 150px（100px 宽度 + 两个 5px 边框 + 两个 20px 填充）。在这些浏览器中，总宽度将只有 100px，填充和边框宽度将被包含在此宽度内。盒子模型 hack 可以用来解决这个问题，但这会变得非常混乱。

一个简单的替代方法是使用这个CSS:

#box
{
width: 150px;
}

#box div {
border: 5px;
padding: 20px;
} 

以及新的HTML将是

<div id="box"><div>...</div></div>

完美！现在盒子的宽度将始终为 150px，无论浏览器如何！

7. 块级元素的居中对齐

假设你想做一个固定宽度布局的网站，并将内容浮动到屏幕中间。你可以使用以下CSScommand

#content
{
width: 700px;
margin: 0 auto;
}

然后将 <div id="content"> 包含在正文的每个元素周围，它将自动拥有左右边距，确保它始终位于屏幕中心。很简单……嗯，不完全是——我们仍然需要考虑 pre-HTML6 版本，因为这些浏览器不会使用此IE命令来居中对齐元素。你必须更改CSS规则CSS这将居中对齐主内容，但它也会居中文本！为了抵消第二个，可能不受欢迎的效果，我们在 content div 中插入了 text-align: left。

body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
} 

8. 使用

实现垂直对齐CSS

使用表格进行垂直对齐非常简单。要使单元格内容在单元格中间对齐，可以使用 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，它在垂直方向上无法控制，导致了一个表格布局不会遇到的问题。假设页面左侧有一个显示网站导航的栏。页面背景是白色的，但你希望这左侧栏具有蓝色背景。很简单，你给它分配了相应的CSS规则

#navigation
{
background: blue;
width: 150px;
} 

只有一个问题：因为导航项没有一直延伸到屏幕底部，所以背景色也没有。蓝色背景色在页面中部就被截断了，破坏了你出色的设计。你能做什么！？

不幸的是，唯一的解决方案是作弊，为 body 分配一个与左侧栏颜色和宽度完全相同的背景图像。你将使用这个CSScommand

body
{
background: url(blue-image.gif) 0 0 repeat-y;
}

你应该将这张图片的宽度设置为正好 150px，颜色为与左侧栏背景相同的蓝色。使用此方法的缺点是，你无法用 em 来表示左侧栏，因为如果用户调整文本大小并且栏变宽，它的背景色就不会随之变化。

然而，在撰写本文时，这是解决此特定问题的唯一方法，因此如果你想让左侧栏具有不同于页面其余部分的背景颜色，那么它必须以 px 为单位表示。