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-sizefont-family属性，其他属性(如font)-weight, font-style,font-varient）默认值将自动使用，如果没有指定。 2.同时使用两个classs 通常我们只为属性指定一个class，但这并不意味着你只能指定一个。事实上，你可以指定你想指定的数量，例如：

…

两个class(使用空间而不是逗号分割)将同时应用于两个class中制定的规则。如果两者之间有重叠的规则，后者将获得实际的优先级。如果两者之间有重叠的规则，后者将获得实际的优先级。 3.css中边框（border)的默认值 编写边框规则时，通常会指定颜色、宽度和样式(任何顺序都可以)。例如：border: 3px solid #000(3像素宽的黑色实线框)，其实这个例子中唯一需要指定的值就是风格。如果您将样式指定为实线（solid),其余值使用默认值：默认宽度为中等（相当于3-4像素）；边框中的文字颜色为默认颜色。如果这是你想要的，你可以不在css中指定它。 4.!IE会忽略important 最终规定的规则通常在css中获得优先权。然而，对于IE以外的浏览器，任何背面标记！important的句子将获得绝对优先权，例如：margin-top: 3.5em !important; margin-top: 除IE外，所有浏览器的顶部边界为3.5em，IE是2em，有时非常有用，特别是在使用相对边界值时（例如），IE与其他浏览器之间的细微差异。(很多人可能也注意到CSS的子选择器也会被IE忽略) 5.图片替换技巧 使用标准的html而不是图片来显示文本通常更明智，除了加速下载外，还可以获得更好的可用性。但是如果你决心使用访问者机器中可能没有的字体，你只能选择图片。例如，你想在每一页的顶部使用“Buy widgets“标题，但你也希望它能被搜索引擎发现，为了美丽，你使用罕见的字体，然后你必须使用图片来显示：

当然，这是正确的，但有证据表明，搜索引擎比alt文本更关注真实文本（因为有太多的网站使用alt文本作为关键字），所以我们必须使用另一种方法：

Buy widgets

，那你漂亮的字体呢？下面的css可以帮忙:h1{background: url(widget-image.gif) no-repeat;}h1 span{position: absolute;left:-2000px;} 现在你既用了漂亮的图片，又很好地隐藏了真实的文本——借助css，文本位于屏幕左侧-2000像素。 6.css盒模型hack的另一个选择 css盒模型hack用于解决IE6之前的浏览器显示问题.0之前的版本将在宽度范围内包含元素的边框值和填充值(而不是宽度值)。例如，您可以使用以下css来指定容器的尺寸：#box{width: 100px;border: 5px;padding: 20px;} 然后应用于html： … 在几乎所有浏览器中，盒子的总宽度是150像素(100像素宽度) 两个五像素的边框 填充两个20像素)，只有在IE6之前版本的浏览器中，仍然有100像素(边框值和填充值包含在宽度值中)。盒子模型的hack是为了解决这个问题，但也会带来麻烦。更简单的方法如下：css:#box{width: 150px;}#box div {border: 5px;padding: 20px;}html:
网页特效园 这样，任何浏览器中盒子的总宽度都将是150像素。 7.把块元素放在中间 假设您的网站使用固定宽度的布局，所有内容都放置在屏幕中央，并且可以使用以下css：#content{width: 700px;margin: 0 auto;} 您可以在htmlbody中放置任何项目 在中间，该项目将自动获得相等的左右边界值，以确保中间显示。然而，IE6之前版本的浏览器中仍然存在问题，不会居中，因此必须修改如下：body{text-align: center;}#content{text-align: left;width: 700px;margin: 0 auto;} body的设置会导致主要内容居中，但即使是所有的文字也居中，恐怕这不是你想要的效果，所以#content div还应指定一个值：text-align: left 8.使用css实现垂直居中 垂直居中对于表格来说是小菜一碟，只需指定的单元格是verticalal-align: middle可以，但这在css布局中不起作用。假设你将导航菜单的高度设置为2em，然后在css中指定垂直对齐的规则，文本仍然会排列在盒子的顶部，没有区别。假设你将导航菜单的高度设置为2em，然后在css中指定垂直对齐的规则，文本仍然会排列在盒子的顶部，没有区别。为了解决这个问题，只需将盒子的高度设置为与盒子高度相同的高度。例如，如果盒子高度为2em，则只需在css中添加另一个：line-height: 2em 垂直居中可以实现！ 9. css定位在容器中 css最大的优点之一是可以在文档的任何位置定位对象，也可以在容器中定位对象。只需为容器添加一个css规则：#container{position: relative;} 与容器相比，容器中的任何元素都是定位的。假设您使用以下html结构： … 若要将navigation定位在容器内，离左边界30像素，离顶部5像素，可使用以下css语句：#navigation{position: absolute;left: 30px;top: 5px;} 10.延伸到屏幕底部的背景色 css的缺点之一是缺乏对垂直方向的控制，导致表格布局无法遇到的问题。假设你在页面的左侧设置了一个导航列来放置网站。假设你在页面的左侧设置了一个导航列来放置网站。页面为白色背景，但您希望导航列为蓝色背景，使用以下css：#navigation{background: blue;width: 150px;} 问题是导航项不会一直延伸到页面底部，其背景色自然也不会延伸到底部。所以左列的蓝色背景在页面上被切断，浪费了你的设计。怎么办呢？不幸的是，我们现在只能用欺骗的方式，即将body的背景指定为与左列相同颜色和宽度的图片，css如下：body{background: url(blue-image.gif) 0 0 repeat-y;} 背景图为宽150像素的蓝色图片。该方法的缺点是不能使用em来指定左列的宽度。当用户改变文本的大小，导致内容的宽度扩大时，背景颜色的宽度不会改变。 到写这篇文章为止，这是解决这类问题的唯一方法，所以你只能使用像素值来获得不同的背景颜色，可以自动延伸到左列