不可不知的css十大密技

1.css 字体简写 规定

当 使用css定义字体时你可能会这样做：
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你 可以简写这些属性：
font: 1em/1.5em bold italic small-caps verdana,serif
现在好多了吧，不过有丝毫要 留神： 使用这一简写 模式你至少要指定font-size和font-family属性， 其余的属性(如font-weight, font-style,font-varient)如未指定将自动 使用默许值 。

2.同时 使用两个class

通常我们只为属性指定一个class,但这并不等于你不得不指定一个，实际上，你想指定多少就 可以指定多少，例如：

...

3.css中边框(border)的默许值

当编写一条边框的 规定时，你通常会指定 色彩、宽度以及 款式(任何顺序均可) 。例如：border: 3px solid #000(3像素宽的黑色实线边框)，其实这个例子中唯一需求指定的值只不过 款式 。如果你指定 款式为实线(solid),那么其余的值将 使用默许值：默许的宽度为中等(相当于3到4像素)；默许的 色彩为边框里的文字 色彩 。如果这正是你想要的 动机，你 彻底 可以不在css里指定 。

4.!important会被IE 忽略

在css中，通常最终指定的 规定会 获得优先权 。然而对除了IE以外的阅读器来说，任何后面标有!important的语句将 获得绝对的优先权，例如：
margin-top: 3.5em !important; margin-top: 2em
除IE以外全部阅读器中的顶部边界都是3.5em，而IE为2em，有时候这丝毫很有用，尤其在 使用 绝对边界值时(就像这个例子)， 可以显示出IE与 其余阅读器的 细微差异 。
(众多人可能还 留神到了css的子 取舍器也是会被IE 忽略的)

5.图片替换的技巧

使用 标准的html而不是图片来显示文字通常更为 理智，除了加速下载还 可以 获得更好的可用性 。然而如果你 信念 使用 拜访者的机器中可能没有的字体时，你不得不 取舍图片 。
举例来说，你想在每一页的顶部 使用“Buy widgets”的 题目，但你同时又 盼望这是能被查找引擎发现的，为了 好看你 使用了少见的字体那么你就得用图片来显示了：
<h1><img src=http://img1.2345.com/duoteimg/images/duoter_logo.gif alt="Buy widgets" /></h1>
这样固然没错，然而有证据显示查找引擎对 实在文本的 重视远超过alt文本(由于已经有太多网站 使用alt文本充当 要害字)， 因此，我们得用另一种 步骤：<h1><span>Buy widgets</span></h1> ，那你的美丽字体怎么办呢？下面的css 可以帮上忙：
h1
{
background: url(/uploadfile/200806/17/96162027360.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px;
}
现在你既用上了美丽的图片又很好的 潜藏了 实在文本——借助css，文本被定位于屏幕左侧-2000像素处 。

6.css盒模型hack的另一 取舍

css盒模型hack被用来解决IE6之前的阅读器显示问题，IE6.0之前的版本会把某元素的边框值和填充值包括在宽度之内(而不是加在宽度值上) 。例如，你可能会 使用以下css来指定某个容器的尺寸：
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
而后在html中 利用：

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

7.将块元素居中

假如你的网站 使用了固定宽度的布局，全部的内容置于屏幕中央， 可以 使用以下的css：
#content
{
width: 700px;
margin: 0 auto;
}
你 可以把html的body之内任何 名目置于

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
对body的设定将招致主体内容居中，然而连全部的文字也居中了，这恐怕不是你想要的 动机，为此#content 的div还要指定一个值：text-align: left

8. 使用css实现垂直居中

垂直居中对表格来说是小菜一碟， 惟独指定单元格为vertical-align: middle即可，但这在css布局中 无论用 。 假如你将一个导航菜单的高度设为2em， 而后在css中指定垂直对齐的 规定，文字还是会被排到盒的顶部， 根本没有什么区别 。
要解决这一问题， 惟独将盒的行高设为与盒的高度 雷同即可，以这个例子来说，盒高2em,那么 惟独在css中再加入一条：line-height: 2em 就可实现垂直居中了！

9. 容器内的css定位

css的最大 长处之一便是 可以将对象定位在文档的任何位置，同样的也 可以将对象在某容器内进行定位 。 惟独求为该容器增加一条css 规定：
#container
{
position: relative;
}
则容器内的任何元素的定位都是 有关于该容器的 。 假如你 使用以下html 构造：

10.蔓延至屏幕底部的背 风景

css的缺陷之一是不足垂直方向的操纵，从而招致了一个表格布局不会遇到的问题 。 假如你在页面的左侧设定了一列用于 搁置网站的导航 。页面为白色背景，但你 盼望导航所在的列为蓝色背景， 使用以下css即可：

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

问题在于导航项不会向来蔓延到页面的底部，自然它的背 风景也不会蔓延到底部 。于是左列的蓝色背景在页面上被半路截断， 浪费了你的一番设计 。怎么办呢？很 可怜我们现在不得不用 诱骗的 步骤，马上body的背景指定为与左列同 色彩同宽度的图片，css如下：

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

背景图应为宽150像素的蓝色图片 。这一 步骤的缺陷是没法 使用em来指定左列的宽度，当消费者转变文字的大小招致内容的宽度扩张时，背 风景的宽度不会随之转变 。

到写这篇文章为止这是对这类问题的唯一解决 步骤， 因此你不得不为左列 使用像素值来 获得 可以自动蔓延的不同的背 风景 。